iOS 26 Liquid Glass design language + the SwiftUI APIs that implement it, sourced from Apple's WWDC25 sessions 219/323 and developer.apple.com. Covers the functional-layer-over-content mental model, regular vs clear variants, glass-on-glass/over-tint don'ts, the floating tab bar, scroll edge effects, concentric corners, accessibility behavior, and a verified-vs-community API table.
SkillScore95Maintained
Automatic
◆Frontend / UI pack
Last verified 8/3/2026
What it changes
Passed 21 of 22 test cases with the skill, and 9 of 22 without it.
Without skill41%
With skill95%
Checks it passed that the model alone missed
Advises against tinting every toolbar button to avoid visual clutter.
Uses `.searchToolbarBehavior(.minimize)` with the exact modifier name.
Applies `.glassEffect(in: .rect(cornerRadius: 16))` to the custom view.
and 13 more in the full report
12 fixed9 passed either way1 still failing0 broke
Pass-rate lift
+55 pp
Tokens
+62%
Agent turns
0%
Response time
-31%
Model gemini-3.6-flashMeasured 8/3/2026v121 of 22 cases passed with skill
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 12 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 12
Prompt
We are configuring search bar behavior in our iOS 26 SwiftUI app's toolbar so that the search field contracts when scrolling. Which exact view modifier and enum case should be attached to `.searchable`?
What was checked, without and with the skill
Checked
Without skill
With skill
Uses `.searchToolbarBehavior(.minimize)` with the exact modifier name.
Missed
Passed
case-06 · gemini-3.6-flash · 8/3/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md113 linessingle file
iOS 26 Liquid Glass — design rules + the SwiftUI APIs that ship it
Liquid Glass is the unified material introduced across iOS/iPadOS/macOS Tahoe/watchOS/tvOS 26 (WWDC June 2025). Sources below are anchored to Apple primary material — WWDC25 session 219 "Meet Liquid Glass" and session 323 "Build a SwiftUI app with the new design" — and confirmed developer.apple.com/documentation symbol pages. API symbols are marked ✅ (shown in an Apple source) or ⚠️ (community-reported only — verify in the Xcode 26 SDK before relying on it). Do not treat ⚠️ items as canonical.
1. The one mental model that prevents 90% of mistakes
Glass is the functional/navigation layer that floats above the content layer. Content scrolls underneath it.
Apple, verbatim: "Liquid Glass is best reserved for the navigation layer that floats above the content of your app." (219)
"making [a tableview] Liquid Glass would make it compete with other elements and muddy the hierarchy. So keep it in the content layer instead." (219)
It is a light-bending meta-material, not a blur — its signature cue is lensing (it bends/concentrates light so content shows through while staying separated). It materializes in/out (modulating lensing), it doesn't fade. (219)
It is continuously adaptive: each layer adapts to what's behind it. Small chrome (nav/tab bars) flips light↔dark with the background; large elements (sidebars, menus) adapt tint but do not flip (flipping would distract). (219)
2. Hard don'ts (all Apple-stated, 219/323)
No glass on glass."Stacking Liquid Glass elements on top of each other can quickly make the interface feel cluttered… use fills, transparency, and vibrancy for the top elements." Also enforced technically: "Glass cannot sample other glass."
Don't overuse it."You may be tempted to use Liquid Glass everywhere but it is best reserved for the navigation layer."
Don't put color/tint on everything."When every element is tinted, nothing stands out… imbue color into your app… in the content layer instead." Tint only to convey meaning (one call-to-action / next step).
Don't let chrome intersect content at rest."In steady states… avoid intersections between content and Liquid Glass. Instead, reposition or scale the content to maintain separation."
Never mix the two variants (regular + clear) in one element.
Don't reintroduce redundant chrome once on glass: remove extra sheet backgrounds, darkening behind toolbar items, custom .presentationBackground.
3. Regular vs Clear
Regular — use ~always
Clear — specialized
Adaptive behaviors
Full
None (permanently more transparent)
Legibility
Guaranteed in any context
Needs a dimming layer beneath it
Where
Any size, over any content
Media-rich content only
Clear requires all three to be true (219): the element is over media-rich content, the content layer tolerates a dimming layer, and the content on top is bold/bright. SwiftUI: Glass.regular ✅; Glass.clear ⚠️ (community).
4. Accessibility — automatic, but verify the safety-critical surfaces
When you use the standard material, glass responds to system settings automatically (219):
Reduce Transparency → glass becomes frostier, obscures more behind it.
Increase Contrast → elements go predominantly black/white with a contrasting border.
For Greg specifically: keep safety-critical text in the solid content layer (allergy hard-stops, macro/calorie numbers) — never floating on clear glass. Test every glass screen with all three settings ON. Branch in code via the existing \.accessibilityReduceTransparency / \.accessibilityReduceMotion environment keys.
5. The floating tab bar + content flow (323)
Tab bar + toolbars float as glass chrome; content scrolls under, with the scroll edge effect handling the transition (no hard bar background).
Minimize on scroll ✅: .tabBarMinimizeBehavior(.onScrollDown) — re-expands on scroll up, keeps content the focus.