swiftui-liquid-glass

# SwiftUI Liquid Glass ## Overview Use this skill to build or review SwiftUI features that fully align with the iOS 26+ Liquid Glass API. Prioritize native APIs (`glassEffect`, `GlassEffectContainer`, glass button styles) and Apple design guidance. Keep usage consistent, interactive where needed, and performance aware. ## Workflow Decision Tree Choose the path that matches the request: ### 1) Review an existing feature - Inspect where Liquid Glass should be used and where it should not. - Verify correct modifier order, shape usage, and container placement. - Check for iOS 26+ availability handling and sensible fallbacks. ### 2) Improve a feature using Liquid Glass - Identify target components for glass treatment (surfaces, chips, buttons, cards). - Refactor to use `GlassEffectContainer` where multiple glass elements appear. - Introduce interactive glass only for tappable or focusable elements. ### 3) Implement a new feature using Liquid Glass - Design the glass surfaces and interactions first (shape, prominence, grouping). - Add glass modifiers after layout/appearance modifiers. - Add morphing transitions only when the view hierarchy changes with animation. ## Core Guidelines - Prefer native Liquid Glass APIs over custom blurs. - Use `GlassEffectContainer` when multiple glass elements coexist. - Apply `.glassEffect(...)` after layout and visual modifiers. - Use `.interactive()` for elements that respond to touch/pointer. - Keep shapes consistent across related elements for a cohesive look. - Gate with `#available(iOS 26, *)` and provide a non-glass fallback. ## Review Checklist - **Availability**: `#available(iOS 26, *)` present with fallback UI. - **Composition**: Multiple glass views wrapped in `GlassEffectContainer`. - **Modifier order**: `glassEffect` applied after layout/appearance modifiers. - **Interactivity**: `interactive()` only where user interaction exists. - **Transitions**: `glassEffectID` used with `@Namespace` for morphing. - **Consistency**: Shapes, tinting, and spacing align across the feature. ## Implementation Checklist - Define target elements and desired glass prominence. - Wrap grouped glass elements in `GlassEffectContainer` and tune spacing. - Use `.glassEffect(.regular.tint(...).interactive(), in: .rect(cornerRadius: ...))` as needed. - Use `.buttonStyle(.glass)` / `.buttonStyle(.glassProminent)` for actions. - Add morphing transitions with `glassEffectID` when hierarchy changes. - Provide fallback materials and visuals for earlier iOS versions. ## Quick Snippets Use these patterns directly and tailor shapes/tints/spacing. ```swift if #available(iOS 26, *) { Text("Hello") .padding() .glassEffect(.regular.interactive(), in: .rect(cornerRadius: 16)) } else { Text("Hello") .padding() .background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 16)) } ``` ```swift GlassEffectContainer(spacing: 24) { HStack(spacing: 24) { Image(systemName: "scribble.variable") .frame(width: 72, height: 72) .font(.system(size: 32)) .glassEffect() Image(systemName: "eraser.fill") .frame(width: 72, height: 72) .font(.system(size: 32)) .glassEffect() } } ``` ```swift Button("Confirm") { } .buttonStyle(.glassProminent) ``` ## Resources - Reference guide: `references/liquid-glass.md` - Prefer Apple docs for up-to-date API details. ## Technique Map - **GlassEffectContainer for grouping** — Wrap multiple glass elements; because cohesive morphing and visual grouping. - **Modifier order** — glassEffect after layout/appearance; because order affects rendering. - **Interactive only for tappable** — .interactive() on user-responsive elements; because overuse causes unnecessary updates. - **glassEffectID + @Namespace** — For morphing when hierarchy changes; because smooth transitions between glass states. - **#available(iOS 26, *)** — Always gate; provide ultraThinMaterial fallback; because earlier iOS has no Liquid Glass. - **Button styles** — .glass, .glassProminent; because native over custom. ## Technique Notes Reference: references/liquid-glass.md. Shapes and tints consistent across feature. Apply .glassEffect(.regular.tint(...).interactive(), in: .rect(cornerRadius: ...)). Only adopt when user explicitly requests. --- ## Prompt Architect Overlay **Role Definition:** SwiftUI Liquid Glass specialist. iOS 26+ glassEffect, GlassEffectContainer, glass button styles. Implementation, review, refactor to Liquid Glass. **Input Contract:** Accepts "adopt Liquid Glass," refactor request, new feature with glass, or review of Liquid Glass usage. Code or UI description. **Output Contract:** Implementation with #available gate and fallback. GlassEffectContainer usage. Modifier order. Quick snippets. Review checklist (availability, composition, order, interactivity, transitions, consistency). **Edge Cases & Fallbacks:** If iOS <26→provide full fallback (ultraThinMaterial, RoundedRectangle). If morphing broken→check glassEffectID and @Namespace. If over-interactive→remove .interactive() from non-tappable elements.