본문으로 건너뛰기
cccskills
무료GitHub에 공개

liquid-glass

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-skills

실행 점수 미검증

설치 방법 보기

포함된 파일(12)

  • SKILL.md5.8 KB
  • ATTRIBUTION.md1.6 KB
  • references/accessibility.md11.8 KB
  • references/appkit-and-mac-windows.md11.2 KB
  • references/availability-and-sdk27.md8.0 KB
  • references/containers-and-sampling.md9.4 KB
  • references/fallback-and-migration.md10.6 KB
  • references/known-bugs-and-testing.md12.6 KB
  • references/material-and-variants.md11.5 KB
  • references/review-checklist.md16.3 KB
  • references/toolbars-and-scroll-edge.md16.9 KB
  • references/uikit-glass.md8.7 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Liquid Glass — the material

Composed 2026-08 and verified against developer.apple.com and SDK interfaces. Every rule carries an availability floor and a confidence tag: [verified] (checked against Apple docs/SDK this composition), [apple] (Apple doc, unverified), [multi] (corroborated by multiple independent accounts), [single] (one account — verify before relying), [version-pinned] (bug workaround tied to OS versions; recheck on updates).

Operating rules

  1. ALWAYS read references/availability-and-sdk27.md before generating or reviewing glass code. It corrects availability errors present in most published material, including Apple's.
  2. Load other references on demand via the router below — one topic, one file.
  3. Glass belongs on the functional layer (controls, chrome) floating above the content layer. When asked to add glass to content (lists, media, text), first ask whether it should be glass at all.
  4. Prefer standard components (toolbars, search, sheets, tab bars) that adopt glass automatically; custom glassEffect surfaces are for distinctive elements only.
  5. Never present simulator rendering or exact screenshot pixels as evidence a glass change is correct — see references/known-bugs-and-testing.md.
  6. Animation of glass (morphing, transitions, reduce-motion gating, performance) is owned by the companion liquid-glass-motion skill, installed alongside this one. Read its references when the task involves motion; do not improvise glass animation from here.

Workflows

  • Review existing glass → references/review-checklist.md (diff-checkable items + known-bad API table). Also flag where glass should NOT be used.
  • Adopt / migrate an app → references/fallback-and-migration.md (deletion-first audit, 5 phases), then per-surface references.
  • Implement from scratch → references/material-and-variants.md + references/containers-and-sampling.md, then the platform file for your framework.

Hard rules (the short list)

  1. Availability-gate every glass API per platform with its real floor; fall back to Materials below 26. [verified]
  2. Never wrap glassEffect in a .if conditional-modifier helper — ternary with .identity or a ViewModifier gate instead. [apple]
  3. Apply glassEffect after layout and appearance modifiers. [multi]
  4. Two or more glass views near each other → one GlassEffectContainer. Glass cannot sample other glass; the container is visual correctness, not just performance. [multi]
  5. interactive() only on surfaces that actually respond to interaction; buttons already have it. [multi]
  6. Never set opacity < 1 on a glass view or any ancestor — refraction silently collapses. [multi]
  7. Glass needs content to refract: over a flat single-color background it reads as a flat tinted rectangle. Give it a gradient/image/dynamic content, or don't use glass. [multi]
  8. Never stack glass on glass. [multi]
  9. Custom-shape glass buttons need contentShape or only the glyph hit-tests. [version-pinned]
  10. Glass ignores .allowsHitTesting(false); only .disabled(true) suppresses its visual reaction. [verified]
  11. The system adapts the material for Reduce Transparency / Increase Contrast — don't fight it, and don't remove glass manually where the system would frost it. [multi]
  12. Dark/muddy glass over bright backgrounds in Dark Mode is by design; fix the background colors, not the glass. [verified]

Topic router

TopicReference
Availability, SDK-27 breakages, renames, compat flagreferences/availability-and-sdk27.md (always)
Variants, tint, shapes, interactive, when-to-usereferences/material-and-variants.md
Containers, sampling, spacing, glass-on-glassreferences/containers-and-sampling.md
Toolbars, scroll edge, tab bar, WWDC26 toolbar APIsreferences/toolbars-and-scroll-edge.md
UIKit (UIGlassEffect, corners, hosting)references/uikit-glass.md
AppKit, NSGlassEffectView, Mac windows, Tahoe chromereferences/appkit-and-mac-windows.md
Accessibility (transparency, contrast, hit targets)references/accessibility.md
Fallbacks below 26, migration workflowreferences/fallback-and-migration.md
Version-pinned bugs, testing/screenshot policyreferences/known-bugs-and-testing.md
Review audit + known-bad (hallucinated) APIsreferences/review-checklist.md
Morphing, glassEffectID, transitions, motion, Metal, profilingliquid-glass-motion skill

Scope

SwiftUI first; UIKit and AppKit covered; WidgetKit briefly in platform files. visionOS excluded — the SDK marks Liquid Glass unavailable there [verified]. watchOS/tvOS excluded — no reliable source material exists; do not improvise.

리뷰

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

댓글

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

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

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

0 / 1,000자

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

같은 저장소의 스킬

apple-motion-feel

무료

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-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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

YordiLorenzo/liquid-glass-skills72026년 8월 9일 업데이트

YordiLorenzo의 스킬 모두 보기

이 스킬의 문제 신고