macOS Liquid Glass Designer
SkillSearchmacOS SwiftUI Liquid Glass UI: modernize or review system materials, toolbars, search, controls, and custom glass; prefer native structure over hand-built chrome.
Available today. Use it from your connected AI after setup.
No other account needed.
Connect ahel once, and every AI you use reads what you have installed.
Then ask your AI: use the macOS Liquid Glass Designer skill
What this skill tells your AI
The instructions your AI receives, as published by xopoko/build-swift-apps in skills/macos-liquid-glass-designer/SKILL.md and read by ahel’s review.
Modernize macOS SwiftUI UI by using standard app structure and system materials first; add custom glass only for app-specific surfaces.
Workflow
- Inspect the scene/root view and identify the pattern: split view, tab, sheet, toolbar, inspector, custom floating controls.
- Remove custom opaque backgrounds, scrims, and toolbar/sheet fills that fight system material unless intentionally required.
- Update standard SwiftUI structure and controls first.
- Add
glassEffectonly where standard controls do not cover the design. - Validate grouping, transitions, icon treatment, pointer/keyboard usability, and foreground activation. Use
macos-runtime-debuggerfor SwiftPM GUI apps.
Rules
- Prefer
NavigationSplitView; let sidebars use system Liquid Glass material. - Use
backgroundExtensionEffectfor hero/media that should extend beyond safe area near floating chrome. - Keep inspectors visually lighter than or equal to the content they inspect.
- Keep
TabViewfor persistent top-level sections; do not force iPhone tab/search patterns onto macOS. - Remove old
presentationBackgroundimitation layers when the system sheet material is enough. - Put hierarchy-wide search on
NavigationSplitView; usesearchToolbarBehaviorfor compact secondary search. - Assume toolbar items live on floating glass; use
ToolbarSpacer,sharedBackgroundVisibility, andbadgeinstead of custom chrome. - Tint icons/glass only for semantic meaning.
- Prefer standard controls and system glass/prominent button styles before custom translucent buttons.
- Use
controlSize,buttonBorderShape, sliderstep/ticks/neutralValue, andLabelbefore custom controls. - Use concentric rectangle/container corner configuration for custom shapes that must align with sheet/card/window corners.
Custom Glass
glassEffectdefaults to a capsule-like shape and vibrant text; pass an explicit shape when needed.- Use
.interactive()for custom controls/containers with interactive elements. - Put nearby custom glass in one
GlassEffectContainer; separate containers cannot sample each other correctly. - Use
glassEffectIDwith a local@Namespacefor collapsed/expanded morphing with stable identity.
Guardrails
- Do not rebuild sidebars, toolbars, sheets, or controls from scratch when SwiftUI APIs provide the behavior.
- Do not leave opaque backgrounds behind
NavigationSplitView, toolbars, or sheets by default. - Do not scatter related glass elements across containers.
- Do not tint for decoration alone.
- Do not review Liquid Glass behavior from a bare SwiftPM executable; launch a foreground
.appbundle.
Use macos-swiftui-architect for scene architecture, macos-view-architect for large-view structure, macos-appkit-bridge for AppKit-only behavior, and macos-runtime-debugger for launch/log verification.
Signals
- GitHub stars
- 45
- Forks
- 4
- Last commit
- Aug 2026
Advanced
- Catalog kind
- skill
- Gateway key
macos-liquid-glass-designer- Source
- github.com/xopoko/build-swift-apps