Implement, review, or improve SwiftUI features using the iOS 26+ Liquid Glass API. Use when asked to adopt Liquid Glass in SwiftUI UI, refactor to Liquid Glass, or review Liquid Glass usage.
From ios-swift-skillsnpx claudepluginhub patrickserrano/skillsThis skill uses the workspace's default tool permissions.
Liquid Glass is a dynamic material in iOS 26+ that combines optical glass properties with fluidity. It blurs content, reflects surrounding color and light, and reacts to touch interactions in real time.
GlassEffectContainer for multiple glass elementsGlassEffectContainer when multiple glass elements coexist.glassEffect(...) after layout and visual modifiers.interactive() for elements that respond to touch/pointer#available(iOS 26, *) and provide non-glass fallback#available(iOS 26, *) present with fallback UIGlassEffectContainerglassEffect applied after layout/appearance modifiersinteractive() only where user interaction existsglassEffectID used with @Namespace for morphingGlassEffectContainer with spacing.glassEffect(.regular.tint(...).interactive(), in: .rect(cornerRadius: ...)) as needed.buttonStyle(.glass) / .buttonStyle(.glassProminent) for actionsglassEffectID when hierarchy changesif #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)
.font(.system(size: 32))
.glassEffect()
Image(systemName: "eraser.fill")
.frame(width: 72, height: 72)
.font(.system(size: 32))
.glassEffect()
}
}
Button("Confirm") { }
.buttonStyle(.glassProminent)
Button("Cancel") { }
.buttonStyle(.glass)
@State private var isExpanded = false
@Namespace private var namespace
GlassEffectContainer(spacing: 40) {
HStack(spacing: 40) {
Image(systemName: "pencil")
.frame(width: 80, height: 80)
.glassEffect()
.glassEffectID("pencil", in: namespace)
if isExpanded {
Image(systemName: "eraser")
.frame(width: 80, height: 80)
.glassEffect()
.glassEffectID("eraser", in: namespace)
}
}
}
Button("Toggle") {
withAnimation {
isExpanded.toggle()
}
}
.buttonStyle(.glass)
Text("Tinted Glass")
.padding()
.glassEffect(.regular.tint(.orange).interactive(), in: .capsule)
@Namespace private var namespace
GlassEffectContainer(spacing: 20) {
HStack(spacing: 20) {
ForEach(items.indices, id: \.self) { index in
ItemView(item: items[index])
.glassEffect()
.glassEffectUnion(id: index < 2 ? "group1" : "group2", namespace: namespace)
}
}
}
.capsule (default).rect(cornerRadius: CGFloat).circleGlassEffectContainer for multiple glass views.glassEffect() after appearance modifiers.interactive() only to touchable elements