agentsclimarketplace
Sign in

Macos liquid glass designer

Skill Xopoko/plug-n-skills/plugins/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/plug-n-skills --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.

One thing to look at

  • 9 stars9 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

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,179 of the 2,086 authors here whose files we hold, read 2026-09-06

  • Commit to a bold aesthetic directionin 31 of 1179, across 24 files
  • Prefer component composition over inheritancein 28 of 1179, across 14 files
  • Animate only transform and opacity propertiesin 27 of 1179, across 22 files
  • Memoize expensive computations with useMemoin 26 of 1179, across 13 files
  • Use semantic HTML elementsin 24 of 1179, across 23 files
  • Virtualize long lists for performancein 21 of 1179, across 10 files
  • Use CSS variables for design tokensin 20 of 1179, across 14 files
  • Implement loading, empty, and error statesin 20 of 1179
  • Lazy load heavy components with Suspensein 19 of 1179, across 8 files
  • Respect prefers-reduced-motion media queriesin 18 of 1179, across 10 files
  • Prioritize CSS-only animations for HTMLin 18 of 1179, across 16 files
  • Use compound components for related UI elementsin 18 of 1179, across 7 files

Said here and by no other author read

  • Use standard app structure and system materials first
  • Remove custom opaque backgrounds and scrims
  • Update standard SwiftUI structure and controls first
  • Add glassEffect only when standard controls are insufficient
  • Use backgroundExtensionEffect for hero media
  • Keep inspectors lighter than content

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 325,949. 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.