CtrlK
BlogDocsLog inGet started
Tessl Logo

cascade-layers

Use when reviewing a CSS architecture for specificity issues, setting up a design system, or migrating a large codebase from utility-first to a layered architecture.

60

Quality

70%

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 ./skills/cascade-layers/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

57%

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

A cleanly structured overview that uses progressive disclosure well by delegating detail to a single one-level reference, but the body itself re-explains familiar CSS problems, lacks executable code, and omits in-body validation steps.

Suggestions

Drop or trim the duplicated motivational intro paragraph (it is repeated in references/rule.md) and keep only the forward-pointing overview content in the body.

Add a minimal copy-paste-ready @layer declaration snippet to the Fix section so the body is actionable on its own, not just via the reference.

Bring the verification checklist (declare order before imports, confirm vendor wrapping, search for !important) up from references/rule.md into the body so the Check/Fix flow has an explicit validation checkpoint.

DimensionReasoningScore

Conciseness

The opening paragraph re-explains the !important/specificity 'arms race' — a concept Claude already knows — and that same paragraph is duplicated in references/rule.md, so it is mostly efficient but includes unnecessary explanation; it is not score 1 because the Quick Reference and Check/Fix/Explain/Code Review sections are lean.

2 / 3

Actionability

It names concrete specifics (layer set 'reset, base, components, utilities'; 'more than two class selectors' as a signal) but provides no executable code in the body and gives abstract direction like 'migrate existing styles into appropriate layers', with the actual syntax delegated to the reference — fitting 'some concrete guidance but incomplete'.

2 / 3

Workflow Clarity

The Check/Fix/Explain/Code Review structure gives a recognizable sequence, but there are no validation checkpoints or feedback loops in the body (verification lives in references/rule.md), matching 'steps listed but validation gaps'; it is not score 1 because the structure is clearly organized.

2 / 3

Progressive Disclosure

The body is a concise overview with well-organized sections and a clearly signaled one-level-deep pointer — 'For full implementation details, code examples, and framework-specific guidance, see references/rule.md' — and rule.md is self-contained with no further nested bundle references, matching the 'clear overview with well-signaled one-level-deep references' anchor.

3 / 3

Total

9

/

12

Passed

Description

82%

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 trigger description with concrete scenarios and natural keywords, but it leads entirely with 'Use when' and never explicitly states the skill's capability, capping completeness at 2.

Suggestions

Add an explicit capability statement before the trigger clause, e.g. 'Manage CSS cascade order with @layer to resolve specificity conflicts. Use when...' so the 'what' is stated as plainly as the 'when'.

Include the core technical term 'cascade layers' or '@layer' alongside 'layered architecture' so the description matches the phrasing users and the rule page itself use.

DimensionReasoningScore

Specificity

The description lists multiple concrete scenarios — 'reviewing a CSS architecture for specificity issues', 'setting up a design system', 'migrating a large codebase from utility-first to a layered architecture' — matching the 'lists multiple specific concrete actions' anchor rather than the single-domain score-2 anchor.

3 / 3

Completeness

The 'when' is explicit and strong ('Use when...'), but the 'what does this do' is never stated as a capability — it is only implied through the trigger verbs — so it falls short of the score-3 bar that requires both clearly and explicitly answered; it is not score 1 because the trigger guidance is present and prominent.

2 / 3

Trigger Term Quality

It uses natural terms a developer would say — 'CSS architecture', 'specificity issues', 'design system', 'utility-first', 'layered architecture' — giving good coverage of common phrasings rather than jargon-only or generic terms.

3 / 3

Distinctiveness Conflict Risk

The CSS cascade/specificity framing is a clear niche with distinct triggers unlikely to fire for unrelated skills, fitting the 'clear niche with distinct triggers' anchor; 'design system' is slightly broad but the combination is distinctive enough to stay at 3.

3 / 3

Total

11

/

12

Passed

Validation

93%

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

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

Total

15

/

16

Passed

Repository
thedaviddias/Front-End-Checklist
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.