ui-design-system
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.
Install with Tessl CLI
npx tessl i github:alirezarezvani/claude-skills --skill ui-design-system67
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
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.
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 | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: 'design token generation, component documentation, responsive design calculations, and developer handoff tools' - these are clear, actionable capabilities. | 3 / 3 |
Completeness | 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'). | 3 / 3 |
Trigger Term Quality | 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'. | 2 / 3 |
Distinctiveness Conflict Risk | 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. | 2 / 3 |
Total | 10 / 12 Passed |
Implementation
52%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
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 | Reasoning | Score |
|---|---|---|
Conciseness | Content is lean and efficient, listing capabilities and script usage without unnecessary explanation. No padding or concepts Claude already knows. | 3 / 3 |
Actionability | 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. | 2 / 3 |
Workflow Clarity | 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. | 1 / 3 |
Progressive Disclosure | 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. | 2 / 3 |
Total | 8 / 12 Passed |
Validation
68%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 / 16 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
description_trigger_hint | Description may be missing an explicit 'when to use' trigger hint (e.g., 'Use when...') | Warning |
metadata_version | 'metadata' field is not a dictionary | Warning |
license_field | 'license' field is missing | Warning |
body_examples | No examples detected (no code fences and no 'Example' wording) | Warning |
body_steps | No step-by-step structure detected (no ordered list); consider adding a simple workflow | Warning |
Total | 11 / 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.