Install any skill in seconds. Free to start, no credit card required.
Get Started Free →Apple Liquid Glass design system — comprehensive design philosophy, implementation guide, and technical API reference from WWDC 2025. Covers design principles (iOS-native glass hierarchy, restraint over spectacle), implementation patterns (Regular vs Clear variants, SwiftUI glassEffect API, scroll edge effects, tinting), platform adaptation (iOS 26+, iPadOS 26+, macOS Tahoe+, visionOS 3+), accessibility, performance, testing, design review frameworks, and iOS-native UI redesign guidance.
.claude/skills/coco-research-axiom-liquid-glass/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-01 | ✗→✓ | ▲ Improved | 17% | 0% |
| case-02 | ✗→✓ | ▲ Improved | 44% | 0% |
| case-11 | ✗→✓ | ▲ Improved | 144% | 0% |
| case-12 | ✗→✓ | ▲ Improved | 136% | 0% |
| case-13 | ✗→✓ | ▲ Improved | 108% | 0% |
Avoid trendy glassmorphism gimmicks. Glass effects should appear only where they improve clarity and depth. Every screen should feel like it belongs in a first-party Apple app.
Liquid Glass is Apple's next-generation material design system introduced at WWDC 2025. It represents a significant evolution from previous materials (Aqua, iOS 7 blurs, Dynamic Island) by creating a new digital meta-material that:
Use glass materials to express depth and context:
| Material | Use For | Visual Weight | |----------|---------|---------------| | Ultra-thin | Subtle overlays, toolbars, floating controls | Lightest | | Regular | Cards needing gentle separation | Medium | | Thick | Bottom sheets, modals, areas requiring strong readability | Heaviest |
Rules:
Liquid Glass defines itself through lensing — the warping and bending of light that communicates presence, motion, and form. Unlike previous materials that scattered light, Liquid Glass uses instinctive visual cues from the natural world.
Liquid Glass continuously adapts without fixed light/dark appearance:
glassEffect Modifierswift// Basic usage - applies glass within capsule shape Text("Hello") .glassEffect() // Custom shape Text("Hello") .glassEffect(in: RoundedRectangle(cornerRadius: 12)) // Interactive elements (iOS) Button("Tap Me") { } .glassEffect() .interactive()
Automatic Adoption: Simply recompiling with Xcode 26 brings Liquid Glass to standard controls automatically.
CRITICAL DECISION: Never mix Regular and Clear in the same interface.
When to use: Navigation bars, tab bars, toolbars, buttons, menus, sidebars
swiftNavigationView { // Content } .glassEffect() // Uses Regular variant by default
Use ONLY when ALL three conditions are met:
swiftZStack { MediaRichBackground() .overlay(.black.opacity(0.3)) // Dimming layer BoldBrightControl() .glassEffect(.clear) }
WARNING: Using Clear without meeting all three conditions results in poor legibility.
[Content Layer — No Glass]
|
[Navigation Layer — Liquid Glass]
- Tab bars, Navigation bars, Toolbars, Floating controlsswift// WRONG List(items) { item in Text(item.name) } .glassEffect() // Competes with navigation, muddy hierarchy
swift// WRONG ZStack { NavigationBar().glassEffect() FloatingButton().glassEffect() // Glass on glass } // CORRECT ZStack { NavigationBar().glassEffect() FloatingButton() .foregroundStyle(.primary) // Use fills, transparency, vibrancy }
Reposition or scale content to maintain separation. Intersections are acceptable during scrolling/transitions.
swiftButton("Primary Action") { } .tint(.red) .glassEffect()
swift// WRONG - Solid fill breaks glass character Button("Action") {} .background(.red) // Opaque // CORRECT - Transparent, grounded Button("Action") {} .tint(.red) .glassEffect()
Work in concert with Liquid Glass to maintain separation with scrolling content.
Use when pinned accessory views exist:
swiftScrollView { } .scrollEdgeEffect(.hard)
Liquid Glass offers accessibility features that modify material without sacrificing its magic:
| Feature | Effect | Developer Action | |---------|--------|-----------------| | Reduced Transparency | Makes glass frostier, obscures more | Automatic | | Increased Contrast | Elements predominantly black/white with contrasting border | Automatic | | Reduced Motion | Decreases intensity, disables elastic properties | Automatic |
No developer action required — all features apply automatically when using Liquid Glass.
swift// WRONG - Deep nesting ZStack { GlassContainer1().glassEffect() ZStack { GlassContainer2().glassEffect() } } // CORRECT - Flat hierarchy VStack { GlassContainer1().glassEffect() GlassContainer2().glassEffect() }
swiftfunc testLiquidGlassAppearance() { let app = XCUIApplication() app.launch() // Test light mode XCTContext.runActivity(named: "Light Mode Glass") { _ in let screenshot = app.screenshot() } // Test dark mode app.launchArguments = ["-UIUserInterfaceStyle", "dark"] app.launch() XCTContext.runActivity(named: "Dark Mode Glass") { _ in let screenshot = app.screenshot() } }
swiftfunc testLiquidGlassAccessibility() { app.launchArguments += [ "-UIAccessibilityIsReduceTransparencyEnabled", "1", "-UIAccessibilityButtonShapesEnabled", "1", "-UIAccessibilityIsReduceMotionEnabled", "1" ] XCTAssertTrue(glassElement.exists) XCTAssertTrue(glassElement.isHittable) }
If you hear ANY of these, STOP and reference the skill:
Step 1: Show the Framework
"Let me show you Apple's guidance on Clear variant.
It requires THREE conditions:
1. Media-rich content background
2. Dimming layer for legibility
3. Bold, bright controls on top
Let me show which screens meet all three..."Step 2: Demonstrate the Risk Open the app on a device. Show Clear variant in low-contrast scenario (unreadable) vs Regular (legible).
Step 3: Offer Compromise
"Clear works beautifully in these hero sections where all three conditions apply.
Regular handles everything else with automatic legibility. Best of both worlds."Step 4: Document the Decision If overruled, send written documentation of the decision and monitoring plan.
glassEffect(in:isInteractive:)swiftfunc glassEffect<S: Shape>( in shape: S = Capsule(), isInteractive: Bool = false ) -> some View
glassEffect(_:in:isInteractive:)swiftfunc glassEffect<S: Shape>( _ variant: GlassVariant, // .regular or .clear in shape: S = Capsule(), isInteractive: Bool = false ) -> some View
scrollEdgeEffect(_:)swiftfunc scrollEdgeEffect(_ style: ScrollEdgeStyle) -> some View // styles: .automatic, .soft, .hard
scrollEdgeEffectStyle(_:for:) (NEW in iOS 26)swiftfunc scrollEdgeEffectStyle(_ style: ScrollEdgeStyle, for edges: Edge.Set) -> some View
glassBackgroundEffect() (NEW in iOS 26)Apply glass effect to custom views for reflecting surrounding content.
swiftCustomPhotoGrid() .glassBackgroundEffect()
GlassEffectContainer (NEW in iOS 26)Container for combining multiple Liquid Glass effects with optimized rendering.
swiftGlassEffectContainer { HStack { Button("Action 1") { }.glassEffect() Button("Action 2") { }.glassEffect() } }
Benefits: Optimizes rendering, fluid morphing between glass shapes, reduced compositor overhead.
Spacer(.fixed) in ToolbarsSeparates toolbar button groups with fixed spacing.
.buttonStyle(.borderedProminent) + .tint() in ToolbarsMakes toolbar items prominent with Liquid Glass tinting.
.searchable()).tabRole(.search) — morphs into search field.tabBarMinimizationBehavior(.onScrollDown)swiftenum GlassVariant { case regular // Default - full adaptive behavior case clear // More transparent, no adaptation } enum ScrollEdgeStyle { case automatic // System determines case soft // Gradual fade case hard // Uniform across toolbar height }
Add to Info.plist to maintain iOS 18 appearance while building with iOS 26 SDK:
xml<key>UIDesignRequiresCompatibility</key> <true/>
Migration strategy:
For each redesigned screen, provide:
WWDC: 2025-219, 2025-323, 2025-256 Docs: /technologyoverviews/adopting-liquid-glass, /swiftui/landmarks-building-an-app-with-liquid-glass, /swiftui/applying-liquid-glass-to-custom-views Related Skills: axiom-liquid-glass-ref, swiftui-liquid-glass Platforms: iOS 26+, iPadOS 26+, macOS Tahoe, visionOS 3 Xcode: 26+
| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-01 | fail→pass | 50,798 | 41,755 | -18% | 1 | 1 | 0% | 8,252 | 9,634 | +17% | 0 | 0 | — |
case-02 | fail→pass | 38,615 | 23,212 | -40% | 1 | 1 | 0% | 5,281 | 7,628 | +44% | 0 | 0 | — |
case-09 | pass→pass | 19,454 | 6,820 | -65% | 1 | 1 | 0% | 2,147 | 5,247 | +144% | 0 | 0 | — |
case-10 | pass→pass | 18,780 | 16,603 | -12% | 1 | 1 | 0% | 2,066 | 6,102 | +195% | 0 | 0 | — |
case-11 | fail→pass | 12,584 | 4,185 | -67% | 1 | 1 | 0% | 2,006 | 4,887 | +144% | 0 | 0 | — |
case-12 | fail→pass | 19,550 | 12,193 | -38% | 1 | 1 | 0% | 2,281 | 5,389 | +136% | 0 | 0 | — |
case-13 | fail→pass | 20,127 | 9,590 | -52% | 1 | 1 | 0% | 2,751 | 5,735 | +108% | 0 | 0 | — |
case-19 | fail→pass | 25,526 | 19,572 | -23% | 1 | 1 | 0% | 3,034 | 6,876 | +127% | 0 | 0 | — |
case-03 | fail→fail | 24,398 | 31,653 | +30% | 1 | 1 | 0% | 3,145 | 8,020 | +155% | 0 | 0 | — |
case-04 | pass→pass | 30,182 | 19,711 | -35% | 1 | 1 | 0% | 3,673 | 7,757 | +111% | 0 | 0 | — |
case-05 | pass→pass | 25,478 | 27,995 | +10% | 1 | 1 | 0% | 3,018 | 7,760 | +157% | 0 | 0 | — |
case-06 | pass→pass | 26,214 | 24,941 | -5% | 1 | 1 | 0% | 3,271 | 7,163 | +119% | 0 | 0 | — |
case-07 | fail→pass | 21,094 | 19,796 | -6% | 1 | 1 | 0% | 3,459 | 6,553 | +89% | 0 | 0 | — |
case-08 | fail→fail | 20,249 | 15,371 | -24% | 1 | 1 | 0% | 1,999 | 5,829 | +192% | 0 | 0 | — |
case-14 | fail→pass | 24,978 | 2,957 | -88% | 1 | 1 | 0% | 3,509 | 4,663 | +33% | 0 | 0 | — |
case-15 | fail→fail | 14,742 | 19,183 | +30% | 1 | 1 | 0% | 2,216 | 6,367 | +187% | 0 | 0 | — |
case-16 | fail→pass | 20,732 | 10,153 | -51% | 1 | 1 | 0% | 2,845 | 5,999 | +111% | 0 | 0 | — |
case-17 | fail→pass | 21,977 | 14,085 | -36% | 1 | 1 | 0% | 3,308 | 5,621 | +70% | 0 | 0 | — |
case-18 | pass→pass | 13,029 | 14,605 | +12% | 1 | 1 | 0% | 2,020 | 5,609 | +178% | 0 | 0 | — |
case-20 | pass→pass | 17,391 | 10,589 | -39% | 1 | 1 | 0% | 2,520 | 5,183 | +106% | 0 | 0 | — |
case-21 | fail→fail | 13,077 | 6,673 | -49% | 1 | 1 | 0% | 1,245 | 5,345 | +329% | 0 | 0 | — |
case-22 | fail→pass | 24,980 | 8,372 | -66% | 1 | 1 | 0% | 3,989 | 5,734 | +44% | 0 | 0 | — |
case-23 | fail→fail | 29,990 | 18,593 | -38% | 1 | 1 | 0% | 3,828 | 6,684 | +75% | 0 | 0 | — |
case-24 | fail→pass | 15,064 | 3,124 | -79% | 1 | 1 | 0% | 1,283 | 4,602 | +259% | 0 | 0 | — |
case-25 | pass→pass | 20,224 | 18,861 | -7% | 1 | 1 | 0% | 2,964 | 6,775 | +129% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 25 cases were attempted. The headline lift of +48 percentage points is the difference between those two pass rates over the 25 comparable cases.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.