← ClaudeAtlas

macos-liquid-glass-designerlisted

Implement, refactor, or review modern macOS SwiftUI Liquid Glass UI: NavigationSplitView, toolbars, search, sheets, controls, system materials, `glassEffect`, `GlassEffectContainer`, and `glassEffectID`.
Xopoko/plug-n-skills · ★ 3 · Web & Frontend · score 76
Install: claude install-skill Xopoko/plug-n-skills
# macOS Liquid Glass Designer Modernize macOS SwiftUI UI by using standard app structure and system materials first; add custom glass only for app-specific surfaces. ## Workflow 1. Inspect the scene/root view and identify the pattern: split view, tab, sheet, toolbar, inspector, custom floating controls. 2. Remove custom opaque backgrounds, scrims, and toolbar/sheet fills that fight system material unless intentionally required. 3. Update standard SwiftUI structure and controls first. 4. Add `glassEffect` only where standard controls do not cover the design. 5. Validate grouping, transitions, icon treatment, pointer/keyboard usability, and foreground activation. Use `macos-runtime-debugger` for SwiftPM GUI apps. ## Rules - Prefer `NavigationSplitView`; let sidebars use system Liquid Glass material. - Use `backgroundExtensionEffect` for hero/media that should extend beyond safe area near floating chrome. - Keep inspectors visually lighter than or equal to the content they inspect. - Keep `TabView` for persistent top-level sections; do not force iPhone tab/search patterns onto macOS. - Remove old `presentationBackground` imitation layers when the system sheet material is enough. - Put hierarchy-wide search on `NavigationSplitView`; use `searchToolbarBehavior` for compact secondary search. - Assume toolbar items live on floating glass; use `ToolbarSpacer`, `sharedBackgroundVisibility`, and `badge` instead of custom chrome. - Tint icons/glass only for semantic meaning. - Pref