Individual skill

liquid-glass

Apple Liquid Glass design system. Use when building UI with translucent, depth-aware glass morphism following Apple's design language. Provides CSS tokens, component patterns, dark/light mode, and animation specs.

templates/skills/domains/frontend-design/liquid-glass/SKILL.md

Read pinned source

Source commit 2f12cc5f7862437e46ff498ad844ca62c65e77aa

What was checked

Matches the observed repository HEAD: Yes
Scanner rules are current: No
Repository scan complete: No
Skill scan complete: No
Observed behavior: Not checked yet
Last checked: Nov 4, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings): 5,978
Repository last updated: Nov 2, 2026
License: MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

claude-code Repository topic
codex Repository topic
gemini Repository topic
workflow Repository topic
agent-teams Repository topic
ai Repository topic
ccg Repository topic
cli Repository topic
llm Repository topic
no-de Repository topic
design Derived category
design-interface Derived category

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files

SKILL.mdcore · 3,754 bytes
references/tokens.cssasset · 2,130 bytes

Read excerpt


# Liquid Glass Design System

Apple-inspired translucent glass UI with depth, refraction, and ambient light response.

## Core Principles

1. **Translucency** — Surfaces reveal layered content beneath via backdrop blur
2. **Depth** — Elements float on distinct z-layers with realistic shadows
3. **Ambient Response** — Glass tints shift based on underlying content color
4. **Minimal Chrome** — Borders are subtle; shape and blur define boundaries
5. **Motion** — Transitions feel physical: spring-based, with inertia

## Usage