CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

86

1.12x
Quality

67%

Does it follow best practices?

Impact

98%

1.12x

Average score across 6 eval scenarios

SecuritybySnyk

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./product-team/ui-design-system/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

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.

DimensionReasoningScore

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.

DimensionReasoningScore

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.

Validation11 / 11 Passed

Validation for skill structure

No warnings or errors.

Repository
alirezarezvani/claude-skills
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.