/swiftui-liquid-glass

name: swiftui-liquid-glass
description: "SwiftUI Liquid Glass: implement, adopt, refactor, review correctness/perf/design."

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.

if #available(iOS 26, *) {
    Text("Hello")
        .padding()
        .glassEffect(.regular.interactive(), in: .rect(cornerRadius: 16))
} else {
    Text("Hello")
        .padding()
        .background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 16))
}

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()
    }
}

Button("Confirm") { }
    .buttonStyle(.glassProminent)

Resources

• Reference guide: `references/liquid-glass.md`
• Prefer Apple docs for up-to-date API details.