swiftui-liquid-glass

# SwiftUI Liquid Glass _Attribution: copied from @Dimillian’s `Dimillian/Skills` (2025-12-31)._ ## 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.