CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

80

Quality

100%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

100%

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

A tight, self-contained styling skill with executable code, a sequenced workflow that includes validation, and well-organized sections. It adds value beyond what Claude already knows without redundant explanation.

DimensionReasoningScore

Conciseness

The body is lean and assumes competence — it does not re-explain backdrop-filter, mask-composite, or basic CSS, and every section (tokens, panel, border, Tailwind, checklist) earns its place.

3 / 3

Actionability

Provides fully executable, copy-paste-ready CSS for tokens, .glass-panel, and .border-gradient::before, plus a complete Tailwind HTML snippet and concrete numeric guidance (e.g. 'at least #cbd5e1', '--glass-fill-strong').

3 / 3

Workflow Clarity

A clear six-step sequence ends with an explicit validation checkpoint ('Validate contrast and mobile behavior before finalizing'), reinforced by the Dark Mode Checklist that supplies concrete validation criteria.

3 / 3

Progressive Disclosure

No bundle files exist or are needed for a self-contained CSS recipe; content is organized into well-delineated sections with clear headers, satisfying the simple-skill allowance for scoring 3 without external references.

3 / 3

Total

12

/

12

Passed

Description

100%

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 concise, well-constructed description that names concrete capabilities and provides explicit natural-language triggers covering what and when. It is distinct from neighboring UI skills and free of vague fluff.

DimensionReasoningScore

Specificity

Lists multiple concrete actions — 'readable contrast, frosted surfaces, and gradient borders using a pseudo-element mask' — going beyond naming the domain to specifying distinct capabilities.

3 / 3

Completeness

Explicitly answers both what ('Build dark-mode glassmorphism interfaces...') and when ('Use when asked for...') with explicit triggers, satisfying the top anchor.

3 / 3

Trigger Term Quality

The 'Use when asked for glass cards, frosted dark hero sections, blur panels, or dark UI systems with gradient/glow borders' clause gives good coverage of natural terms users would actually say.

3 / 3

Distinctiveness Conflict Risk

The dark-mode glassmorphism niche with gradient/glow-border triggers is clearly scoped and unlikely to fire for unrelated skills.

3 / 3

Total

12

/

12

Passed

Validation

100%

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

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
MengTo/Skills
Reviewed

Table of Contents

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.