본문으로 건너뛰기
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.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

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-skills72026년 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-skills72026년 8월 9일 업데이트

YordiLorenzo의 스킬 모두 보기

이 스킬의 문제 신고