iOS Liquid Glass Designer

SkillDev tools

Implement, refactor, or review iOS 26+ SwiftUI Liquid Glass with native `glassEffect`, `GlassEffectContainer`, button styles, availability gates, and non-glass fallbacks.

Available today. Use it from your connected AI after setup.

Connect ahel once, and every AI you use reads what you have installed.

Then ask your AI: use the iOS Liquid Glass Designer skill

What this skill tells your AI

The instructions your AI receives, as published by xopoko/build-swift-apps in skills/ios-liquid-glass-designer/SKILL.md and read by ahel’s review.

Use native iOS 26+ Liquid Glass APIs first. Keep glass grouped, interactive only when appropriate, performance aware, and backed by non-glass fallback UI.

Paths

  • Review: inspect where glass belongs, modifier order, shape consistency, GlassEffectContainer, availability, and fallback.
  • Improve: target surfaces/chips/buttons/cards, group multiple glass elements, and make only tappable/focusable elements interactive.
  • New feature: design shapes/prominence/grouping first, apply glass after layout/appearance modifiers, and add morphing only for animated hierarchy changes.

Rules

  • Prefer native APIs over custom blurs.
  • Use GlassEffectContainer for multiple glass views.
  • Apply .glassEffect(...) after layout and visual modifiers.
  • Use .interactive() only for interactive elements.
  • Keep related shapes, tinting, spacing, and prominence consistent.
  • Gate with #available(iOS 26, *) and provide a fallback.
  • Use .buttonStyle(.glass) or .buttonStyle(.glassProminent) for actions.
  • Use glassEffectID with @Namespace only for morphing transitions.

Snippets

if #available(iOS 26, *) {
    Text("Hello")
        .padding()
        .glassEffect(.regular.interactive(), in: .rect(cornerRadius: 16))
} else {
    Text("Hello")
        .padding()
        .background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 16))
}
GlassEffectContainer(spacing: 24) {
    HStack(spacing: 24) {
        Image(systemName: "scribble.variable")
            .frame(width: 72, height: 72)
            .glassEffect()
        Image(systemName: "eraser.fill")
            .frame(width: 72, height: 72)
            .glassEffect()
    }
}
Button("Confirm") { }
    .buttonStyle(.glassProminent)

Resources

Read references/liquid-glass.md for details. Use current Apple docs when API details may have changed.

Signals

GitHub stars
45
Forks
4
Last commit
Aug 2026
Advanced
Catalog kind
skill
Gateway key
ios-liquid-glass-designer
Source
github.com/xopoko/build-swift-apps