CtrlK
BlogDocsLog inGet started
Tessl Logo

dark-glass-clean-layout

Create a dark glass layout system with frosted premium shells, clean multi-column workspace structure, floating data cards, and restrained atmospheric depth.

48

Quality

51%

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

Fix and improve this skill with Tessl

tessl review fix ./agent-skills/web-design/dark-glass-clean-layout/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

47%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-sectioned, appropriately scoped design-direction document with a strong 'Avoid' list and tuning knobs, but it has an empty Workflow section, no concrete measurable specs (colors, blur values, spacing), and notable redundancy across sections. As an instruction-only skill it is usable but leaves too much to interpretation to be fully actionable.

Suggestions

Fill the empty '## Workflow' section with an explicit build sequence, e.g., 1. atmospheric background → 2. framing rails/corner marks → 3. navigation pill → 4. column shells → 5. floating cards → 6. motion polish, with a final check against the Avoid list.

Add concrete reference values — a starter palette (near-black base, zinc/charcoal surface rgba values), backdrop-blur radii, border-gradient snippet — so the direction is executable rather than interpretive.

Merge the redundant 'Use When' section into 'Scope' and fold 'Recommended patterns' into 'Implementation guidance' to remove repetition and the empty section header.

DimensionReasoningScore

Conciseness

The body is organized and assumes design competence, but it is noticeably repetitive: 'Use When' duplicates the description verbatim, 'Recommended patterns' restate 'Implementation guidance' items, and the restraint/monochrome/avoid-clutter point appears in at least four sections. It fits anchor 3 (mostly efficient but could be tightened) rather than 4, since multiple sections could be merged without losing information.

3 / 5

Actionability

Concrete structural guidance exists ('left navigation, central hero or visualization stage, and right operational sidebar... then stack cleanly on smaller screens', 'one-pixel gradient wrappers', 'pill-shaped top navigation'), but there are no executable specifics — no sample hex/rgba values, blur radii, spacing scale, or code/CSS snippets. For an instruction-only skill this lands at anchor 3: some concrete guidance but incomplete, not 4, because a model must invent all measurable values.

3 / 5

Workflow Clarity

The '## Workflow' section is literally empty, and the remaining sections are organized by topic, not by sequence — there is no build order (e.g., base atmosphere → framing → shells → cards → motion → tuning). This matches anchor 2 (rough hints present but steps poorly defined); it is not 1 because 'Visual target', 'Implementation guidance', and 'Recommended patterns' together imply a rough progression, but no explicit sequence exists to justify 3.

2 / 5

Progressive Disclosure

The ~50-line body is appropriately self-contained with clear section headers (Use When, Scope, Visual target, Implementation guidance, Recommended patterns, Tuning knobs, Avoid) and no bundle files or nested references are needed. It scores 4 rather than 5 due to a minor organization gap — the empty '## Workflow' header and the redundant 'Use When' section are structural defects in an otherwise well-signaled document.

4 / 5

Total

12

/

20

Passed

Description

55%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 communicates a clear and reasonably specific visual design niche, but it omits any 'when to use' trigger guidance, which caps both completeness and practical utility. It also misses the most natural user vocabulary (e.g., 'glassmorphism', 'dark dashboard'). Adding an explicit trigger clause with common synonyms would move it to the 4–5 range.

Suggestions

Append a trigger clause such as: 'Use when the user asks for a dark glassmorphism layout, dark premium dashboard, frosted-glass UI, or intelligence-console style interface.'

Include natural synonyms users actually say — 'glassmorphism', 'frosted glass', 'dark dashboard' — rather than only novel coinages like 'atmospheric depth'.

State the deliverable medium explicitly (HTML/CSS page, component library, or full design system) so the 'what' is unambiguous.

DimensionReasoningScore

Specificity

The description names the domain and several concrete deliverable elements — 'frosted premium shells', 'clean multi-column workspace structure', 'floating data cards', 'restrained atmospheric depth' — giving it specific, scoped capability language. It stays at 4 rather than 5 because the only verb is 'Create'; the enumerated items are visual components rather than multiple distinct actions with comprehensive coverage.

4 / 5

Completeness

The 'what' is clear ('Create a dark glass layout system with...') but there is no 'Use when...' clause or any equivalent trigger guidance, capping completeness at 3 per the judging guidelines. It cannot score 4 because 'when' is not merely implicit — it is entirely absent from the description.

3 / 5

Trigger Term Quality

Terms like 'dark glass layout', 'frosted', and 'multi-column workspace' are relevant, but common natural phrasases users would say — 'glassmorphism', 'frosted glass', 'dark dashboard', 'dark UI/theme' — are absent. It matches anchor 3 (relevant keywords but missing common variations and synonyms), not 4, because the coverage lacks the everyday synonyms a user would most likely use.

3 / 5

Distinctiveness Conflict Risk

The niche is somewhat specific ('dark glass', 'frosted shells', 'multi-column workspace'), but without trigger phrases it could overlap with other dark-theme or glassmorphism design skills. It is not score 4 because sibling design/aesthetic skills would plausibly fire on the same requests.

3 / 5

Total

13

/

20

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.

Validation — 16 / 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.