color-palette

Generate complete, accessible colour palettes from a single brand hex. Produces 11-shade scale (50-950), semantic tokens, dark mode variants, Tailwind v4 CSS output, WCAG contrast checks. Use whenever the user supplies a brand hex and asks for a palette, mentions setting up a design system, wants Tailwind theme colours from a brand colour, or asks to check colour accessibility / contrast.

Quality

88%

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

Quality

Content

77%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.

A thorough, highly actionable colour-palette skill with executable code, explicit validation, and feedback loops. Its main weakness is verbosity from duplicated material (shade values, token mappings, and CSS output appear twice) and limited use of the bundle to offload reference content.

Suggestions

Deduplicate the shade scale: keep the generator code as the source of truth and reduce the lightness/saturation table to the use-case column, or vice-versa, so values are not stated twice.

Replace the inlined ~60-line Tailwind v4 @theme CSS block with a short excerpt plus a pointer to assets/tailwind-colors.css, which already contains the complete template — this trims the body and strengthens progressive disclosure.

Consolidate the three overlapping contrast sections (quick-check tables, 'Essential Pairs to Verify', and 'Fixing Common Contrast Failures') into a single table pairing each token pair with its ratio, pass/fail, and fix, to cut redundant token spend.

Dimension	Reasoning	Score
Conciseness	Mostly high-signal domain content, but notable redundancy inflates token cost: the 11-shade lightness/saturation table repeats values encoded in the generator code, the light/dark semantic-token tables are re-stated verbatim in the full CSS @theme block, and the contrast quick-check tables, 'Essential Pairs to Verify', and 'Fixing Common Contrast Failures' sections overlap.	3 / 5
Actionability	Fully executable, copy-paste-ready JavaScript (hexToHSL, generateShadeScale, hslToHex, getLuminance, getContrastRatio), a complete Tailwind v4 @theme CSS block, TSX component examples, and concrete fix recipes — all covering the common cases.	5 / 5
Workflow Clarity	Five clearly sequenced steps (brand hex → shade scale → semantic tokens → contrast check → CSS output) with explicit validation (contrast checks, a full verification checklist) and feedback loops ('Fixing Common Contrast Failures' maps each failure to a specific remedy).	5 / 5
Progressive Disclosure	Section structure is clear and `assets/tailwind-colors.css` is well-signaled as a starting template, but large reference material — the full ~60-line CSS @theme block (which duplicates the asset), the detailed contrast tables, and both semantic-token tables — is inlined in SKILL.md rather than split into one-level-deep reference files.	3 / 5
	Total	16 / 20 Passed

Description

92%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.

A well-constructed description that explicitly states both capabilities and trigger conditions in third person with concrete actions. The only weakness is reliance on British 'colour' spelling, which may miss American 'color' trigger phrasing in a Tailwind-centric skill.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete actions — 'Generate complete, accessible colour palettes', 'Produces 11-shade scale (50-950), semantic tokens, dark mode variants, Tailwind v4 CSS output, WCAG contrast checks' — giving comprehensive coverage of the skill's capabilities.	5 / 5
Completeness	Explicitly answers both what ('Generate complete, accessible colour palettes from a single brand hex. Produces 11-shade scale...') and when ('Use whenever the user supplies a brand hex and asks for a palette, mentions setting up a design system...') with concrete trigger phrases, in third person.	5 / 5
Trigger Term Quality	Strong natural keywords ('brand hex', 'palette', 'design system', 'Tailwind theme colours', 'colour accessibility / contrast'), but the skill uses only British 'colour' spelling throughout, missing the American 'color' variants that dominate Tailwind's own vocabulary and US user phrasing.	4 / 5
Distinctiveness Conflict Risk	Occupies a clear niche (brand-hex-to-Tailwind-palette generation) with distinct triggers; the only slight overlap is the broad phrase 'design system', but it is anchored by 'brand hex' and 'palette' so conflict risk is minimal.	5 / 5
	Total	19 / 20 Passed

Validation

100%

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 — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository: jezweb/claude-skills
Path: plugins/design-assets/skills/color-palette/SKILL.md
Commit: ee91a87

Reviewed: 6 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.