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
Quality
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 essentially a placeholder that provides almost no useful information for skill selection. It repeats the skill name as trigger terms, lacks any description of concrete capabilities, and provides no guidance on when Claude should select this skill. The description reads like auto-generated metadata rather than a functional skill description.
Suggestions
Add specific actions the skill performs, e.g., 'Analyzes color pairs for WCAG 2.1 contrast compliance, calculates contrast ratios, and suggests accessible alternatives for failing combinations.'
Include a 'Use when...' clause with natural trigger terms: 'Use when checking color accessibility, WCAG compliance, contrast ratios, or when users mention readable colors, a11y, or color accessibility.'
Remove the redundant trigger term and expand to include variations users would naturally say: 'contrast ratio', 'accessible colors', 'WCAG', 'readability', 'color accessibility'.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | The description only names the skill ('Color Contrast Checker') without describing any concrete actions. There are no verbs indicating what the skill actually does (e.g., 'analyzes contrast ratios', 'checks WCAG compliance', 'suggests accessible color pairs'). | 1 / 3 |
Completeness | The description fails to answer 'what does this do' beyond the name itself, and provides no explicit 'when to use' guidance. It only states category membership without explaining capabilities or use cases. | 1 / 3 |
Trigger Term Quality | The trigger terms are redundant ('color contrast checker' repeated twice) and miss natural variations users might say like 'accessibility', 'WCAG', 'readable colors', 'contrast ratio', 'a11y', or 'color accessibility'. | 1 / 3 |
Distinctiveness Conflict Risk | The term 'color contrast checker' is fairly specific to accessibility checking, which provides some distinctiveness. However, without describing specific capabilities, it could overlap with general accessibility or color-related skills. | 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 essentially a placeholder template with no actual content about color contrast checking. It contains zero actionable information - no WCAG contrast ratios (4.5:1 for normal text, 3:1 for large text), no calculation formulas, no code examples, and no tool recommendations. The entire content describes what the skill supposedly does without ever teaching how to do it.
Suggestions
Add concrete WCAG contrast ratio requirements (4.5:1 AA normal text, 3:1 AA large text, 7:1 AAA) with executable code to calculate relative luminance
Include a working code example that takes two hex colors and returns the contrast ratio with pass/fail status
Provide a clear workflow: 1) Extract colors from design/CSS, 2) Calculate contrast ratio, 3) Compare against WCAG thresholds, 4) Suggest accessible alternatives for failing pairs
Reference specific tools or libraries (e.g., color-contrast npm package, browser DevTools accessibility panel) with usage examples
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is padded with generic boilerplate that explains nothing specific about color contrast checking. Phrases like 'provides automated assistance' and 'follows industry best practices' are filler that waste tokens without adding value. | 1 / 3 |
Actionability | No concrete guidance whatsoever - no code examples, no WCAG ratio thresholds, no formulas, no tools, no commands. The skill describes what it does abstractly but never instructs how to actually check color contrast. | 1 / 3 |
Workflow Clarity | No workflow is defined. There are no steps for calculating contrast ratios, no validation checkpoints, and no process for fixing failing colors. The content is entirely meta-description with zero procedural guidance. | 1 / 3 |
Progressive Disclosure | The content is a monolithic block of generic text with no structure pointing to detailed resources. No references to WCAG guidelines, contrast calculation formulas, or tool documentation are provided. | 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
994edc4
- 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.