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 communicates both what the skill does and when to use it, with a proper 'Use when' clause. Its main weakness is moderate trigger term coverage—it could benefit from more natural user-facing keywords and variations. There's also some overlap risk with general frontend or component-building skills.
Suggestions
Add more natural trigger term variations such as 'Tailwind', 'theme', 'styling tokens', 'CSS variables', 'UI kit', or '.css' to improve discoverability.
Sharpen distinctiveness by clarifying what differentiates this from general CSS or component-building skills, e.g., 'Use when specifically building or maintaining a Tailwind-based design system, 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 an explicit 'Use when' clause. | 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' adds specificity, but 'component libraries' and 'UI patterns' could overlap with general frontend/React component skills or other CSS framework skills. The scope is somewhat broad for a design system 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, production-ready code for building Tailwind v4 design systems, which is its primary strength. However, it is severely over-long for a SKILL.md file, embedding complete component implementations that Claude could generate from brief pattern descriptions. The content would benefit enormously from splitting into a concise overview with references to detailed component files.
Suggestions
Extract full component implementations (Button, Card, Input, Dialog, ThemeProvider, Grid) into separate reference files and link to them from SKILL.md with brief pattern descriptions
Reduce the CSS theme block to a minimal example (3-4 tokens) with a note that the full token set should be project-specific, rather than listing 20+ OKLCH color values
Add validation steps to the migration checklist (e.g., 'Run build to verify no config errors', 'Check dark mode toggle works', 'Verify all custom colors render correctly')
Condense the Quick Start to ~20 lines showing the essential @import, @theme with 2-3 tokens, and @custom-variant pattern, moving the full theme to a reference file
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is extremely verbose at ~500+ lines. It includes full component implementations (Card with 6 sub-components, ThemeProvider, Dialog, Form with validation) that Claude can generate from minimal guidance. The complete OKLCH color values for both light and dark themes, full keyframe definitions, and boilerplate-heavy React components bloat the token budget significantly. A fraction of this content with patterns described concisely would suffice. | 1 / 3 |
Actionability | Every pattern includes fully executable, copy-paste ready code with TypeScript types, proper imports, and usage examples. The CSS configuration, component implementations, and utility functions are all complete and production-ready. | 3 / 3 |
Workflow Clarity | The v3-to-v4 migration checklist provides a clear sequence, and the content is well-organized into patterns. However, there are no validation checkpoints - no steps to verify the theme is working, no testing guidance for dark mode, and no error recovery for common migration issues. | 2 / 3 |
Progressive Disclosure | This is a monolithic wall of content with no references to separate files. The full component implementations (Button, Card, Input, Label, Grid, Container, Dialog, ThemeProvider, ThemeToggle) should be in separate reference files. The CSS theme configuration, component patterns, and migration guide could each be their own documents linked from a concise overview. | 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
47823e3
- 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.