color-oklch

Use when building a design token system, creating accessible colour palettes, generating colour ramps programmatically, or migrating a design system to support wide-gamut displays.

Quality

76%

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/color-oklch/SKILL.md

Quality

Content

70%

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

A well-structured, appropriately progressive single-purpose skill whose body defers detail to a real reference file. It is held back by an explanatory intro that covers concepts Claude already knows and by the absence of any executable code example in the body itself.

Suggestions

Trim the intro paragraph to the essential point — Claude already knows HSL is non-perceptual — and reserve explanation for the Explain section.

Include one short executable oklch token example (e.g. --color-500: oklch(0.6 0.15 250);) in the Fix section so the body is actionable without opening the reference.

Dimension	Reasoning	Score
Conciseness	The intro re-explains what HSL is and why oklch is perceptually uniform ('a 10 % lightness change looks dramatically different depending on the hue') — concepts Claude already knows. The Quick Reference and Check/Fix sections are tighter. Not level 1 because most sections are efficient; not level 3 because the explanatory preamble could be trimmed.	2 / 3
Actionability	Names concrete CSS features (oklch(L C H), @media (color-gamut: p3)) but the body provides no executable code or complete example — guidance is deferred to references/rule.md. Not level 1 because it points to specific syntax; not level 3 because there is no copy-paste-ready example inline.	2 / 3
Workflow Clarity	For a simple single-task skill, the Check / Fix / Explain / Code Review sections make the single action unambiguous, which the simple-skills note allows to score 3. Not level 2 because the structure is clear and there are no risky batch/destructive operations requiring validation checkpoints.	3 / 3
Progressive Disclosure	Concise overview body with a single well-signaled, verified one-level-deep reference ('see references/rule.md', which exists) — content is appropriately split. Not level 2 because the reference is clearly signaled and real rather than inline or ambiguously linked.	3 / 3
	Total	10 / 12 Passed

Description

82%

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong description with specific capabilities, natural trigger terms, and a clear niche. Its main weakness is that the core 'what does this do' capability is conveyed indirectly through 'Use when' scenarios rather than an explicit action statement.

Suggestions

Lead with an explicit capability clause before the trigger, e.g. 'Convert CSS colour tokens to oklch and build perceptually uniform palettes. Use when ...'

Add the concrete token terms users would say ('design tokens', 'colour ramp', 'shade steps') earlier so the what and when are both explicit.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete actions: 'building a design token system', 'creating accessible colour palettes', 'generating colour ramps programmatically', and 'migrating a design system to support wide-gamut displays'. Not the level below (2), which would name only some actions without comprehensive coverage.	3 / 3
Completeness	Has an explicit 'Use when ...' trigger clause, but the 'what' is only implied through trigger scenarios rather than stated as a direct capability (e.g. 'Convert palettes to oklch / generate ramps'). Not level 3 because the core action is not explicitly stated alongside the when; not level 1 because the when is clearly present.	2 / 3
Trigger Term Quality	Uses natural domain terms a user would say — 'design token system', 'accessible colour palettes', 'colour ramps', 'wide-gamut displays' — with good coverage rather than just 'Works with CSS colours'. Not level 2 because it includes common variations, not just a single relevant keyword.	3 / 3
Distinctiveness Conflict Risk	Clear niche (oklch/perceptual colour palettes for design systems) with distinct triggers unlikely to fire for unrelated skills. Not level 2 because the triggers are specific enough to avoid meaningful overlap with general CSS skills.	3 / 3
	Total	11 / 12 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/color-oklch/SKILL.md
Commit: 48405aa

Reviewed: about 8 hours 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.