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.

58

Quality

67%

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

57%

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

The body is well-structured with proper progressive disclosure to a real reference file, but it carries some conceptual padding and offers only moderately actionable, checkpoint-free guidance for what is partly a destructive-adjacent styling change.

Suggestions

Trim or remove the opening paragraph about user preference and eye strain, which restates general knowledge Claude already has.

Add at least one concrete, copy-paste CSS example (custom properties redefined in a prefers-color-scheme: dark block) directly in the body instead of relying solely on the reference.

Insert an explicit validation step such as 'Verify WCAG contrast ratios for dark-mode token pairs before proposing the fix' to give the workflow a real checkpoint.

DimensionReasoningScore

Conciseness

Mostly efficient with a lean Quick Reference, but the opening paragraph on user preference and eye strain explains context Claude largely already knows, and the Check/Fix/Explain/Code Review sections repeat similar phrasing — so it earns 'mostly efficient but could be tightened' rather than fully lean.

2 / 3

Actionability

Gives a concrete technique ('extracting colors to CSS custom properties and redefining them inside a prefers-color-scheme: dark media query') but no executable selectors or examples in the body — concrete guidance is incomplete and deferred to references/rule.md.

2 / 3

Workflow Clarity

The Check/Fix/Explain/Code Review sections give direction for a simple review task, but there are no explicit validation checkpoints (e.g., verify WCAG contrast after switching, re-check the rendered UI), so checkpoints are only implicit.

2 / 3

Progressive Disclosure

The body is a concise overview with clearly signaled one-level-deep navigation ('see references/rule.md' plus the rule-page URL), and references/rule.md is a real bundle file — matching 'clear overview with well-signaled one-level-deep references'.

3 / 3

Total

9

/

12

Passed

Description

77%

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 is specific and includes an explicit 'Use when' trigger, but its trigger terms lack common user-language variations and its broad CSS-review framing risks overlap with sibling skills.

Suggestions

Reword the trigger to use natural user phrasing such as 'dark mode', 'dark theme', 'night mode', and 'light/dark' instead of embedding the rule title 'Support dark mode'.

Narrow the opening from generic 'reviewing stylesheets, component styles' to dark-mode-specific review so it is less likely to collide with general CSS review skills.

Clarify the 'what' covers both reviewing and implementing dark mode, since the skill body also includes a Fix/Explain workflow.

DimensionReasoningScore

Specificity

Names multiple concrete actions — 'reviewing stylesheets, component styles, and responsive behavior' and 'Check the rendered layout across breakpoints and interaction states' — matching the 'lists multiple specific concrete actions' anchor rather than the single-domain level 2.

3 / 3

Completeness

Explicitly answers both what (review/check stylesheets for dark-mode support) and when via a present 'Use when...' clause, so the missing-trigger cap at 2 does not apply.

3 / 3

Trigger Term Quality

Includes relevant terms ('dark mode', 'prefers-color-scheme', 'responsive behavior', 'breakpoints') but omits common natural variations users would say ('dark theme', 'night mode', 'light/dark'), and the embedded rule title 'Support dark mode' reads awkwardly as a trigger.

2 / 3

Distinctiveness Conflict Risk

The dark-mode/prefers-color-scheme niche is fairly distinct, but the broad opening 'reviewing stylesheets, component styles' could overlap with generic CSS review skills, so it is only 'somewhat specific' rather than a clear non-conflicting niche.

2 / 3

Total

10

/

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.