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.

Swiftui Liquid Glass

AI Skill Market Insights

Be Part of the 0+ Developer Community

SwiftUI Liquid Glass

Overview

Workflow Decision Tree

1) Review an existing feature

2) Improve a feature using Liquid Glass

3) Implement a new feature using Liquid Glass

Core Guidelines

Review Checklist

Implementation Checklist

Quick Snippets

Resources

Quick Start

Manual Installation

TEAR & SHARE

Tags

using-git-worktrees

finishing-a-development-branch

test-driven-development

requesting-code-review

receiving-code-review

Channels

Learn

Compare

Company