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.

56

Quality

65%

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

65%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 well-structured overview that uses progressive disclosure correctly: lean sections plus one clearly signaled reference file holding the implementation detail. The weaknesses are in the body itself — no executable code or examples inline, and a verification phase that exists in the reference but is not surfaced in the Check/Fix/Explain/Code Review workflow.

Suggestions

Include one minimal executable snippet in the Fix section (e.g., the @layer reset, base, components, utilities; declaration) so the body is actionable even before opening the reference.

Add a Verify step to the workflow that surfaces the reference's verification checks (confirm declared layer order in DevTools, search for remaining !important declarations) after applying the fix.

Remove or compress the intro paragraph explaining specificity-conflict problems — it duplicates references/rule.md's "Why It Matters" section and covers knowledge Claude already has.

DimensionReasoningScore

Conciseness

The body is lean — short imperatives ("Declare your layer stack at the top of your main CSS file") and bullet lists — with one minor instance of over-explanation: the intro paragraph about specificity conflicts and "!important" arms races explains a concept Claude already knows and duplicates the "Why It Matters" section of references/rule.md verbatim. Trimming or deferring that paragraph would reach 5.

4 / 5

Actionability

Concrete, specific guidance exists — "Introduce @layer declarations for reset, base, components, and utilities" and review heuristics like "!important declarations, excessively specific selectors (more than two class selectors), and inline styles" — but the body contains no executable code or commands at all; every copy-paste-ready example (layer-stack declaration syntax, migration steps) is deferred to the reference file, leaving key implementation details out of the body.

3 / 5

Workflow Clarity

The Check → Fix → Explain → Code Review sections form a coherent, well-defined sequence with detection checkpoints in the Code Review section. However, there is no post-fix verification step in the body — the detailed Verification steps exist in references/rule.md (DevTools layer inspection, !important search) but are never surfaced or referenced from the workflow.

3 / 5

Progressive Disclosure

A concise under-50-line overview with well-organized sections and a single clearly signaled, one-level-deep reference — "For full implementation details, code examples, and framework-specific guidance, see references/rule.md" — and the referenced file exists and contains exactly that content. Content is appropriately split and navigation is trivial.

5 / 5

Total

15

/

20

Passed

Description

66%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-targeted, domain-specific trigger description with three concrete scenarios and natural user phrasing. Its main weakness is that it is purely a "Use when" clause — it never explicitly states the skill's own capabilities, which limits completeness.

Suggestions

Add an explicit capability statement before the trigger clause, e.g., "Introduces @layer declarations to manage CSS cascade order and eliminate specificity conflicts. Use when reviewing a CSS architecture..."

Include the skill's core technical keywords users naturally say — "@layer", "cascade layers", and "Tailwind" — to strengthen trigger-term coverage.

Narrow the "setting up a design system" trigger to something more specific to cascade layers (e.g., "structuring a layered design-system stylesheet") to reduce overlap with general design-system skills.

DimensionReasoningScore

Specificity

The description lists three concrete, distinct actions — "reviewing a CSS architecture for specificity issues", "setting up a design system", and "migrating a large codebase from utility-first to a layered architecture" — in a clearly named domain. It falls short of 5 because it never states what the skill itself does (e.g., introduce @layer declarations), only the triggering scenarios.

4 / 5

Completeness

The "when" is explicit and detailed ("Use when reviewing... setting up... or migrating..."), but the description is entirely a trigger statement: the "what" — what the skill actually does — is never explicitly stated, only weakly implied by the embedded verbs. This matches the anchor where the what is present but weak, and keeps it below 4.

3 / 5

Trigger Term Quality

Natural phrases users would say are present: "specificity issues", "design system", "utility-first", "layered architecture", "migrating a large codebase". Not 5 because the most direct keywords a user would mention — "@layer", "cascade layers", "Tailwind", "!important" — are missing.

4 / 5

Distinctiveness Conflict Risk

The CSS specificity/cascade-layer niche is well differentiated with distinct triggers, but "setting up a design system" is broad enough to overlap with general CSS-review or Tailwind-migration skills, so it is not a clear 5.

4 / 5

Total

15

/

20

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.

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