Ios liquid glass designer
Skill Xopoko/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
npx -y skills add Xopoko/build-swift-apps --skill ios-liquid-glass-designerAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
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
GlassEffectContainerfor 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
glassEffectIDwith@Namespaceonly 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