From apple-kit-skills
Implement, review, or improve SwiftUI Liquid Glass effects for iOS 26+ apps, including glassEffect, GlassEffectContainer, glass buttons, toolbars, morphing transitions, and availability checks.
npx claudepluginhub dpearson2699/swift-ios-skills --plugin apple-kit-skillsThis skill uses the workspace's default tool permissions.
Liquid Glass is the dynamic translucent material introduced in iOS 26 (and iPadOS 26,
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
Liquid Glass is the dynamic translucent material introduced in iOS 26 (and iPadOS 26, macOS 26, tvOS 26, watchOS 26). It blurs content behind it, reflects surrounding color and light, and reacts to touch and pointer interactions. Standard SwiftUI components (tab bars, toolbars, navigation bars, sheets) adopt Liquid Glass automatically when built with the iOS 26 SDK. Use the APIs below for custom views and controls.
See references/liquid-glass.md for the full API reference with additional examples.
Choose the path that matches the request:
GlassEffectContainer..glassEffect() after layout and appearance modifiers..interactive() only to tappable/focusable elements.glassEffectID(_:in:) where the view hierarchy
changes with animation.if #available(iOS 26, *) and provide a fallback for earlier versions..glassEffect().GlassEffectContainer for blending and performance..buttonStyle(.glass) or .buttonStyle(.glassProminent).Run through the Review Checklist below and verify each item.
Applies Liquid Glass behind a view. Default: .regular variant in a Capsule shape.
nonisolated func glassEffect(
_ glass: Glass = .regular,
in shape: some Shape = DefaultGlassEffectShape()
) -> some View
| Property / Method | Purpose |
|---|---|
.regular | Standard glass material |
.clear | Clear variant (minimal tint) |
.identity | No visual effect (pass-through) |
.tint(_:) | Add a color tint for prominence |
.interactive(_:) | React to touch and pointer interactions |
Chain them: .regular.tint(.blue).interactive()
Wraps multiple glass views for shared rendering, blending, and morphing.
GlassEffectContainer(spacing: 24) {
// child views with .glassEffect()
}
The spacing controls when nearby glass shapes begin to blend. Match or exceed
the interior layout spacing so shapes merge during animated transitions but remain
separate at rest.
| 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 |
Transition types: .matchedGeometry (default when within spacing), .materialize
(fade content + animate glass in/out), .identity (no transition).
Button("Action") { }
.buttonStyle(.glass) // standard glass button
Button("Primary") { }
.buttonStyle(.glassProminent) // prominent glass button
These complement Liquid Glass when building custom toolbars and scroll views:
ScrollView {
content
}
.scrollEdgeEffectStyle(.soft, for: .top) // Configures edge effect at scroll boundaries
// Duplicate view into mirrored copies at safe area edges with blur (e.g., under sidebars)
content
.backgroundExtensionEffect()
Creates a visual break between items in toolbars:
.toolbar {
ToolbarItem { Button("Edit") { } }
ToolbarSpacer(.fixed)
ToolbarItem { Button("Share") { } }
}
if #available(iOS 26, *) {
Text("Status")
.padding()
.glassEffect(.regular.interactive(), in: .rect(cornerRadius: 16))
} else {
Text("Status")
.padding()
.background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 16))
}
GlassEffectContainer(spacing: 24) {
HStack(spacing: 24) {
ForEach(tools) { tool in
Image(systemName: tool.icon)
.frame(width: 56, height: 56)
.glassEffect(.regular.interactive())
}
}
}
@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)
}
}
}
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 GlassBadge: View {
let icon: String
let tint: Color
var body: some View {
Image(systemName: icon)
.font(.title2)
.padding()
.glassEffect(.regular.tint(tint), in: .rect(cornerRadius: 12))
}
}
Overuse distracts from content. Glass should emphasize key interactive elements, not decorate everything.
// WRONG: Glass on everything
VStack {
Text("Title").glassEffect()
Text("Subtitle").glassEffect()
Divider().glassEffect()
Text("Body").glassEffect()
}
// CORRECT: Glass on primary interactive elements only
VStack {
Text("Title").font(.title)
Text("Subtitle").font(.subheadline)
Divider()
Text("Body")
}
.padding()
.glassEffect()
Nested containers cause undefined rendering behavior.
// WRONG
GlassEffectContainer {
GlassEffectContainer {
content.glassEffect()
}
}
// CORRECT: Single container wrapping all glass views
GlassEffectContainer {
content.glassEffect()
}
.interactive() adds visual affordance suggesting tappability. Using it on decorative glass misleads users.
Glass calculates its shape from the final frame. Applying it before padding/frame produces incorrect bounds.
// WRONG: Glass applied before padding
Text("Label").glassEffect().padding()
// CORRECT: Glass applied after layout
Text("Label").padding().glassEffect()
Always test with Reduce Transparency and Reduce Motion enabled. Glass degrades gracefully but verify content remains readable.
Liquid Glass requires iOS 26+. Gate with if #available(iOS 26, *) and provide a fallback.
if #available(iOS 26, *) present with fallback UI.GlassEffectContainer..glassEffect() applied after layout/appearance modifiers..interactive() used only where user interaction exists.glassEffectID used with @Namespace for morphing animations..matchedGeometry for nearby effects; .materialize for distant ones..glass / .glassProminent used for buttons.