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.
72
59%
Does it follow best practices?
Impact
92%
1.48xAverage score across 3 eval scenarios
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./tests/ext_conformance/artifacts/agents-wshobson/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 states what the skill does and when to use it, with specific technologies named (Tailwind CSS v4, design tokens). Its main weaknesses are moderate trigger term coverage—missing common user phrasings like 'Tailwind', 'theme', 'styling'—and some overlap risk with adjacent frontend/UI skills. Adding more natural keyword variations and sharper differentiators would strengthen it.
Suggestions
Expand trigger terms to include common user variations like 'Tailwind', 'theme tokens', 'utility classes', 'CSS variables', 'styling system', '.css'
Add differentiating language to reduce conflict risk, e.g., specifying this is for Tailwind v4 specifically (not general CSS or other frameworks) and mentioning what it does NOT cover
| 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, responsive patterns) and 'when' (explicit 'Use when creating component libraries, implementing design systems, or standardizing UI patterns'). | 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', 'UI components', 'CSS variables', or 'utility classes' that users might naturally say. | 2 / 3 |
Distinctiveness Conflict Risk | The mention of 'Tailwind CSS v4' and 'design tokens' provides some distinctiveness, but terms like 'component libraries' and 'UI patterns' could overlap with general frontend or CSS skills. It could conflict with a generic Tailwind skill or a general UI/component skill. | 2 / 3 |
Total | 10 / 12 Passed |
Implementation
42%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, executable code examples for Tailwind CSS v4 design systems, which is its primary strength. However, it is severely bloated — most of the content is standard React component boilerplate that Claude already knows, with only the v4-specific CSS patterns (`@theme`, `@custom-variant`, `@utility`, OKLCH colors) being genuinely novel. The lack of progressive disclosure means ~500 lines of component code compete for context window space when only ~100 lines of v4-specific guidance are truly needed.
Suggestions
Extract full component implementations (Button, Card, Input, Dialog, ThemeProvider, Grid) into separate bundle files and reference them from SKILL.md with one-line descriptions
Trim the main SKILL.md to focus on v4-specific patterns: @theme configuration, @custom-variant, @utility directives, OKLCH colors, and migration differences — omit standard React patterns Claude already knows
Add validation steps to the migration checklist: e.g., 'Run build to verify no missing theme tokens', 'Check dark mode toggle in browser DevTools', 'Verify @theme variables appear in computed styles'
Remove the full ThemeProvider and LoginForm implementations — these are standard React patterns unrelated to Tailwind v4 specifics
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is extremely verbose at ~600+ lines. It includes extensive boilerplate code that Claude already knows how to write (React components, context providers, form handling with React Hook Form/Zod). The full ThemeProvider implementation, complete Card compound components, and LoginForm example are all things Claude can generate without instruction. The v4-specific CSS patterns are valuable but buried in massive amounts of standard React/TypeScript code. | 1 / 3 |
Actionability | All code examples are fully executable and copy-paste ready. The CSS configuration, TypeScript components, and utility functions are complete with proper imports, types, and usage examples. The migration checklist provides specific, actionable steps. | 3 / 3 |
Workflow Clarity | The migration checklist provides a clear sequence of steps, and the design token hierarchy is well-explained. However, there are no validation checkpoints — no guidance on how to verify the migration worked, no testing steps for dark mode, and no error recovery guidance if theme tokens don't resolve correctly. | 2 / 3 |
Progressive Disclosure | This is a monolithic wall of text with no bundle files to offload content. The full component implementations (Button, Card, Input, Label, Grid, Container, Dialog, ThemeProvider, ThemeToggle) should be in separate reference files. Everything is inline with no structure to navigate between overview and detailed implementations. | 1 / 3 |
Total | 7 / 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 (875 lines); consider splitting into references/ and linking | Warning |
Total | 10 / 11 Passed | |
- Repository
- Dicklesworthstone/pi_agent_rust
- Commit
99da384
- 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.