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 when creating design systems, generating design tokens, maintaining visual consistency, or facilitating design-dev collaboration and developer handoff.

Quality

85%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

—

The risk profile of this skill

Quality

Content

82%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A well-structured, highly actionable skill body with concrete commands, copy-paste examples, and clearly signaled reference files. It is held back from top marks by section redundancy, missing mid-workflow validation feedback loops, and a large amount of reference material inlined rather than delegated to the references bundle.

Suggestions

Deduplicate the token-generator commands: Workflow 4 repeats the CSS/SCSS/JSON commands already shown in Workflow 1 and the Tool Reference — keep one canonical example set and cross-reference it.

Add an explicit validate→fix→retry feedback loop inside the workflows (e.g., after generating tokens, run a contrast check and re-generate if WCAG AA fails) rather than only a post-hoc checklist.

Move the full Quick Reference Tables (color scale, typography scale, style presets) into `references/token-generation.md` and link from the body, and reference the existing `assets/design_system_doc_template.md` where handoff documentation is generated.

Dimension	Reasoning	Score
Conciseness	Dense and useful with no padding of known concepts, but ~370 lines with some redundancy — the developer-handoff examples repeat the token-generator commands from Workflow 1/Tool Reference and Quick Reference Tables duplicate some Tool Reference content.	4 / 5
Actionability	Fully executable: copy-paste `python scripts/design_token_generator.py` commands, CSS/SCSS/JSON export examples, React/Tailwind/styled-components integration snippets, and pre-calculated fluid-typography values covering the common cases.	5 / 5
Workflow Clarity	Four numbered workflows with Situation/Steps and a dedicated Validation Checklist, but workflows lack an explicit validate→fix→retry feedback loop (validation is a post-hoc checklist rather than a mid-process checkpoint).	4 / 5
Progressive Disclosure	Good overview with a Knowledge Base table pointing to four real one-level-deep reference files, but large reference-style material (full color-scale, typography, style-preset tables) is inlined and the bundled `assets/design_system_doc_template.md` is never referenced.	4 / 5
	Total	17 / 20 Passed

Description

88%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong description that clearly states both what the skill does and when to use it, with concrete enumerated capabilities and explicit trigger phrases. Minor broadness in 'visual consistency' and slightly formal trigger wording keep it just short of a perfect score.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete actions — 'design token generation, component documentation, responsive design calculations, and developer handoff tools' — giving comprehensive coverage of the skill's capabilities.	5 / 5
Completeness	Explicitly answers both what (the four-part toolkit including token generation, component docs, responsive calculations, handoff) and when (explicit 'Use when creating design systems, generating design tokens...' trigger clause).	5 / 5
Trigger Term Quality	Good natural-phrase coverage ('creating design systems', 'generating design tokens', 'design-dev collaboration', 'developer handoff') but a few terms like 'facilitating design-dev collaboration' are formal rather than what users naturally say, and no file extensions are included.	4 / 5
Distinctiveness Conflict Risk	'UI design system toolkit' with design-token/handoff triggers carves a clear niche, but 'maintaining visual consistency' is broad and could overlap with general UI/styling skills.	4 / 5
	Total	18 / 20 Passed

Validation

100%

Warnings & errors only

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository: alirezarezvani/claude-skills
Path: product-team/skills/ui-design-system/SKILL.md
Commit: 19392f7

Reviewed: ~1 hour ago

Table of Contents

Discovery Implementation Validation

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.