swiftui-liquid-glass

---
name: swiftui-liquid-glass
description: "Use when working with swiftUI Liquid Glass: implement, adopt, refactor, review correctness/perf/design from steipete/agent-scripts."
source: https://github.com/steipete/agent-scripts/tree/main/skills/swiftui-liquid-glass
generated: 2026-05-27T20:56:39.364Z
category: framework
audience: engineers
---

## When to use

- Using the swiftui-liquid-glass skill's upstream workflow, guardrails, and local-tool assumptions.
- Auditing commands or operational steps before changing swiftui liquid glass behavior.
- Needing a compact agent reference for swiftUI Liquid Glass: implement, adopt, refactor, review correctness/perf/design.

## Key concepts

### 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.

## API reference

```
npx skills add steipete/agent-scripts --skill swiftui-liquid-glass
```

Install the swiftui-liquid-glass skill from steipete/agent-scripts.

```
npx skills add steipete/agent-scripts --skill swiftui-liquid-glass
```

```
if #available(iOS 26, ) {.
```

Command or snippet documented by the upstream swiftui-liquid-glass skill.

```
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) {.
```

Command or snippet documented by the upstream swiftui-liquid-glass skill.

```
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") { }.
```

Command or snippet documented by the upstream swiftui-liquid-glass skill.

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

## Gotchas

- Prefer native Liquid Glass APIs over custom blurs.
- Prefer Apple docs for up-to-date API details.

---
Generated by SkillMake from https://github.com/steipete/agent-scripts/tree/main/skills/swiftui-liquid-glass on 2026-05-27T20:56:39.364Z.
Verify against source before relying on details.

File: ~/.claude/skills/swiftui-liquid-glass/SKILL.md