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.

Quality

70%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./skills/dark-mode-css/SKILL.md

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.

The body is a lean, well-structured overview that correctly delegates implementation detail to a real one-level-deep reference, giving excellent progressive disclosure. Its weaknesses are in the body's own actionability and workflow clarity, where executable code and explicit validation checkpoints are deferred to the reference rather than surfaced.

Suggestions

Inline one minimal executable snippet (e.g., the :root custom-property + @media (prefers-color-scheme: dark) redefinition) so the body is actionable without opening the reference.

Add an explicit numbered verification/checkpoint in the body (e.g., 'After the fix: confirm computed styles in DevTools at one mobile and one desktop viewport') rather than only in references/rule.md.

Trim or relocate the opening motivation paragraph to references/rule.md's 'Why It Matters' section to remove the main remaining over-explanation.

Dimension	Reasoning	Score
Conciseness	The body is efficient: terse Quick Reference bullets and one-to-two-sentence Check/Fix/Explain/Code Review sections that delegate detail to references/rule.md. The only mild over-explanation is the opening motivation paragraph about eye strain and photosensitivity, which keeps it just below a 5.	4 / 5
Actionability	The body gives concrete directives ('extract colors to CSS custom properties and redefining them inside a prefers-color-scheme: dark media query', 'maintain WCAG contrast ratios') but no executable code, selectors, or the data-theme toggle/JS in the body itself — those specifics live only in the reference. This is some actionable guidance but incomplete for standalone execution.	3 / 5
Workflow Clarity	A loose Check → Fix → Explain → Code Review sequence is present, but validation/verification checkpoints are only implicit in the body ('Check the rendered layout... before proposing a fix'); the explicit Verification steps live in references/rule.md. The sequence exists but checkpoints are missing or implicit, matching the 3 anchor.	3 / 5
Progressive Disclosure	The body is a clear, well-sectioned overview (Quick Reference, Check, Fix, Explain, Code Review) with a single well-signaled one-level-deep reference to references/rule.md — a real file verified in the bundle. Content is appropriately split between overview and detailed reference, with easy navigation.	5 / 5
	Total	15 / 20 Passed

Description

75%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 explicitly answers both what the skill does and when to use it, with concrete review-specific actions and natural trigger terms centered on dark mode. It is held back from the top band by slightly generic 'reviewing' actions and a few missing synonyms/file extensions.

Suggestions

Add a concrete file extension or selector-level term (e.g., '.css files', 'prefers-color-scheme media query') to round out trigger-term coverage.

Sharpen the 'what' with one more specific action beyond 'reviewing'/'checking' (e.g., 'extract hard-coded colors into CSS custom properties') to lift specificity and completeness.

Tighten the trigger phrase so it reads as a natural user request ('Use when the user asks to add or fix dark mode...') to further reduce overlap with generic CSS review skills.

Dimension	Reasoning	Score
Specificity	Names the domain and several concrete actions — reviewing stylesheets, component styles, and responsive behavior, plus checking the rendered layout across breakpoints and interaction states before proposing a fix. It lists multiple specific actions but stays within the 'review' family rather than comprehensive coverage, so it sits just below a 5.	4 / 5
Completeness	Both halves are present and explicit: an opening 'Use when reviewing stylesheets, component styles, and responsive behavior related to Support dark mode...' (when) and the reviewing/checking/fixing actions (what). It is clearly above a 3 because the trigger is explicit, but the 'what' is somewhat thin and review-generic, so not a 5.	4 / 5
Trigger Term Quality	Includes natural terms users would say ('dark mode', 'stylesheets', 'responsive behavior', 'breakpoints', 'interaction states') alongside the technical 'prefers-color-scheme'. Coverage is good but a few natural synonyms and the .css extension are missing, keeping it below 5.	4 / 5
Distinctiveness Conflict Risk	The 'Support dark mode with prefers-color-scheme' niche is a clear, distinct trigger, but the broad framing of 'reviewing stylesheets, component styles, and responsive behavior' creates minor overlap risk with general CSS review skills. Mostly distinct but not minimal-conflict, so a 4.	4 / 5
	Total	16 / 20 Passed

Validation

93%

Warnings & errors only

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

Criteria	Description	Result
metadata_version	'metadata.version' is missing	Warning

	Total	15 / 16 Passed

Repository: thedaviddias/Front-End-Checklist
Path: skills/dark-mode-css/SKILL.md
Commit: 30756a7

Reviewed: 9 days ago

Table of Contents

Discovery Implementation Validation

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.