Skip to main content
liquid-glass-design iOS 26 Liquid Glass design system: dynamic glass material with blur, reflection, and interactive morphing for SwiftUI, UIKit, and WidgetKit. USE WHEN building iOS 26+ glass buttons, cards, or toolbars, creating morphing glass transitions, or migrating old blur/material effects to the Liquid Glass API.
インストールへ移動 Skills Marketplace コミュニティが作成したAIスキルを発見・探索
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/Sheshiyer/skill-clusters --skill liquid-glass-designコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Zipをダウンロード ダウンロード中... このリポジトリの他の Skills Arcplume runs Grok through the Grok Build CLI's own OAuth-authenticated session (grok login) for image generation, with strict preflight validation, secret-safe handling, and headless CLI-driven execution -- no separate XAI_API_KEY billing. Video falls back to the billed xAI API. USE WHEN a user wants to generate an image via a locally logged-in Grok Build CLI session, e.g. 'generate an image with grok', 'use grok build', or 'use my logged-in grok session'.
Shared reference for the Selemene cluster: the two report surfaces (deterministic Rust reports vs. narrative witness-pipeline readings), the @selemene/bridge CLI contract, the output manifest format, and non-prescriptive witnessing tone. USE WHEN deciding which Selemene surface to invoke or when routing between birth/compatibility/transit reports and solo/dyadic readings.
Route Selemene Engine tasks to the right surface: deterministic reports (birth/compatibility/transit) via selemene-core and the @selemene/bridge CLI, or narrative witness readings via selemene-report. USE WHEN the user wants anything under the Selemene/Noesis umbrella but has not named the exact surface.
name liquid-glass-design description iOS 26 Liquid Glass design system: dynamic glass material with blur, reflection, and interactive morphing for SwiftUI, UIKit, and WidgetKit. USE WHEN building iOS 26+ glass buttons, cards, or toolbars, creating morphing glass transitions, or migrating old blur/material effects to the Liquid Glass API. cluster native-ios version 1.0.0
Liquid Glass Design System (iOS 26)
Patterns for implementing Apple's Liquid Glass — a dynamic material that blurs content behind it, reflects color and light from surrounding content, and reacts to touch and pointer interactions. Covers SwiftUI, UIKit, and WidgetKit integration.
When to Activate
Building or updating apps for iOS 26+ with the new design language
Implementing glass-style buttons, cards, toolbars, or containers
Creating morphing transitions between glass elements
Applying Liquid Glass effects to widgets
Migrating existing blur/material effects to the new Liquid Glass API
Core Pattern — SwiftUI
Basic Glass Effect
The simplest way to add Liquid Glass to any view:
Text ("Hello, World!" )
.font(.title)
.padding()
.glassEffect()
Customizing Shape and Tint
Text
"Hello, World!"
16.0
Key customization options:
.regular — standard glass effect.tint(Color) — add color tint for prominence.interactive() — react to touch and pointer interactionsShape: .capsule (default), .rect(cornerRadius:), .circle
Glass Button Styles Button ("Click Me" ) { }
.buttonStyle(.glass)
Button ("Important" ) { }
.buttonStyle(.glassProminent)
GlassEffectContainer for Multiple Elements Always wrap multiple glass views in a container for performance and morphing:
GlassEffectContainer (spacing: 40.0 ) {
HStack (spacing: 40.0 ) {
Image (systemName: "scribble.variable" )
.frame(width: 80.0 , height: 80.0 )
.font(.system(size: 36 ))
.glassEffect()
Image (systemName: "eraser.fill" )
.frame(width: 80.0 , height: 80.0 )
.font(.system(size: 36 ))
.glassEffect()
}
}
The spacing parameter controls merge distance — closer elements blend their glass shapes together.
Uniting Glass Effects Combine multiple views into a single glass shape with glassEffectUnion:
@Namespace private var namespace
GlassEffectContainer (spacing: 20.0 ) {
HStack (spacing: 20.0 ) {
ForEach (symbolSet.indices, id: \.self ) { item in
Image (systemName: symbolSet[item])
.frame(width: 80.0 , height: 80.0 )
.glassEffect()
.glassEffectUnion(id: item < 2 ? "group1" : "group2" , namespace: namespace)
}
}
}
Morphing Transitions Create smooth morphing when glass elements appear/disappear:
@State private var isExpanded = false
@Namespace private var namespace
GlassEffectContainer (spacing: 40.0 ) {
HStack (spacing: 40.0 ) {
Image (systemName: "scribble.variable" )
.frame(width: 80.0 , height: 80.0 )
.glassEffect()
.glassEffectID("pencil" , in: namespace)
if isExpanded {
Image (systemName: "eraser.fill" )
.frame(width: 80.0 , height: 80.0 )
.glassEffect()
.glassEffectID("eraser" , in: namespace)
}
}
}
Button ("Toggle" ) {
withAnimation { isExpanded.toggle() }
}
.buttonStyle(.glass)
Extending Horizontal Scrolling Under Sidebar To allow horizontal scroll content to extend under a sidebar or inspector, ensure the ScrollView content reaches the leading/trailing edges of the container. The system automatically handles the under-sidebar scrolling behavior when the layout extends to the edges — no additional modifier is needed.
Core Pattern — UIKit
Basic UIGlassEffect let glassEffect = UIGlassEffect ()
glassEffect.tintColor = UIColor .systemBlue.withAlphaComponent(0.3 )
glassEffect.isInteractive = true
let visualEffectView = UIVisualEffectView (effect: glassEffect)
visualEffectView.translatesAutoresizingMaskIntoConstraints = false
visualEffectView.layer.cornerRadius = 20
visualEffectView.clipsToBounds = true
view.addSubview(visualEffectView)
NSLayoutConstraint .activate([
visualEffectView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
visualEffectView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
visualEffectView.widthAnchor.constraint(equalToConstant: 200 ),
visualEffectView.heightAnchor.constraint(equalToConstant: 120 )
])
let label = UILabel ()
label.text = "Liquid Glass"
label.translatesAutoresizingMaskIntoConstraints = false
visualEffectView.contentView.addSubview(label)
NSLayoutConstraint .activate([
label.centerXAnchor.constraint(equalTo: visualEffectView.contentView.centerXAnchor),
label.centerYAnchor.constraint(equalTo: visualEffectView.contentView.centerYAnchor)
])
UIGlassContainerEffect for Multiple Elements let containerEffect = UIGlassContainerEffect ()
containerEffect.spacing = 40.0
let containerView = UIVisualEffectView (effect: containerEffect)
let firstGlass = UIVisualEffectView (effect: UIGlassEffect ())
let secondGlass = UIVisualEffectView (effect: UIGlassEffect ())
containerView.contentView.addSubview(firstGlass)
containerView.contentView.addSubview(secondGlass)
Scroll Edge Effects scrollView.topEdgeEffect.style = .automatic
scrollView.bottomEdgeEffect.style = .hard
scrollView.leftEdgeEffect.isHidden = true
Toolbar Glass Integration let favoriteButton = UIBarButtonItem (image: UIImage (systemName: "heart" ), style: .plain, target: self , action: #selector (favoriteAction))
favoriteButton.hidesSharedBackground = true
Core Pattern — WidgetKit
Rendering Mode Detection struct MyWidgetView : View {
@Environment (\.widgetRenderingMode) var renderingMode
var body: some View {
if renderingMode == .accented {
} else {
}
}
}
Accent Groups for Visual Hierarchy HStack {
VStack (alignment: .leading) {
Text ("Title" )
.widgetAccentable()
Text ("Subtitle" )
}
Image (systemName: "star.fill" )
.widgetAccentable()
}
Image Rendering in Accented Mode Image ("myImage" )
.widgetAccentedRenderingMode(.monochrome)
Container Background VStack { }
.containerBackground(for: .widget) {
Color .blue.opacity(0.2 )
}
Key Design Decisions Decision Rationale GlassEffectContainer wrapping Performance optimization, enables morphing between glass elements spacing parameterControls merge distance — fine-tune how close elements must be to blend @Namespace + glassEffectIDEnables smooth morphing transitions on view hierarchy changes interactive() modifierExplicit opt-in for touch/pointer reactions — not all glass should respond UIGlassContainerEffect in UIKit Same container pattern as SwiftUI for consistency Accented rendering mode in widgets System applies tinted glass when user selects tinted Home Screen
Best Practices
Always use GlassEffectContainer when applying glass to multiple sibling views — it enables morphing and improves rendering performanceApply .glassEffect() after other appearance modifiers (frame, font, padding)Use .interactive() only on elements that respond to user interaction (buttons, toggleable items)Choose spacing carefully in containers to control when glass effects mergeUse withAnimation when changing view hierarchies to enable smooth morphing transitionsTest across appearances — light mode, dark mode, and accented/tinted modesEnsure accessibility contrast — text on glass must remain readable
Anti-Patterns to Avoid
Using multiple standalone .glassEffect() views without a GlassEffectContainer
Nesting too many glass effects — degrades performance and visual clarity
Applying glass to every view — reserve for interactive elements, toolbars, and cards
Forgetting clipsToBounds = true in UIKit when using corner radii
Ignoring accented rendering mode in widgets — breaks tinted Home Screen appearance
Using opaque backgrounds behind glass — defeats the translucency effect
When to Use
Navigation bars, toolbars, and tab bars with the new iOS 26 design
Floating action buttons and card-style containers
Interactive controls that need visual depth and touch feedback
Widgets that should integrate with the system's Liquid Glass appearance
Morphing transitions between related UI states
