ui-design-system
tessl i github:alirezarezvani/claude-skills --skill ui-design-systemUI 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.
Review Score
67%
Validation Score
11/16
Implementation Score
52%
Activation Score
77%
Generated
Validation
Total
11/16Score
Passed| Criteria | Score |
|---|---|
description_trigger_hint | Description may be missing an explicit 'when to use' trigger hint (e.g., 'Use when...') |
metadata_version | 'metadata' field is not a dictionary |
license_field | 'license' field is missing |
body_examples | No examples detected (no code fences and no 'Example' wording) |
body_steps | No step-by-step structure detected (no ordered list); consider adding a simple workflow |
Implementation
Suggestions 4
Score
52%Overall Assessment
The skill is concise and well-structured at a high level, but lacks the actionable depth needed for effective use. It describes capabilities without demonstrating them through examples or providing clear workflows for common design system tasks. The single script reference needs concrete input/output examples to be truly useful.
Suggestions
- Add a concrete example showing the script invocation with sample brand color and the resulting token output (e.g., JSON snippet)
- Include a workflow section explaining the typical design system creation process: 1) Generate tokens → 2) Validate output → 3) Export to target format
- Add links to detailed documentation files for component architecture, accessibility guidelines, and developer handoff templates
- Provide at least one complete input/output example demonstrating the token generator with expected results
| Dimension | Score | Reasoning |
|---|---|---|
Conciseness | 3/3 | Content is lean and efficient, listing capabilities and script usage without unnecessary explanation. No padding or concepts Claude already knows. |
Actionability | 2/3 | Provides CLI usage pattern and parameter options, but lacks executable code examples, sample outputs, or concrete input/output demonstrations. The script reference is helpful but incomplete without showing actual usage results. |
Workflow Clarity | 1/3 | No workflow sequence provided for design system creation. Lists capabilities and a single script but doesn't explain how to use them together, when to use each feature, or any validation steps for the generated tokens. |
Progressive Disclosure | 2/3 | Content is brief and organized with clear sections, but references a script without linking to documentation or examples. No indication of where to find detailed API reference, examples, or advanced usage patterns. |
Activation
Suggestions 2
Score
77%Overall Assessment
This is a solid description that clearly articulates specific capabilities and includes explicit 'Use for' guidance. The main weaknesses are limited trigger term coverage (missing common synonyms and file types users might mention) and moderate overlap risk with general UI/frontend skills. The persona mention ('Senior UI Designer') doesn't add selection value.
Suggestions
- Add more natural trigger terms users would say, such as 'style guide', 'UI kit', 'spacing scale', 'color palette', 'typography system', or tool-specific terms like 'Figma handoff'
- Strengthen distinctiveness by specifying file formats or outputs (e.g., 'generates CSS variables, JSON tokens') to differentiate from general UI design skills
| Dimension | Score | Reasoning |
|---|---|---|
Specificity | 3/3 | Lists multiple specific concrete actions: 'design token generation, component documentation, responsive design calculations, and developer handoff tools' - these are clear, actionable capabilities. |
Completeness | 3/3 | Clearly answers both what (design token generation, component documentation, responsive calculations, handoff tools) AND when ('Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration'). |
Trigger Term Quality | 2/3 | Includes some relevant terms like 'design system', 'design tokens', 'component documentation', but missing common variations users might say like 'style guide', 'UI kit', 'spacing', 'colors', 'typography tokens', or 'Figma handoff'. |
Distinctiveness Conflict Risk | 2/3 | While 'design system' and 'design tokens' are fairly specific, terms like 'UI design' and 'visual consistency' could overlap with general UI/UX skills or frontend development skills. The 'Senior UI Designer' persona adds some distinction but isn't a trigger term. |