color-contrast-checker
Color Contrast Checker - Auto-activating skill for Frontend Development. Triggers on: color contrast checker, color contrast checker Part of the Frontend Development skill category.
36
3%
Does it follow best practices?
Impact
99%
1.03xAverage score across 3 eval scenarios
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./planned-skills/generated/05-frontend-dev/color-contrast-checker/SKILL.mdQuality
Discovery
7%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
This description is extremely weak — it is essentially just the skill name repeated with boilerplate category metadata. It provides no concrete actions, no meaningful trigger terms beyond the skill name itself, and no explicit guidance on when Claude should select this skill. It would be nearly indistinguishable from any other color or accessibility-related skill.
Suggestions
Add specific concrete actions the skill performs, e.g., 'Calculates contrast ratios between foreground and background colors, checks WCAG 2.1 AA/AAA compliance, and suggests accessible color alternatives.'
Add a 'Use when...' clause with natural trigger terms like 'Use when the user asks about color accessibility, contrast ratios, WCAG compliance, readable text colors, or a11y color checks.'
Remove the duplicate trigger term ('color contrast checker' is listed twice) and expand with natural variations users would say, such as 'contrast ratio', 'accessible colors', 'WCAG', 'text readability'.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | The description only names the skill ('Color Contrast Checker') but does not describe any concrete actions like checking WCAG compliance, calculating contrast ratios, suggesting accessible color alternatives, etc. It is essentially just a label repeated. | 1 / 3 |
Completeness | The description fails to answer 'what does this do' beyond the name itself, and the 'when' clause is just a repetition of the skill name rather than meaningful trigger guidance. There is no explicit 'Use when...' clause with real context. | 1 / 3 |
Trigger Term Quality | The only trigger terms listed are 'color contrast checker' repeated twice. It misses natural variations users would say like 'accessibility', 'WCAG', 'contrast ratio', 'readable colors', 'a11y', 'foreground/background colors', etc. | 1 / 3 |
Distinctiveness Conflict Risk | The term 'color contrast checker' is fairly specific to a niche domain (accessibility/contrast checking), which reduces conflict risk somewhat. However, the lack of detail about what it actually does versus other color-related or accessibility skills limits its distinctiveness. | 2 / 3 |
Total | 5 / 12 Passed |
Implementation
0%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This skill is a hollow template with no actual content about color contrast checking. It contains no WCAG contrast ratio thresholds, no code for calculating relative luminance, no tool recommendations, and no actionable guidance whatsoever. Every section is generic boilerplate that could apply to any skill topic.
Suggestions
Add concrete WCAG 2.1 contrast ratio requirements (e.g., 4.5:1 for normal text, 3:1 for large text) and the relative luminance formula with executable code for calculating contrast ratios.
Include a working code example (e.g., a JavaScript/TypeScript function that takes two hex colors and returns the contrast ratio with a pass/fail result).
Provide specific tool recommendations (e.g., axe-core, Lighthouse audit commands, browser DevTools contrast checker) with concrete usage examples.
Remove all meta-description sections ('When to Use', 'Example Triggers', 'Capabilities') and replace with actionable content like common contrast failures and how to fix them.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is entirely filler and meta-description. It explains what the skill does in abstract terms without providing any actual technical content about color contrast checking. Every section restates the same vague information. | 1 / 3 |
Actionability | There is zero concrete guidance—no code, no formulas, no WCAG ratio thresholds, no tools, no commands. It only describes what it could do rather than instructing how to do anything. | 1 / 3 |
Workflow Clarity | No workflow, steps, or process is defined. The skill mentions 'step-by-step guidance' and 'validates outputs' but provides neither steps nor validation criteria. | 1 / 3 |
Progressive Disclosure | The content has section headers but they contain no substantive information. There are no references to external files, no examples, and no structured navigation to deeper content. | 1 / 3 |
Total | 4 / 12 Passed |
Validation
81%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 9 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
allowed_tools_field | 'allowed-tools' contains unusual tool name(s) | Warning |
frontmatter_unknown_keys | Unknown frontmatter key(s) found; consider removing or moving to metadata | Warning |
Total | 9 / 11 Passed | |
- Commit
3076d78
- 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.