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.

Quality

90%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Quality

Content

93%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A clean, actionable design-system skill body: lean prose, executable CSS patterns using real tokens, and a well-signaled one-level reference for token details. The only soft spot is workflow clarity, which is constrained by it being a reference skill rather than a multi-step process skill.

Dimension	Reasoning	Score
Conciseness	The body is lean and code-heavy — a token category table, copy-paste CSS component blocks, and tight prose — assuming Claude's competence without explaining basic CSS or backdrop-filter concepts, so every token earns its place.	5 / 5
Actionability	Provides fully executable, copy-paste-ready CSS for Glass Card, Toolbar, Button, and Modal/Overlay using real tokens verified in references/tokens.css, plus a concrete import directive; common component cases are covered.	5 / 5
Workflow Clarity	The single core action (import tokens, then apply component patterns) is unambiguous and the body is well-organized across sections, but it is a reference/patterns skill rather than a sequenced multi-step workflow, so it stops short of the explicit-checkpoint anchor.	4 / 5
Progressive Disclosure	SKILL.md acts as a clear overview with a one-level-deep, well-signaled reference ('All tokens are defined in references/tokens.css' and the @import line) to an actual bundle file, keeping bulk token definitions appropriately split out.	5 / 5
	Total	19 / 20 Passed

Description

87%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong, well-structured description that clearly states what the skill provides and when to use it, anchored to a distinctive Apple Liquid Glass niche. Trigger terms are good but could add common synonyms like 'glassmorphism' or 'frosted glass'.

Dimension	Reasoning	Score
Specificity	Lists several concrete capabilities — 'Provides CSS tokens, component patterns, dark/light mode, and animation specs' — but these are feature categories rather than fully enumerated actions, leaving minor coverage gaps versus the comprehensive anchor.	4 / 5
Completeness	Explicitly answers both what ('Apple Liquid Glass design system... Provides CSS tokens, component patterns, dark/light mode, and animation specs') and when ('Use when building UI with translucent, depth-aware glass morphism following Apple's design language') with a concrete trigger phrase.	5 / 5
Trigger Term Quality	Good natural keyword coverage with 'Liquid Glass', 'glass morphism', 'translucent', 'depth-aware', and 'Apple's design language', though common synonyms like 'glassmorphism', 'frosted glass', or 'blur effect' are absent.	4 / 5
Distinctiveness Conflict Risk	The Apple-specific 'Liquid Glass' niche with distinct triggers (translucent, depth-aware glass morphism following Apple's design language) makes conflict with other skills minimal.	5 / 5
	Total	18 / 20 Passed

Validation

100%

Warnings & errors only

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository: fengshao1227/ccg-workflow
Path: templates/skills/domains/frontend-design/liquid-glass/SKILL.md
Commit: f349e3d

Reviewed: 5 days ago

Table of Contents

Discovery Implementation Validation

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.