← ClaudeAtlas

macos-liquid-glass-designerlisted

macOS SwiftUI Liquid Glass UI: modernize or review system materials, toolbars, search, controls, and custom glass; prefer native structure over hand-built chrome.
Xopoko/plug-n-skills · ★ 11 · Web & Frontend · score 77
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