liquid-glass

Implement and review macOS SwiftUI Liquid Glass UI design patterns.

Updated Jul 31, 2026
One-click install
npx skills add https://github.com/AarnavBaddam/skills --skill liquid-glass-aarnavbaddam
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: liquid-glass
Source: https://github.com/AarnavBaddam/skills/tree/main/liquid-glass
Command: npx skills add https://github.com/AarnavBaddam/skills --skill liquid-glass-aarnavbaddam

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Modernizing a macOS SwiftUI app to the Liquid Glass design system often leads to conflicting custom chrome, opaque backgrounds, and hand-built toolbars that fight system materials. This Skill guides adoption of system-provided glass so the UI stays coherent and native. ## Core Features & Use Cases - UI Audit and Cleanup: Identify and remove custom backgrounds, scrims, and fills that obscure system Liquid Glass in sidebars, toolbars, and sheets. - Standard Structure Guidance: Apply correct patterns for NavigationSplitView, TabView, searchable placement, toolbar grouping with ToolbarSpacer, and control sizing. - Custom Glass Surfaces: Add glassEffect, GlassEffectContainer grouping, and glassEffectID morphing transitions only where standard controls fall short. - Use Case: You have a macOS SwiftPM app with a custom-painted sidebar and toolbar. Use this Skill to strip the custom chrome, adopt system glass materials, and validate the result as a foreground .app bundle. ## Quick Start Use the liquid-glass skill to modernize my macOS SwiftUI app's toolbar and sidebar to use system Liquid Glass instead of custom backgrounds.

Frequently Asked Questions about liquid-glass

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I adopt Liquid Glass in a macOS SwiftUI app?

Start by updating standard structures like NavigationSplitView, TabView, toolbars, and controls, then remove custom backgrounds that fight system materials. Add custom glassEffect surfaces only for app-specific UI that standard controls do not cover.

How do I group custom glass elements in SwiftUI?

Wrap nearby custom glass elements in a single GlassEffectContainer so they can sample each other's glass and render consistent refraction. Use glassEffectID with a local @Namespace when elements should morph between collapsed and expanded states.

Where should I attach searchable in a NavigationSplitView?

Attach searchable to the NavigationSplitView itself when search applies across the whole split-view hierarchy, not to a single column. For a dedicated search tab in a multi-tab app, place searchable on the TabView and assign the search role to one tab.

Why does my SwiftPM GUI app not show Liquid Glass correctly?

A SwiftPM GUI app launched as a raw executable lacks foreground activation, which can make a design bug look like a rendering bug. Build and run it as a foreground .app bundle before judging Liquid Glass behavior.

When should I use custom glassEffect instead of standard SwiftUI controls?

Use custom glassEffect only for app-specific surfaces that standard controls do not cover. Prefer system glass and glass-prominent button styles for primary actions, and add tint only when color carries semantic meaning like status or a call to action.