本文へ移動
cccskills
無料GitHub で公開

liquid-glass-motion

Animation, morphing, and shader best practices for Liquid Glass and SwiftUI motion on iOS 26+/macOS 26+ through iOS 27. Use when animating glass or building UI motion: glassEffectID, @Namespace morphing, GlassEffectContainer spacing, glassEffectUnion, glassEffectTransition (.matchedGeometry/.materialize), withAnimation, springs, UnitCurve, PhaseAnimator, KeyframeAnimator, @Animatable, matchedTransitionSource, navigationTransition zoom, scrollTransition, visualEffect, Metal shaders (colorEffect, distortionEffect, layerEffect, [[stitchable]]), accessibilityReduceMotion gating, Instruments/xctrace profiling of hangs and animation hitches. Also fires on symptoms: glass morph not animating, view pops in instead of morphing, glass fades instead of materializing, morph flickers with Reduce Motion, menu glass morphs as a rectangle, animation runs on insert but not removal, PhaseAnimator loops forever or fires once, shader shows clipped edges (maxSampleOffset), animation hitches or main-thread hangs while scrolling glass chrome. For static glass, availability gating, toolbars, UIKit/AppKit glass, or accessibility of the material itself use the liquid-glass skill first.

インストール方法を見る

含まれるファイル(24)

  • SKILL.md5.4 KB
  • ATTRIBUTION.md2.3 KB
  • references/animation-fundamentals.md20.5 KB
  • references/metal-and-glass.md15.9 KB
  • references/morphing.md17.1 KB
  • references/performance-and-instrumentation.md9.4 KB
  • references/phase-and-keyframe.md13.3 KB
  • references/reduce-motion.md15.7 KB
  • references/scroll-driven.md10.5 KB
  • references/transitions-and-navigation.md11.3 KB
  • scripts/analyze_trace.py9.9 KB
  • scripts/instruments_parser/__init__.py69 B
  • scripts/instruments_parser/causes.py5.9 KB
  • scripts/instruments_parser/correlate.py6.2 KB
  • scripts/instruments_parser/events.py10.6 KB
  • scripts/instruments_parser/hangs.py3.4 KB
  • scripts/instruments_parser/hitches.py4.5 KB
  • scripts/instruments_parser/summary.py9.1 KB
  • scripts/instruments_parser/swiftui.py6.6 KB
  • scripts/instruments_parser/time_profiler.py4.3 KB
  • scripts/instruments_parser/xctrace.py3.5 KB
  • scripts/instruments_parser/xml_utils.py7.4 KB
  • scripts/LICENSE-AvdLee-SwiftUI-Agent-Skill1.1 KB
  • scripts/record_trace.py10.6 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Liquid Glass — motion, animation, and shaders

Companion to the liquid-glass skill (~/.claude/skills/liquid-glass/). Same tag system: [verified] / [apple] / [multi] / [single] / [version-pinned] — see that skill's SKILL.md. Composed 2026-08 and verified against Apple documentation and SDK interfaces.

Operating rules

  1. Before generating code, ALWAYS read the availability firewall in the companion liquid-glass skill (installed alongside this one): references/availability-and-sdk27.md. Motion code trips the same SDK-27 breakages (.if ban, @ContentBuilder, renames).
  2. Load references on demand via the router — one topic, one file.
  3. The motion model: Liquid Glass and its motion were designed together. Glass does not fade — it materializes by modulating lensing; when glass grows, its material gets thicker (deeper shadow, stronger lensing). Size change is a material change, which is why morphs must be the system animation, never hand-faked.
  4. Verify motion claims against references/ before repeating them — circulating write-ups get several of these facts wrong; the corrected facts live in these files.
  5. Profiling evidence beats reasoning: record an Instruments trace with xctrace before optimizing, and never trust the iOS Simulator for the SwiftUI instrument — see references/performance-and-instrumentation.md.

