UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration.
86
67%
Does it follow best practices?
Impact
98%
1.12xAverage score across 6 eval scenarios
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./product-team/ui-design-system/SKILL.mdQuality
Discovery
77%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 reasonably well-structured with clear capabilities and an explicit 'Use for' clause. Its main strengths are the specific actions listed and the completeness of covering both what and when. However, it could improve trigger term coverage with more natural user language variations and reduce potential overlap with adjacent skills by being more precise about its unique niche.
Suggestions
Add more natural trigger terms users would say, such as 'style guide', 'color palette', 'spacing scale', 'breakpoints', 'Figma tokens', or 'CSS variables'.
Remove the persona reference 'Senior UI Designer' which doesn't aid skill selection and replace with more distinctive trigger phrases that differentiate this from general frontend or documentation skills.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: 'design token generation', 'component documentation', 'responsive design calculations', and 'developer handoff tools'. These are distinct, identifiable capabilities. | 3 / 3 |
Completeness | Clearly answers both what ('design token generation, component documentation, responsive design calculations, developer handoff tools') and when ('Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration'). The 'Use for...' clause serves as an explicit trigger guidance. | 3 / 3 |
Trigger Term Quality | Includes some relevant terms like 'design tokens', 'component documentation', 'responsive design', 'developer handoff', and 'design systems', but misses common user variations like 'style guide', 'UI kit', 'spacing scale', 'color palette', 'breakpoints', or 'Figma'. The terms lean slightly technical rather than how users naturally phrase requests. | 2 / 3 |
Distinctiveness Conflict Risk | While 'design token generation' and 'developer handoff tools' are fairly distinctive, terms like 'visual consistency' and 'design-dev collaboration' are broad enough to potentially overlap with general UI/UX skills, frontend development skills, or documentation skills. The 'Senior UI Designer' persona mention is unusual and doesn't help with disambiguation. | 2 / 3 |
Total | 10 / 12 Passed |
Implementation
57%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 clear workflows and good progressive disclosure to reference files. Its main weaknesses are verbosity (trigger terms, reference tables Claude already knows, redundant content) and validation steps that are listed as checklists at the end rather than integrated as feedback loops within the workflows. The actionability is decent but relies on an external script without fallback and uses pseudo-notation in places where executable code would be more useful.
Suggestions
Remove the 'Trigger Terms' section and WCAG contrast reference table — Claude already knows these and they consume tokens unnecessarily.
Embed validation checkpoints directly within each workflow (e.g., after token generation, run a contrast check command) rather than listing them as a separate section at the bottom.
Replace pseudo-notation for component variants (e.g., 'sm: height 32px, paddingX 12px') with actual executable CSS or code snippets.
Move the Color Scale Generation and Typography Scale tables to a reference file since they document the script's internals rather than providing actionable guidance.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is fairly comprehensive but includes some unnecessary content like the 'Trigger Terms' section (Claude doesn't need keyword matching hints), the Table of Contents for an already-structured document, and some reference tables (like WCAG contrast ratios and typography scale calculations) that Claude already knows. The quick reference tables add bulk that could be in reference files. | 2 / 3 |
Actionability | The skill provides concrete bash commands and code snippets for token generation and framework integration, which is good. However, it references a script (design_token_generator.py) without confirming it exists or providing fallback behavior, the component system workflow uses descriptive text rather than executable code, and variant patterns are shown in pseudo-notation rather than actual CSS/code. | 2 / 3 |
Workflow Clarity | The four workflows are clearly sequenced with numbered steps, and there are validation checklists at the end. However, the validation steps are separated from the workflows rather than embedded as checkpoints within them. For example, Workflow 1 mentions 'Validate accessibility' as a final step but doesn't include a concrete validation command or feedback loop for fixing issues. The checklists at the bottom are disconnected from the workflows they serve. | 2 / 3 |
Progressive Disclosure | The skill effectively uses a layered structure with a concise overview in the main file and clear one-level-deep references to detailed guides in the references/ directory. Each workflow ends with a specific reference file pointer, and the Knowledge Base section provides a clean navigation table to all reference materials. | 3 / 3 |
Total | 9 / 12 Passed |
Validation
100%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
f567c61
Table of Contents
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.