tailwind-design-system
Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.
56
63%
Does it follow best practices?
Impact
—
No eval scenarios have been run
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./plugins/frontend-mobile-development/skills/tailwind-design-system/SKILL.mdQuality
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 communicates both what the skill does and when to use it, with specific technologies mentioned (Tailwind CSS v4, design tokens). Its main weaknesses are moderate trigger term coverage—missing common user phrasings like 'Tailwind', 'theme', 'styling'—and some potential overlap with general frontend component or CSS skills.
Suggestions
Add more natural trigger term variations such as 'Tailwind', 'theme tokens', 'styling system', 'CSS variables', 'UI kit' to improve discoverability.
Strengthen distinctiveness by clarifying what differentiates this from general CSS or component-building skills, e.g., 'Use when standardizing design tokens and Tailwind-based theming across a project, not for one-off component styling.'
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: 'Build scalable design systems', 'Tailwind CSS v4', 'design tokens', 'component libraries', 'responsive patterns'. These are concrete, identifiable capabilities. | 3 / 3 |
Completeness | Clearly answers both what ('Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns') and when ('Use when creating component libraries, implementing design systems, or standardizing UI patterns') with explicit trigger guidance. | 3 / 3 |
Trigger Term Quality | Includes good terms like 'Tailwind CSS v4', 'design tokens', 'component libraries', 'responsive patterns', and 'design systems', but misses common user variations like 'Tailwind', 'theme', 'styling', 'CSS variables', 'UI kit', or 'reusable components'. | 2 / 3 |
Distinctiveness Conflict Risk | The mention of 'Tailwind CSS v4' and 'design tokens' provides some distinctiveness, but 'component libraries' and 'UI patterns' could overlap with general frontend/React component skills or other CSS-related skills. The scope is somewhat broad for a design system skill. | 2 / 3 |
Total | 10 / 12 Passed |
Implementation
50%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
The skill provides highly actionable, production-ready code examples for building a Tailwind v4 design system, which is its primary strength. However, it is significantly too verbose—full component implementations that Claude could generate from brief patterns consume excessive tokens. The content would benefit greatly from moving detailed component code to reference files and keeping only the essential patterns (CVA setup, theme configuration, key v4 differences) in the main skill.
Suggestions
Move full component implementations (Card, Input, Label, Grid, Container) to a referenced file like 'references/components.md' and keep only the Button as the canonical CVA example in the main skill.
Reduce the color token definitions to 3-4 representative examples with a comment like '/* Define all semantic colors following this pattern */' instead of listing every token for both light and dark modes.
Add an explicit workflow section for setting up a new design system: 1) Create app.css with @theme, 2) Define tokens, 3) Create cn() utility, 4) Build first component, 5) Verify dark mode toggle works—with validation checkpoints.
Provide the referenced 'references/advanced-patterns.md' bundle file so the progressive disclosure actually works, or inline the migration checklist since it's critical for the v3→v4 use case.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is extremely verbose at ~400+ lines. It includes full component implementations (Card with 6 sub-components, complete form with validation, grid system) that Claude could easily generate from brief patterns. The extensive OKLCH color token lists for both light and dark mode are repetitive. Much of this is boilerplate that doesn't teach novel concepts—Claude already knows how to write React components with Tailwind classes. | 1 / 3 |
Actionability | All code examples are fully executable TypeScript/CSS with complete implementations. The CVA button, card compound components, input with error handling, grid system, and utility functions are all copy-paste ready with proper imports, types, and usage examples. | 3 / 3 |
Workflow Clarity | The v3→v4 migration table and design token hierarchy provide useful conceptual sequencing, but there's no explicit workflow with validation steps for setting up a design system. The 'When to Use' section lists scenarios but doesn't sequence them. The migration checklist is deferred to a reference file rather than being actionable here. | 2 / 3 |
Progressive Disclosure | The skill references 'references/advanced-patterns.md' with clear descriptions of what's inside, which is good. However, the main file itself contains far too much inline content that should be split out—the full component implementations (Card, Input, Label, Grid, Container) would be better as referenced files. The bundle has no files, so the referenced advanced-patterns.md cannot be verified. | 2 / 3 |
Total | 8 / 12 Passed |
Validation
90%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 10 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
skill_md_line_count | SKILL.md is long (566 lines); consider splitting into references/ and linking | Warning |
Total | 10 / 11 Passed | |
- Repository
- wshobson/agents
- Commit
34632bc
- 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.