swiftui-liquid-glass

dpearson2699/swift-ios-skillsArchitecture & DesignAudit passedSnapshot b91d148d0fb8

Summary

Implement, review, or improve SwiftUI Liquid Glass effects for iOS 26+. Covers glassEffect modifier, GlassEffectContainer, glass button styles, glass toolbar/tab bar, static status badges vs interactive controls, morphing transitions, tinting, interactive glass, ToolbarSpacer, scrollEdgeEffectStyle, backgroundExtensionEffect, and availability gating. Use when asked about Liquid Glass, glass buttons, glassEffect, GlassEffectTransition, glassEffectID, glassEffectUnion, scroll edge effects, or adopting iOS 26 design.

SKILL.md

SwiftUI Liquid Glass

Liquid Glass is the dynamic translucent material introduced across Apple platforms 26. Standard SwiftUI bars and presentations adopt it automatically when built with the current SDK. Reserve custom glass for functional controls and navigation surfaces, not general content backgrounds.

See references/liquid-glass.md for the full API reference with additional examples.

Workflow
Core API Summary
Code Examples
Common Mistakes
Review Checklist
References

Workflow

Choose the path that matches the request:

1. Implement a new feature with Liquid Glass

Identify target surfaces (floating controls, custom bars, transient controls).
Decide shape, prominence, and whether each element is a real control or static status.
Wrap grouped glass elements in a GlassEffectContainer.
Apply .glassEffect() after layout and appearance modifiers.
Add .interactive() only to tappable/focusable elements.
Add morphing transitions with glassEffectID(_:in:) where the view hierarchy changes with animation. Put glassEffectTransition(_:) on the inserted or removed glass child, not on the always-present container, and choose the style using Morphing & Transitions.

nonisolated func glassEffect(
    _ glass: Glass = .regular,
    in shape: some Shape = DefaultGlassEffectShape()
) -> some View

Property / Method	Purpose
`.regular`	Standard glass material
`.clear`	Clear variant; add dimming/contrast treatment when legibility needs it
`.identity`	No visual effect (pass-through)
`.tint(_:)`	Add a color tint for prominence
`.interactive(_:)`	React to touch and pointer interactions

GlassEffectContainer(spacing: 24) {
    // child views with .glassEffect()
}

Modifier	Purpose
`glassEffectID(_:in:)`	Stable identity for morphing during view hierarchy changes
`glassEffectUnion(id:namespace:)`	Merge multiple views into one glass shape
`glassEffectTransition(_:)`	Control how glass appears/disappears

Button("Action") { }
    .buttonStyle(.glass)           // standard glass button

Button("Primary") { }
    .buttonStyle(.glassProminent)  // prominent glass button

Button("Media") { }
    .buttonStyle(.glass(.clear))    // configurable variant; verify contrast

API	Use
`scrollEdgeEffectStyle`	Configure a scroll boundary's visual treatment.
`backgroundExtensionEffect`	Extend one background under safe-area edges with mirrored blur.
`ToolbarSpacer`	Create a visual break between toolbar items.

if #available(iOS 26, *) {
    Button("Show Status") { showStatusDetails() }
        .buttonStyle(.glass)
} else {
    Button("Show Status") { showStatusDetails() }
        .buttonStyle(.bordered)
}

let symbols = ["pencil", "eraser.fill", "lasso"]

GlassEffectContainer(spacing: 24) {
    HStack(spacing: 24) {
        ForEach(symbols, id: \.self) { symbol in
            Image(systemName: symbol)
                .frame(width: 56, height: 56)
                .glassEffect()
        }
    }
}

@State private var isExpanded = false
@Namespace private var ns

var body: some View {
    GlassEffectContainer(spacing: 40) {
        HStack(spacing: 40) {
            Image(systemName: "pencil")
                .frame(width: 80, height: 80)
                .glassEffect()
                .glassEffectID("pencil", in: ns)

            if isExpanded {
                Image(systemName: "eraser.fill")
                    .frame(width: 80, height: 80)
                    .glassEffect()
                    .glassEffectID("eraser", in: ns)
                    .glassEffectTransition(.matchedGeometry)
            }
        }
    }

    Button("Toggle") {
        withAnimation { isExpanded.toggle() }
    }
    .buttonStyle(.glass)
}

@Namespace private var ns

GlassEffectContainer(spacing: 20) {
    HStack(spacing: 20) {
        ForEach(items.indices, id: \.self) { i in
            Image(systemName: items[i])
                .frame(width: 80, height: 80)
                .glassEffect()
                .glassEffectUnion(id: i < 2 ? "group1" : "group2", namespace: ns)
        }
    }
}

struct GlassIconControl: View {
    let icon: String
    let tint: Color
    let action: () -> Void

    var body: some View {
        Button(action: action) {
            Image(systemName: icon)
                .font(.title2)
                .padding()
        }
        .buttonStyle(.glass(.regular.tint(tint)))
    }
}

if #available(iOS 26, *) {
    ZStack {
        Capsule()
            .fill(.black.opacity(0.28))

        Button {
            playRecap()
        } label: {
            Label("Play", systemImage: "play.fill")
                .font(.headline)
                .padding(.horizontal, 8)
        }
        .buttonStyle(.glass(.clear))
    }
    .fixedSize()
} else {
    Button("Play", systemImage: "play.fill") { playRecap() }
        .buttonStyle(.borderedProminent)
}

VStack(spacing: 8) {
    Text("24")
        .font(.headline.monospacedDigit())
        .accessibilityLabel("24 options expiring")

    Text("Options Expiring")
        .font(.subheadline)
        .foregroundStyle(.secondary)
}
// Keep read-only status out of toolbar control slots and do not add .interactive().

Mistake	Fix
Glass decorates static content	Keep it in the controls/navigation layer.
Read-only status uses `.interactive()` or an action slot	Present status as content, or make the whole badge one real accessible action.
Related effects use nested containers	Use one `GlassEffectContainer` per related blending/morphing group.
`.glassEffect()` precedes padding/frame/style	Apply layout and appearance first, then glass.
Custom effects assume default accessibility settings	Test Reduce Transparency, Reduce Motion, contrast, and legibility.
No pre-iOS 26 path	Gate the effect and preserve a functional fallback.

swiftui-liquid-glass

Summary

SKILL.md

SwiftUI Liquid Glass

Contents

Workflow

1. Implement a new feature with Liquid Glass

2. Improve an existing feature with Liquid Glass

3. Review existing Liquid Glass usage

Core API Summary

glassEffect(_:in:)

Glass struct

GlassEffectContainer

Morphing & Transitions

Button Styles

Related iOS 26 APIs

Code Examples

Glass button with availability gate

Grouped glass shapes in a container

Nearby morphing transition

Unioning views into a single glass shape

Tinted glass icon control

Clear glass action over bright content

Static status count, not a toolbar control

Common Mistakes

Review Checklist

References

Related skills