macOS Liquid Glass Designer

SkillSearch

macOS 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.

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

  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.
  • Prefer standard controls and system glass/prominent button styles before custom translucent buttons.
  • Use controlSize, buttonBorderShape, slider step/ticks/neutralValue, and Label before custom controls.
  • Use concentric rectangle/container corner configuration for custom shapes that must align with sheet/card/window corners.

Custom Glass

  • glassEffect defaults 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 glassEffectID with a local @Namespace for 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 .app bundle.

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