CtrlK
BlogDocsLog inGet started
Tessl Logo

dark-mode-css

Use when reviewing stylesheets, component styles, and responsive behavior related to Support dark mode with prefers-color-scheme. Check the rendered layout across breakpoints and interaction states before proposing a fix.

52

Quality

58%

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/dark-mode-css/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

53%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 skill body is a clean, well-sectioned overview that correctly defers implementation detail to a real one-level-deep reference file, and it names the key techniques precisely. However, it contains no executable code inline, its fix workflow's verification steps are hidden in the reference, and its opening paragraph duplicates reference content instead of earning its tokens.

Suggestions

Delete the opening "More than half of users prefer dark mode..." paragraph (or reduce it to one line) — it is background Claude already knows and is duplicated verbatim in references/rule.md.

Inline a minimal copy-paste-ready snippet in the Fix section (the :root custom properties plus the prefers-color-scheme: dark override) so the body is actionable without opening the reference.

Make the review-then-fix sequence explicit (e.g., "1. Check for prefers-color-scheme/data-theme usage and hard-coded colors → 2. Fix via custom properties → 3. Verify rendered layout at affected breakpoints") and surface the reference's verification checklist in the body's workflow.

DimensionReasoningScore

Conciseness

The opening paragraph ("More than half of users prefer dark mode for reduced eye strain... clean, maintainable addition rather than a disruptive refactor") is motivational background Claude already knows, and it is duplicated verbatim in references/rule.md's "Why It Matters" section. The rest (Quick Reference, Check, Fix, Explain, Code Review) is reasonably tight. Not score 2 because padding is confined to one paragraph; not score 4 because that paragraph plus the generic "Explain" section are tokens that could be trimmed or moved to the reference.

3 / 5

Actionability

The body gives technique-level specifics ("@media (prefers-color-scheme: dark)", "CSS custom properties on :root", "localStorage and setting a data-theme attribute", "WCAG contrast ratios") but contains no code at all — every executable example lives in references/rule.md. This matches anchor 3 ("Some concrete guidance but incomplete... missing key details") better than 4 ("concrete code or commands with minor gaps"), since a reader of the body alone cannot execute the fix without opening the reference.

3 / 5

Workflow Clarity

The Check → Fix → Explain → Code Review sections imply a review-then-fix sequence, but the order is implicit rather than stated, and validation checkpoints (the Verification steps exist only in references/rule.md) are not surfaced in the body. This fits anchor 3 ("Steps listed but validation gaps; sequence present but checkpoints missing or implicit"). Not score 2 because the sections do map to a coherent process; not score 4 because no explicit checkpoint or ordering statement is written.

3 / 5

Progressive Disclosure

The body is a short overview with well-labeled sections and a clearly signaled one-level-deep pointer: "see `references/rule.md`" (which exists and holds the full code examples, toggle, and verification details). This matches anchor 4 ("Good structure; most content is appropriately placed... minor organization gaps") rather than 5 because the "why it matters" paragraph is duplicated verbatim between the body and the reference rather than cleanly split, leaving a minor placement gap.

4 / 5

Total

13

/

20

Passed

Description

62%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 has an explicit "Use when..." trigger and stays within a recognizable dark-mode CSS niche, but a broken template substitution ("related to Support dark mode with prefers-color-scheme") makes the capability statement read awkwardly and undersell what the skill does. Keyword coverage is decent but misses common synonyms like "dark theme" or "night mode".

Suggestions

Rewrite the garbled phrase into a natural capability statement, e.g. "Reviews CSS for dark mode support via prefers-color-scheme: defines light/dark color tokens, adds a manual theme toggle, and verifies rendered layout across breakpoints before proposing a fix."

Add natural trigger synonyms users would actually say, such as "dark theme", "night mode", "light/dark color scheme", or "theme toggle", to the when-clause.

Lead with the distinctive capability (dark mode / prefers-color-scheme) instead of the broad "reviewing stylesheets, component styles, and responsive behavior" opening, so the niche is clear from the first words.

DimensionReasoningScore

Specificity

The description names the domain ("stylesheets, component styles, and responsive behavior related to... dark mode with prefers-color-scheme") and 1-2 actions ("reviewing", "Check the rendered layout across breakpoints and interaction states before proposing a fix"), but the actions are generic review verbs rather than domain-specific capabilities like "redefine CSS custom properties in a media query". The garbled template phrase "related to Support dark mode with prefers-color-scheme" further blurs what the skill actually does (review vs. implement). It is not score 2 because concrete actions and a specific domain are both present; not score 4 because the actions are not distinct or comprehensive for this niche.

3 / 5

Completeness

Both parts are explicitly present: the when via "Use when reviewing stylesheets, component styles, and responsive behavior related to..." and the what via "Check the rendered layout across breakpoints and interaction states before proposing a fix". It is not score 5 because the "what" is muddled by the ungrammatical rule-title insertion and describes only review/checking rather than the skill's implementation capability; not score 3 because a clear "Use when..." trigger clause exists.

4 / 5

Trigger Term Quality

Relevant natural keywords are present ("dark mode", "prefers-color-scheme", "stylesheets", "component styles", "responsive behavior", "breakpoints"), but common variations users would say are missing: "dark theme", "night mode", "light mode", "theme toggle", "CSS variables/custom properties". This matches anchor 3 ("Some relevant keywords but missing common variations or synonyms") rather than 4, since several natural terms a user would phrase a request with are absent.

3 / 5

Distinctiveness Conflict Risk

"prefers-color-scheme" and "dark mode" carve out a clear niche that is unlikely to trigger a general CSS or accessibility skill incorrectly. Minor overlap risk remains with a generic "review CSS/responsive behavior" skill since the dark-mode qualifier is buried mid-sentence. Not score 5 because the leading phrase "reviewing stylesheets, component styles, and responsive behavior" is broad before the dark-mode narrowing arrives.

4 / 5

Total

14

/

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.