Apple Liquid Glass skill
An Apple-style web design skill: a light ground, one white panel instead of scattered cards, glass only where layers overlap.
- 288 ★ on the repository
- Last commit
Minimal access
Why this level
- The skill consists of markdown and CSS and executes nothing itself.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/apple-liquid-glassDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill consists of markdown and CSS and executes nothing itself.
This is third-party code. Review the repository files before installing.
What it does
The skill teaches an agent to build web interfaces close to apple.com and recent macOS: calm, light, with hierarchy from font weight and size. It is a set of markdown files with rules and CSS tokens, not a component library. The folder holds `SKILL.md` with the philosophy and workflow, `design-system.md` with color, type, spacing and shadows, `tokens.css`, component templates, page recipes, motion, an iOS screen layer and a done checklist. A review mode finds departures from the system in existing CSS and returns a fix list with line references.
Who it is for. Frontend developers and designers who want a calm premium interface without typical AI tells: rainbow gradients and blur everywhere.
Good fit when
- A landing page or account area is made in a calm light style, like Apple.
- A list of similar items is gathered into one white panel with hairline dividers.
- Existing CSS is checked for consistency: tokens, radii, shadows and glass.
- A mobile screen takes an iPhone shell with a title, tabs and a bottom sheet.
Not a fit when
- The brand demands vivid graphics and unusual grids: the skill rules are strict and restrained.
- A ready component library for React or Vue is needed: here there is only HTML, CSS and rules.
- The project builds a native SwiftUI app: the skill describes a web implementation.
Example request
Build an account and plans page in Apple style: one panel instead of cards, a single blue accent and glass only on the header.Limitations
Files target plain HTML and CSS: in React, Vue or Svelte the token values and rules are ported into your own styling system. The skill describes a visual language and ships no Apple assets; the project is not affiliated with or endorsed by Apple. Pick fonts, icons and texts by the licenses of your project. Icons come from Lucide (ISC), the motion layer is adapted from the Emil Kowalski skill (MIT). The repository license file is described as MIT, but GitHub detects it as NOASSERTION.
How to disable. Delete the `~/.claude/skills/apple-liquid-glass` folder. Pages and CSS already created stay in the project and are edited as ordinary code.
FAQ
When does the agent load the skill?
On phrases such as Apple style, liquid glass, make it look like apple.com, clean premium minimal UI, or a request for a tidy page that should feel Apple-grade.
Is React required?
No. The files are plain HTML and CSS. In React, Vue or Svelte keep the token values and the panel-over-cards rule.
What is review mode?
The agent reads your CSS, scores it against the system and returns a prioritized fix list with file and line references mapped to tokens.
Can I preview the result in advance?
Yes. `reference.html` opens in a browser as a living style guide, and `examples/` holds finished pages.
Where do icons and motion come from?
Icons come from Lucide (ISC license), and the motion layer is adapted from the Emil Kowalski skill (MIT).
Discussion
No questions or reviews yet.
Related
SkillsA skill for interfaces without the generic AI look: typography, color, motion, component states and a critique of the result.
Nothing Design
nothing-design
A skill for generating UI in the Nothing visual language: monochrome, Swiss typography, industrial rigor
A UI design skill: art direction per product, a shared DESIGN.md, tokens, and layout and accessibility checks in a browser.
A registry of installable design skills: ready SKILL.md and DESIGN.md files with tokens, component rules and accessibility for different styles
A skill that draws a UI component as an Apple-style sheet with spacing, radii and layers, plus a short film from it.
Two UI/UX skills teach an agent design decisions: track selection, tokens, component recipes and anti-slop guardrails.
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| Apple Liquid Glass (this card) | no | 288 | |
| Swiss Design Skill | no | 163 | sets a Swiss style on Tailwind with a 12-column grid; Apple Liquid Glass builds a light interface with panels and glass |
| Apple Skills | no | 359 | references for SwiftUI, UIKit and Liquid Glass in native development; here a web implementation of the Apple visual language |
README in short
Installation is a clone into the skills folder. The agent finds the skill by the description in `SKILL.md`, with no build or dependencies.