← ClaudeAtlas

apple-designlisted

Apple's design system and the Liquid Glass material, applied to real interfaces — web (CSS/React) and native (SwiftUI). Use this skill whenever the user asks for an Apple-like, iOS-like, macOS-like, glassy, frosted, translucent, or "Liquid Glass" interface; whenever they mention Apple's Human Interface Guidelines, HIG, glassmorphism, or Apple's design language; and whenever they ask to design or build a store, storefront, product page, platform, dashboard, landing page, marketing site, or app UI and want it to feel like an Apple product. Also use it when building navigation chrome — toolbars, tab bars, sidebars, sheets, floating bars, command palettes — that should read as a distinct layer floating above content. Pairs with the frontend-design skill — that one sets brand character, while this one supplies the material system, shape geometry, hierarchy, motion, and accessibility.
ab12automation-ctrl/liquid-glass-skill · ★ 1 · Web & Frontend · score 62
Install: claude install-skill ab12automation-ctrl/liquid-glass-skill
# Apple design system — Liquid Glass Liquid Glass is Apple's 2025 material: a dynamic layer that bends and concentrates light rather than scattering it, so controls can float above content while staying legible. It is not a blur filter, and treating it as one is why most imitations look cheap. This skill carries the system behind it — the two-layer model, the shape geometry, the tinting rule, the motion character, and the accessibility fallbacks that Apple's OS provides for free and the web does not. ## How this composes with `frontend-design` Read `frontend-design` too when building anything substantial. The two skills do not compete, because they own different layers — and that split is the same one Apple's own system draws: | | Owns | Governed by | |---|---|---| | **Content layer** | The thing itself — photography, product shots, editorial type, palette, personality, the memorable moment | `frontend-design`. Be bold here. | | **Functional layer** | Navigation and controls floating above it — bars, sheets, sidebars, buttons, menus | This skill. Be disciplined here. | When the two seem to conflict — "use a distinctive display font" vs. "controls should recede" — apply the bold choice to content and the disciplined choice to chrome. A shop can have a gorgeous, opinionated product canvas and a quiet glass toolbar over it. That combination is the whole point; it is what makes Apple's own apps look like Apple rather than like each other. ## Workflow **1. Spec the layers f