color-palette
Generate complete, accessible color palettes from a single brand hex. Creates 11-shade scale (50-950), semantic tokens (background, foreground, card, muted), and dark mode variants. Includes WCAG contrast checking for text accessibility. Use when: setting up design system, creating Tailwind theme, building brand colors from single hex, converting designs to code, checking color accessibility.
Overall
score
86%
Does it follow best practices?
If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:
npx tessl skill review --optimize ./path/to/skillValidation for skill structure
Discovery
100%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 is an excellent skill description that clearly articulates specific capabilities (shade scales, semantic tokens, dark mode, WCAG checking) and provides explicit trigger guidance. The description uses proper third-person voice, includes natural user terminology, and carves out a distinct niche that won't conflict with broader design skills.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: 'Creates 11-shade scale (50-950)', 'semantic tokens (background, foreground, card, muted)', 'dark mode variants', and 'WCAG contrast checking'. These are precise, actionable capabilities. | 3 / 3 |
Completeness | Clearly answers both what (generate palettes, create shade scales, semantic tokens, dark mode, contrast checking) AND when with explicit 'Use when:' clause listing five specific trigger scenarios. | 3 / 3 |
Trigger Term Quality | Includes natural keywords users would say: 'design system', 'Tailwind theme', 'brand colors', 'single hex', 'color accessibility', 'brand hex'. Good coverage of both technical and natural language terms. | 3 / 3 |
Distinctiveness Conflict Risk | Highly distinctive niche focused on color palette generation from a single hex with specific outputs (11-shade scale, semantic tokens). Unlikely to conflict with general design or styling skills due to precise scope. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
72%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a well-structured skill with excellent actionability and progressive disclosure. The concrete CSS examples and clear reference file organization are strengths. However, it could be more concise by removing meta-content (token efficiency stats, status headers) and could improve workflow clarity by integrating contrast validation as an explicit checkpoint in the generation process rather than a separate section.
Suggestions
Remove the 'Token Efficiency' section and 'Status/Last Updated' header - these don't help Claude execute the task
Integrate contrast checking into the Quick Reference workflow as step 5.5: 'Verify all text pairs meet WCAG ratios; if not, adjust shade selection and re-check'
Condense the 'Color Scale Overview' table - Claude understands lightness percentages; focus on the use cases only
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is mostly efficient but includes some unnecessary content like the 'Token Efficiency' section explaining savings, the 'Status/Last Updated' header, and some explanatory text that Claude would already understand (e.g., explaining what shade 500 represents). The tables and examples are useful but could be tighter. | 2 / 3 |
Actionability | Provides fully executable CSS/JavaScript examples with concrete hex values, complete Tailwind v4 @theme syntax, specific WCAG ratios, and copy-paste ready code blocks. The examples section shows complete real-world outputs for multiple brand colors. | 3 / 3 |
Workflow Clarity | The 'Quick Reference' section lists 5 steps but lacks explicit validation checkpoints. For color palette generation, there should be a 'verify contrast passes before finalizing' step integrated into the workflow rather than contrast checking being a separate section. No feedback loop for fixing failed contrast checks. | 2 / 3 |
Progressive Disclosure | Excellent structure with clear overview, well-organized sections, and a clean Resources table pointing to one-level-deep reference files (shade-generation.md, semantic-mapping.md, etc.). Content is appropriately split between quick start, detailed sections, and external references. | 3 / 3 |
Total | 10 / 12 Passed |
Validation
87%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 14 / 16 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
metadata_version | 'metadata.version' is missing | Warning |
metadata_field | 'metadata' should map string keys to string values | Warning |
Total | 14 / 16 Passed | |
- 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.