Name: ui-design-system
Rating: 60 (1 reviews)
Author: alirezarezvani

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

70%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./.gemini/skills/ui-design-system/SKILL.md

The canonical home for this skill is ui-design-system in alirezarezvani/claude-skills

Quality

Content

56%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.

The body is well-structured with sequenced workflows and useful dense reference tables, but its progressive-disclosure and actionability are undermined because none of the referenced scripts or reference guides actually ship in the bundle, and core commands are repeated across multiple sections.

Suggestions

Ship the missing bundle files (scripts/design_token_generator.py and references/{token-generation,component-architecture,responsive-calculations,developer-handoff}.md) so referenced navigation resolves and token-generation commands are executable.

Remove the standalone Trigger Terms section or fold it into the description, since it duplicates the frontmatter "Use when" triggers.

Consolidate the design_token_generator.py invocation examples into the single Tool Reference section and cross-link from the workflows to avoid repeating the same commands three times.

Dimension	Reasoning	Score
Conciseness	The ~375-line body is mostly efficient and avoids explaining concepts Claude already knows, but the 14-item Trigger Terms section duplicates the description's "Use when" clause and the design_token_generator.py invocation is repeated verbatim across Workflow 1, Workflow 4, and Tool Reference, so it could be tightened.	3 / 5
Actionability	Provides concrete commands and real CSS/TSX snippets, but the central action — `python scripts/design_token_generator.py ...` — references a script that is not bundled (no scripts/ directory exists), so the primary guidance is not actually executable, fitting the 3-anchor's missing key details.	3 / 5
Workflow Clarity	Four workflows each have a Situation, clearly numbered sequenced steps, and validation is present (Workflow 1 accessibility check, terminal Validation Checklist), but there are no explicit if-fails-then-fix feedback loops, capping it just below the 5-anchor.	4 / 5
Progressive Disclosure	Structure is well-organized with a TOC and clearly signaled one-level-deep references (Knowledge Base table plus inline "See references/..."), but every referenced file (scripts/design_token_generator.py and the four references/*.md guides) is missing from the bundle, so navigation dead-ends and the offloaded detail is unreachable.	3 / 5
	Total	13 / 20 Passed

Description

83%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.

The description is strong: it explicitly answers both what and when with concrete trigger phrases and occupies a distinct niche. It is held below the top tier by noun-phrased capabilities and slightly broad visual-consistency language.

Dimension	Reasoning	Score
Specificity	Names several concrete capabilities — "design token generation, component documentation, responsive design calculations, and developer handoff tools" — but several are noun/gerund phrases rather than crisp action verbs, leaving minor gaps versus the comprehensive 5-anchor.	4 / 5
Completeness	Clearly states what ("UI design system toolkit... including design token generation, component documentation, responsive design calculations, and developer handoff tools") and an explicit when ("Use when creating design systems, generating design tokens, maintaining visual consistency, or facilitating design-dev collaboration and developer handoff"), matching the 5-anchor that requires both with concrete trigger phrases.	5 / 5
Trigger Term Quality	Includes natural phrases users would say ("creating design systems", "generating design tokens", "maintaining visual consistency", "developer handoff") with good coverage, but omits common synonyms like color palette, typography scale, or spacing system.	4 / 5
Distinctiveness Conflict Risk	Has a clear niche around design systems and design tokens with distinct triggers, but "maintaining visual consistency" is broad enough to overlap with general CSS/styling skills, so minor conflict risk remains versus the 5-anchor.	4 / 5
	Total	17 / 20 Passed

Validation

93%

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 — 15 / 16 Passed

Validation for skill structure

Criteria	Description	Result
referenced_paths_exist	Referenced path issues: 13 missing	Warning

	Total	15 / 16 Passed

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

Reviewed: ~16 hours 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.