agentsclimarketplace
Sign in

Macos liquid glass designer

Skill Xopoko/build-swift-apps/skills/macos-liquid-glass-designer

Implement, refactor, or review modern macOS SwiftUI Liquid Glass UI: NavigationSplitView, toolbars, search, sheets, controls, system materials, `glassEffect`, `GlassEffectContainer`, and `glassEffectID`.From its SKILL.md

Install
npx -y skills add Xopoko/build-swift-apps --skill macos-liquid-glass-designer

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

SKILL.md

3.1 KB, 590 tokens by cl100k_base, as published. Nobody here has run it

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

What ships with it: 1 file

357 B alongside SKILL.md

agents/

Gives 0 of the 12 instructions most design frontend skills give in 590 tokens

Counted across 1,169 of the 1,878 authors here whose files we hold, read 2026-08-07

  • Use CSS variables for color consistencyin 72 of 1169, across 23 files
  • Commit to one bold aesthetic direction before codingin 72 of 1169, across 27 files
  • Match implementation complexity to the aesthetic visionin 70 of 1169, across 20 files
  • Add atmospheric background effects and texturesin 57 of 1169, across 9 files
  • Use unexpected spatial compositions and layoutsin 56 of 1169, across 8 files
  • Implement real working codein 55 of 1169, across 7 files
  • Vary themes and aesthetics across different designsin 48 of 1169, across 7 files
  • Launch chromium in headless modein 47 of 1169, across 4 files
  • Close the browser when donein 47 of 1169, across 4 files
  • Run provided scripts with help flag firstin 47 of 1169, across 4 files
  • Wait for network idle statein 47 of 1169, across 4 files
  • Use descriptive selectors for elementsin 47 of 1169, across 4 files

Said here and by no other author read

  • Prefer NavigationSplitView
  • Let sidebars use system Liquid Glass material
  • Remove custom opaque backgrounds by default
  • Use backgroundExtensionEffect for hero media
  • Keep inspectors lighter than inspected content
  • Use glassEffectID with a local namespace

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.

Keep looking

Skills are one crate of 326,871. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.