glassmorphism

Glassmorphism design system skill. Use when building frosted-glass UI components with blur, transparency, and layered depth effects.

Quality

78%

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

Fix and improve this skill with Tessl

tessl review fix ./templates/skills/domains/frontend-design/glassmorphism/SKILL.md

Quality

Content

82%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.

The body is a well-structured, highly actionable glassmorphism spec with executable CSS and a properly referenced tokens file. Its main weaknesses are a duplicated code block and version-number staleness risk in the compatibility table.

Suggestions

Remove the duplicate .glass-card block (keep it in one section and reference it from the other) to tighten conciseness.

Move version-specific browser numbers into a clearly marked 'compatibility / fallbacks' note or a separate reference file to reduce time-sensitivity in the main body.

Dimension	Reasoning	Score
Conciseness	Lean and assumes competence, but the .glass-card block is duplicated across the 'CSS Tokens' and 'Card' sections, and the browser-compat table embeds time-sensitive version numbers (Chrome 76+, Firefox 103+) outside a deprecated section, which the guidelines penalize.	4 / 5
Actionability	Fully executable, copy-paste-ready CSS for card, navbar, modal, and button components, plus @supports fallback and prefers-* media queries, all backed by real tokens defined in references/tokens.css.	5 / 5
Workflow Clarity	Single-purpose reference skill with a clearly unambiguous action and well-organized sections; no multi-step sequence or validation checkpoints exist to evaluate, and at ~130 lines the strict under-50-line 5-exception does not cleanly apply.	4 / 5
Progressive Disclosure	references/tokens.css is real, clearly signaled, and one level deep, with good section structure; the inline component-example blocks are reasonable for a spec but keep it just short of the ideal split in anchor 5.	4 / 5
	Total	17 / 20 Passed

Description

73%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.

The description is concise, uses third person, and includes an explicit 'Use when' trigger tied to a distinctive niche. It is strong on distinctiveness and trigger quality but slightly thin on enumerated concrete actions and a fuller 'what' statement.

Suggestions

Expand the 'what' with 1-2 more concrete actions (e.g., 'styles cards, navbars, modals, and buttons with frosted-glass tokens') to lift specificity toward anchor 4-5.

Add a couple of natural synonyms or related trigger phrases (e.g., 'frosted glass', 'glassmorphic UI') to broaden trigger-term coverage.

Dimension	Reasoning	Score
Specificity	Names the domain ('Glassmorphism design system') and one concrete action ('building frosted-glass UI components with blur, transparency, and layered depth effects'), matching the anchor for 1-2 concrete actions without listing several distinct actions.	3 / 5
Completeness	Has an explicit 'Use when…' clause and a serviceable 'what' ('Glassmorphism design system skill'), but the 'what' is terse and the trigger phrases are not as comprehensive as the anchor 5 example.	4 / 5
Trigger Term Quality	Includes natural terms users would say — 'glassmorphism', 'frosted-glass', 'blur', 'transparency', 'layered depth' — giving good keyword coverage, though not exhaustive of synonyms.	4 / 5
Distinctiveness Conflict Risk	Targets a clear niche (frosted-glass UI with blur, transparency, layered depth) with distinct triggers and minimal overlap risk with other skills.	5 / 5
	Total	16 / 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/glassmorphism/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.