liquid-glass
Implement Liquid Glass design using .glassEffect() API for iOS/macOS 26+. Covers SwiftUI, AppKit, UIKit, and WidgetKit. Use when creating modern glass-based UI effects.
npx skills add rshankras/claude-code-apple-skills --skill liquid-glass --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
Implements Apple's Liquid Glass design language across all Apple UI frameworks. Covers SwiftUI (.glassEffect()), AppKit (NSGlassEffectView), UIKit (UIGlassEffect + UIVisualEffectView), and WidgetKit (rendering modes, accented content, glass elements in widgets).
How it works
- Activates when the user wants glass/blur effects on views or asks about Liquid Glass or modern Apple design, or needs transparent, interactive UI elements, or morphing transitions between views.
- Provides SwiftUI usage including .glassEffect() with default shape, .glassEffect(in:), and various options like .regular, .tint(Color), and .interactive(). It also demonstrates composing multiple glass elements with GlassEffectContainer and merging with glassEffectUnion.
- Details AppKit usage via NSGlassEffectView, NSGlassEffectContainerView, and Interactive AppKit Glass with a subclass handling mouse tracking to adjust tint color on hover.
- Documents UIKit usage with UIGlassEffect and UIVisualEffectView, plus examples of content embedding and shape customization.
- Explains Glass Configuration Options and Morphing Transitions setup, including namespace-based IDs and glassEffectID for morphing.
- Includes advanced techniques for background extension, scroll edge behaviors, tab/bar interactions, and common patterns like Floating Action Bar and Glass Card.
When to use it
- When implementing glass effects in UIKit with UIVisualEffectView and UIGlassEffect
- When needing Liquid Glass in widgets with WidgetKit
- When desiring morphing transitions, interactive glass, and glass unions to blend multiple elements
- When building navigation-layer glass (bars, toolbars) rather than content-layer glass
What it can touch
- SwiftUI views via .glassEffect() modifiers and related options
- UIKit components via UIGlassEffect and UIVisualEffectView usage
- AppKit components via NSGlassEffectView and NSGlassEffectContainerView
- WidgetKit rendering modes and accented content in widgets
- GlassEffectContainer and glassEffectUnion to coordinate multiple glass elements
Caveats
- Design rules emphasize not layering glass on top of content and using glass only in navigation-related UI; ensure only one variant per view (Regular or Clear)
- Clear variant requires three conditions to be met: underlying content is media-rich, dimming is acceptable, and content above is bold/bright
- Glass cannot sample other glass elements; must be within a single container for proper blending
- Accessibility considerations noted: Reduced Motion and Increased Contrast affect rendering
# Liquid Glass Design Implement Apple's Liquid Glass design language across all Apple UI frameworks. Covers SwiftUI (`.glassEffect()`), AppKit (`NSGlassEffectView`), UIKit (`UIGlassEffect` + `UIVisualEffectView`), and WidgetKit (rendering modes, accented content, glass elements in widgets). ## When This Skill Activates - User wants glass/blur effects on views - User asks about Liquid Glass or modern Apple design - User needs transparent, interactive UI elements - User wants morphing transitions between views - User is implementing glass effects in UIKit with `UIVisualEffectView` - User needs `UIGlassEffect` or `UIGlassContainerEffect` - User asks about scroll view edge effects in UIKit - User wants Liquid Glass in widgets (WidgetKit) - User needs to support accented rendering mode in widgets - User asks about widget textures or mounting styles on visionOS ## Design Rules (WWDC25) Liquid Glass is the material of the **navigation layer** — bars, toolbars, floating controls — never the content layer (tables, lists, rows in a scroll view). | Rule | Detail | |------|--------| | **Never glass on glass** | Don't stack glass. Elements sitting ON glass don't get the material again — style t
- When This Skill Activates
- Design Rules (WWDC25)
- Quick Start (SwiftUI)
- Basic Glass Effect
- Custom Shape
- Interactive Glass
- Tinted Glass
- Glass Configuration Options
- Multiple Glass Effects
- GlassEffectContainer
- Uniting Glass Effects
- Morphing Transitions
- Setup
- Button Styles
What does the liquid-glass skill do?
Implement Liquid Glass design using .glassEffect() API for iOS/macOS 26+. Covers SwiftUI, AppKit, UIKit, and WidgetKit. Use when creating modern glass-based UI effects.
How do I install it?
Run `npx skills add rshankras/claude-code-apple-skills --skill liquid-glass --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From rshankras/claude-code-apple-skills, a repository with 589 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.