SwiftUI Liquid Glass

Adopt iOS 26's Liquid Glass material in SwiftUI the right way — applying .glassEffect, grouping shapes in a GlassEffectContainer for morph transitions, tinting and interactivity, and repairing custom UIs that broke when the system controls re-rendered under the new design language. Built for iOS developers shipping apps on the iOS 26 / Xcode 26 SDK who want their hand-built surfaces to feel native rather than fighting the new toolbar and navigation chrome.

When to use it

• You bumped your deployment target to iOS 26 and your custom bottom bar, floating buttons, or HUD now look mismatched against the new glass toolbars.
• You want a custom panel, badge, or control cluster to read as Liquid Glass instead of an opaque .regularMaterial card.
• Several glass elements sit near each other and you want them to blend, separate, and morph as they move or appear.
• Buttons, search fields, or tab bars lost their expected look after recompiling on the new SDK.

What it does

The skill applies the real iOS 26 APIs in the right combinations:

• .glassEffect(_:in:) with Glass.regular and Glass.clear, plus .tint(_:) and .interactive() modifiers on the Glass value for colored, touch-reactive surfaces.
• GlassEffectContainer { … } to batch nearby glass shapes so they sample one another and render efficiently, with .glassEffectID(_:in:) and a @Namespace to drive morph transitions between states.
• .glassEffectUnion(id:namespace:) to fuse multiple shapes into a single contiguous glass blob.
• Control-level adoption: .buttonStyle(.glass) and .glassProminent, plus guidance on letting toolbar, TabView, and navigation bars adopt glass automatically rather than overriding them.
• Edge treatment with the scroll edge effect and .backgroundExtensionEffect() so content flows correctly under the new chrome.

Usage

curl -fsSL --create-dirs -o ~/.claude/skills/swiftui-liquid-glass-design/SKILL.md https://claudeskil.com/skills/swiftui-liquid-glass-design/SKILL.md

@Namespace private var glassNS

GlassEffectContainer(spacing: 16) {
    HStack(spacing: 16) {
        Image(systemName: "wand.and.stars")
            .frame(width: 56, height: 56)
            .glassEffect(.regular.tint(.purple).interactive(),
                         in: .circle)
            .glassEffectID("wand", in: glassNS)

        Image(systemName: "slider.horizontal.3")
            .frame(width: 56, height: 56)
            .glassEffect(.regular, in: .circle)
            .glassEffectID("tune", in: glassNS)
    }
}

Tips & gotchas

• Always wrap multiple glass shapes in a GlassEffectContainer. Standalone .glassEffect calls won't sample neighbors, so they can't blend or morph and cost more to render.
• Glass.clear is for use over rich, high-contrast imagery; on plain backgrounds it reads as nearly invisible — reach for .regular by default.
• Use tint sparingly. Liquid Glass derives most of its color from what's behind it; heavy tints flatten the effect.
• Don't reimplement toolbars or tab bars to "match" — remove your custom chrome and let the system adopt glass, then style only what remains.

FAQ

Does this work below iOS 26? No. glassEffect and GlassEffectContainer are iOS 26 APIs. Gate adoption with if #available(iOS 26, *) and keep a material-based fallback for older OS versions.

Why did my buttons change after rebuilding? Recompiling against the iOS 26 SDK opts standard controls into Liquid Glass automatically. The skill helps you decide where to accept that and where to pin an explicit style.

Can I morph between two layouts? Yes — give matched shapes the same glassEffectID in a shared namespace and animate the state change; the container interpolates the glass between them.