glass-dark-ui

Build dark-mode glassmorphism interfaces with readable contrast, frosted surfaces, and gradient borders using a pseudo-element mask. Use when asked for glass cards, frosted dark hero sections, blur panels, or dark UI systems with gradient/glow borders.

Quality

85%

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

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.

A concise, highly actionable skill body with executable CSS/Tailwind patterns and a clear sequenced workflow including a validation step. It avoids over-explanation and is well structured; minor gains are available from trimming the redundant requests list and adding an explicit validate-fix-retry loop.

Suggestions

Remove or condense the "Common Requests This Skill Should Handle" section since those triggers already appear in the description, freeing token budget.

Turn step 6 into an explicit feedback loop, e.g. "Validate contrast and mobile behavior; if any surface fails, adjust tokens/glow and re-validate before finalizing."

Consider splitting the full CSS token and pattern blocks into a references file linked from a shorter overview, since the body exceeds 50 lines.

Dimension	Reasoning	Score
Conciseness	The body is lean and does not explain concepts Claude already knows, but the "Common Requests This Skill Should Handle" section largely restates triggers already in the description and could be trimmed, matching anchor 4.	4 / 5
Actionability	Provides complete, copy-paste-ready CSS for tokens, glass panels, masked gradient borders, and a Tailwind usage example that cover the common cases, matching anchor 5.	5 / 5
Workflow Clarity	Six clearly sequenced steps include a validation checkpoint ("Validate contrast and mobile behavior before finalizing"), but there is no explicit error-recovery feedback loop, fitting anchor 4 rather than 5.	4 / 5
Progressive Disclosure	Well-organized with clear section headers and self-contained for a focused CSS skill, but at ~92 lines with all content inlined it slightly exceeds the under-50-line simple-skill threshold, so anchor 4 fits better than 5.	4 / 5
	Total	17 / 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 well-crafted description that explicitly answers both what the skill does and when to use it, with concrete trigger phrases and a distinct niche. Third-person voice is used correctly. Slightly below top marks on specificity only because it rests on a single verb with feature modifiers rather than enumerating multiple distinct actions.

Dimension	Reasoning	Score
Specificity	Names the domain and several concrete features ("readable contrast, frosted surfaces, and gradient borders using a pseudo-element mask"), but the action is essentially a single verb ("Build") with modifiers rather than multiple distinct actions, fitting the anchor 4 rather than 5.	4 / 5
Completeness	Clearly states what it does ("Build dark-mode glassmorphism interfaces with...") and explicitly when to use it with concrete trigger phrases, matching the anchor 5 example.	5 / 5
Trigger Term Quality	"Use when asked for glass cards, frosted dark hero sections, blur panels, or dark UI systems with gradient/glow borders" provides good coverage of natural phrases a user would say, with a few synonyms/variants missing, matching anchor 4.	4 / 5
Distinctiveness Conflict Risk	Targets a clear niche (dark-mode glassmorphism with masked gradient borders) with distinct, specific triggers and minimal overlap with other skills.	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: MengTo/Skills
Path: agent-skills/web-design/glass-dark-ui/SKILL.md
Commit: 4c716b5

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.