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.
Install with Tessl CLI
npx tessl i github:Dicklesworthstone/pi_agent_rust --skill tailwind-design-system82
Does it follow best practices?
If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:
npx tessl skill review --optimize ./path/to/skillValidation for skill structure
Discovery
92%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 strong skill description that clearly articulates capabilities and usage triggers. It uses third person voice correctly, includes specific technology (Tailwind CSS v4), and provides an explicit 'Use when...' clause. The only weakness is potential overlap with other frontend/styling skills, though the Tailwind v4 specificity helps mitigate this.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: 'Build scalable design systems', 'design tokens', 'component libraries', and 'responsive patterns'. Specifies the technology (Tailwind CSS v4) and concrete deliverables. | 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 triggers. | 3 / 3 |
Trigger Term Quality | Includes natural keywords users would say: 'Tailwind CSS', 'design tokens', 'component libraries', 'responsive patterns', 'design systems', 'UI patterns'. These are terms developers naturally use when discussing this domain. | 3 / 3 |
Distinctiveness Conflict Risk | While Tailwind CSS v4 is specific, terms like 'component libraries' and 'UI patterns' could overlap with general frontend or React component skills. The design system focus helps but isn't fully distinct from other CSS/styling skills. | 2 / 3 |
Total | 11 / 12 Passed |
Implementation
64%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a highly actionable skill with excellent, production-ready code examples for Tailwind v4 design systems. The main weaknesses are its length (could benefit from splitting into overview + reference files) and lack of explicit validation/debugging guidance for the migration workflow. The v3-to-v4 migration table is particularly well done.
Suggestions
Split detailed patterns (CVA components, compound components, form components, etc.) into a separate PATTERNS.md file, keeping only 1-2 examples in the main skill
Add a 'Verification' section with steps to confirm the theme is working: checking CSS variables in DevTools, testing dark mode toggle, validating color tokens render correctly
Move the extensive CSS theme configuration to a separate THEME-REFERENCE.md file, keeping only a minimal quick-start example inline
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is comprehensive but includes some unnecessary explanations (e.g., explaining what OKLCH is for 'better color perception'). The migration table and v3/v4 comparison are efficient, but the extensive code examples could be trimmed or moved to separate reference files. | 2 / 3 |
Actionability | Excellent actionability with fully executable, copy-paste ready code examples throughout. Every pattern includes complete TypeScript/CSS implementations with proper imports, types, and usage examples. | 3 / 3 |
Workflow Clarity | The migration checklist provides clear steps, but the overall document lacks explicit validation checkpoints. For a design system skill involving CSS configuration changes, there's no guidance on verifying the theme is working correctly or debugging common issues. | 2 / 3 |
Progressive Disclosure | The document is quite long (~500 lines) with all content inline. Patterns 1-6 and Advanced v4 Patterns could be split into separate reference files. The structure is good with clear sections, but the monolithic nature makes it harder to navigate. | 2 / 3 |
Total | 9 / 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 | |
- 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.