CtrlK
BlogDocsLog inGet started
Tessl Logo

color-contrast

Use when applies to all visible text and text images, UI component borders (input fields, buttons), focus indicators, icons that convey meaning, and graphical objects required to understand content. Does not apply to inactive/disabled UI components or purely decorative elements.

49

Quality

53%

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/color-contrast/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 content is a well-structured overview with excellent progressive disclosure to rule.md, but it repeats thresholds across sections and keeps verification implicit rather than as an explicit feedback loop. It is actionable at the prose level yet lacks any executable example in the body itself.

Suggestions

De-duplicate the 4.5:1 / 3:1 thresholds: state them once in Quick Reference and reference back from Check and Explain.

Turn Check → Fix into a short numbered workflow with an explicit 'verify ratio >= threshold; if not, adjust and re-measure' checkpoint.

Move the vision-deficiency statistics and the luminance formula explanation to rule.md, since they restate concepts Claude already knows.

DimensionReasoningScore

Conciseness

The body is mostly efficient, but the 4.5:1 / 3:1 thresholds recur across Quick Reference, Check, and Explain, and the intro and Explain sections restate vision-deficiency statistics and the luminance formula that Claude already knows — tightened but not the lean, every-token-earns-its-place level expected at 3.

2 / 3

Actionability

Guidance is concrete — exact ratios per text size, named tools (WebAIM, DevTools accessibility panel), all interactive states, and an opacity gotcha — but the body itself contains no executable snippet or worked color example (those live in rule.md), and the Fix is prose-level ('darken/lighten until it meets'), short of the copy-paste-ready anchor at 3.

2 / 3

Workflow Clarity

Check → Fix → Explain → Code Review gives an implicit sequence and the Fix mentions verifying with a tool, but there is no explicit numbered workflow or validate → adjust → re-verify checkpoint, so checkpoints remain implicit rather than the explicit feedback loop expected at 3.

2 / 3

Progressive Disclosure

The body is a concise overview that clearly signals a single one-level-deep reference — 'For full implementation details, code examples, and framework-specific guidance, see references/rule.md' — and that file exists, giving clean navigation matching the well-signaled one-level-deep anchor.

3 / 3

Total

9

/

12

Passed

Description

50%

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 detailed about applicability scope and exclusions but functions as a 'use when applies to X' filter rather than a capability-plus-trigger statement. It never names the action (check/fix contrast) nor the natural term 'contrast', leaving every dimension at the mid level.

Suggestions

Lead with the capability, e.g. 'Check and fix color contrast ratios of text and UI components against WCAG thresholds.'

Add the natural trigger terms users actually say: 'Use when reviewing color contrast, text readability, or WCAG 1.4.3 / 1.4.11 compliance.'

Keep the strong exclusions but tie them explicitly to the contrast niche so the description does not read as a generic accessibility filter.

DimensionReasoningScore

Specificity

The description enumerates concrete applicability targets ('visible text and text images, UI component borders (input fields, buttons), focus indicators, icons that convey meaning, and graphical objects'), but it states scope rather than concrete actions — there is no verb such as 'check' or 'fix' — so it falls short of the multi-action anchor at 3 while remaining more concrete than the vague anchor at 1.

2 / 3

Completeness

The 'when' is explicit and even includes exclusions ('Use when applies to...', 'Does not apply to inactive/disabled UI components or purely decorative elements'), but the 'what does this do' is never stated as a capability, leaving one half of the what/when pair weak and capping completeness at 2 per the rubric guideline.

2 / 3

Trigger Term Quality

It lists relevant domain terms (input fields, buttons, focus indicators, icons) but omits the most natural user phrasings — 'color contrast', 'contrast', 'readable text' — and never actually uses the word 'contrast', yielding partial coverage rather than the natural-term spread expected at 3.

2 / 3

Distinctiveness Conflict Risk

The contrast-applicability scope is fairly specific, but because the word 'contrast' is absent the description could overlap with other accessibility skills (alt text, ARIA, keyboard navigation), placing it between the distinct-niche anchor and the conflict-prone anchor.

2 / 3

Total

8

/

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.