Hard rules (the short list)

  1. Never animate glass with .opacity / fades — use glassEffectTransition (.materialize is the sanctioned fade-like option). [multi]
  2. Morphing silently no-ops unless ALL four hold: same GlassEffectContainer; glassEffectID per element in one shared @Namespace; the change is view insertion/removal (not a value change); the state change is inside withAnimation. Plus geometry: nearest edges within the container's spacing. [multi]
  3. The interactive "squish" is one boolean — .interactive(). No public spring/damping/ stiffness knobs exist; do not promise tunable jelly. [multi]
  4. Gate every glass animation on accessibilityReduceMotion — the default morph is a kinetic effect, and reduce-motion users have experienced it as flickering. The system does NOT gate your withAnimation for you. [multi]
  5. One animation source per property — never mix implicit .animation, withAnimation, and scroll-driven updates on the same property. Implicit later in the view tree silently wins over explicit. [multi]
  6. The animation context must live OUTSIDE a conditional — an .animation() inside the if is destroyed with the view and removal never animates. [multi]
  7. Prefer renderer-side motion for scroll: scrollTransition / visualEffect(in:) over observable scroll-offset plumbing. [apple]
  8. Animate transforms first (scale/offset/rotation), frames second, identity changes last. [multi]

Topic router

TopicReference
Springs, curves, precedence, Transaction, @Animatable, CA bridgereferences/animation-fundamentals.md
Glass morphing, glassEffectID, union, glassEffectTransitionreferences/morphing.md
Navigation zoom, custom Transition, sheets, touch-vs-trackpadreferences/transitions-and-navigation.md
Scroll-driven motion, scrollTransition, visualEffect, chrome interplayreferences/scroll-driven.md
PhaseAnimator, KeyframeAnimator, symbol effectsreferences/phase-and-keyframe.md
Reduce Motion gating, replacement tablesreferences/reduce-motion.md
Metal shaders with/under/instead-of glassreferences/metal-and-glass.md
Performance model, xctrace profilingreferences/performance-and-instrumentation.md
Static glass, availability, toolbars, platform APIs, a11y of the materialliquid-glass skill
Choosing the actual spring/damping/duration valuesapple-motion-feel skill

Scripts

scripts/record_trace.py and scripts/analyze_trace.py (+ instruments_parser/) — vendored from Antoine van der Lee's SwiftUI-Agent-Skill (MIT; licence ships beside them as scripts/LICENSE-AvdLee-SwiftUI-Agent-Skill). Record and parse Instruments traces (Time Profiler, Hangs, Animation Hitches, SwiftUI lanes) into JSON/markdown. Usage and interpretation: references/performance-and-instrumentation.md.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Choose animation values that feel native on Apple platforms instead of guessing springs. Use when: picking a spring/duration/easing for any transition; an animation "feels off", sluggish, floaty, wobbly, or cheap; tuning a sheet, drawer, panel, selection lens, button press, or drag release; wiring gesture-driven motion; or someone asks "what spring should I use", "why does this feel wrong", "make it feel native/premium", "match Apple's feel". Also fires on hand-picked magic numbers in .spring(), on animations that jump when interrupted, and on motion that only starts after a gesture ends.

日本語の概要は準備中です。原文の説明を表示しています。

YordiLorenzo/liquid-glass-skills62026年8月9日 更新

Liquid Glass material best practices for SwiftUI, UIKit, and AppKit on iOS 26+/macOS 26+ (Tahoe) through iOS 27/macOS 27. Use when implementing, reviewing, or migrating to glass: glassEffect, Glass variants (.regular/.clear/.identity), tint, interactive(), GlassEffectContainer, glassEffectUnion, toolbar glass, ToolbarSpacer, scrollEdgeEffectStyle, sharedBackgroundVisibility, tabBarMinimizeBehavior, backgroundExtensionEffect, NSGlassEffectView, UIGlassEffect, Tahoe window chrome, glass accessibility (Reduce Transparency/Increase Contrast), pre-26 Material fallbacks, UIDesignRequiresCompatibility. Also fires on symptoms: glass renders dark or muddy, glass looks like a flat tinted rectangle, glass button doesn't register taps, tap passes through glass, "'glassEffect' is only available in iOS 26.0 or newer", "ambiguous use of 'opacity'", "'cornerRadius' was deprecated", glass looks different in simulator vs device, screenshots of glass UI don't match. For glass animation, morphing, glassEffectID, transitions, Metal shaders, or performance profiling use the liquid-glass-motion skill instead.

日本語の概要は準備中です。原文の説明を表示しています。

YordiLorenzo/liquid-glass-skills62026年8月9日 更新

YordiLorenzo のスキルをすべて見る

このスキルの問題を報告する