Ios liquid glass designer

Skill Xopoko/plug-n-skills/plugins/build-swift-apps/skills/ios-liquid-glass-designer

Implement, refactor, or review iOS 26+ SwiftUI Liquid Glass features using native `glassEffect`, `GlassEffectContainer`, glass button styles, availability gates, and fallbacks.From its SKILL.md

Install

npx -y skills add Xopoko/plug-n-skills --skill ios-liquid-glass-designer

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

9 stars9 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

2.1 KB, 446 tokens by cl100k_base, as published. Nobody here has run it

iOS Liquid Glass Designer

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.

What ships with it: 2 files

8.2 KB alongside SKILL.md

agents/

openai.yaml231 B

references/

liquid-glass.md8.0 KB