103 lines
4.1 KiB
Markdown
103 lines
4.1 KiB
Markdown
---
|
|
name: swiftui-liquid-glass
|
|
description: Implement or review SwiftUI Liquid Glass APIs with correct fallbacks and modifier order.
|
|
risk: safe
|
|
source: "Dimillian/Skills (MIT)"
|
|
date_added: "2026-03-25"
|
|
---
|
|
|
|
# SwiftUI Liquid Glass
|
|
|
|
## 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.
|
|
|
|
## When to Use
|
|
- When the user wants to adopt or review Liquid Glass in SwiftUI UI.
|
|
- When you need correct API usage, fallback handling, or modifier ordering for Liquid Glass.
|
|
|
|
## 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.
|
|
|
|
## Limitations
|
|
- Use this skill only when the task clearly matches the scope described above.
|
|
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
|
|
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
|