Guide for implementing Tailwind CSS - a utility-first CSS framework for rapid UI development. Use when styling applications with responsive design, dark mode, custom themes, or building design systems with Tailwind's utility classes.
67
Quality
66%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./claude/skills/tailwindcss/SKILL.mdQuality
Discovery
89%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 skill description that clearly identifies its domain (Tailwind CSS) and provides explicit 'Use when' guidance with relevant trigger terms. The main weakness is that it describes the framework conceptually rather than listing specific concrete actions Claude can perform with it. Adding specific implementation tasks would strengthen the specificity dimension.
Suggestions
Add specific concrete actions like 'configure tailwind.config.js', 'create responsive layouts', 'implement custom color palettes', or 'set up JIT mode' to improve specificity
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (Tailwind CSS) and mentions some capabilities (responsive design, dark mode, custom themes, design systems), but doesn't list concrete actions like 'configure tailwind.config.js', 'create component variants', or 'set up purge rules'. | 2 / 3 |
Completeness | Clearly answers both what ('Guide for implementing Tailwind CSS - a utility-first CSS framework for rapid UI development') and when ('Use when styling applications with responsive design, dark mode, custom themes, or building design systems with Tailwind's utility classes'). | 3 / 3 |
Trigger Term Quality | Good coverage of natural terms users would say: 'Tailwind CSS', 'utility-first', 'responsive design', 'dark mode', 'custom themes', 'design systems', 'utility classes'. These are terms developers naturally use when working with Tailwind. | 3 / 3 |
Distinctiveness Conflict Risk | Clear niche focused specifically on Tailwind CSS with distinct triggers. Unlikely to conflict with general CSS skills or other framework-specific skills due to explicit Tailwind mentions and utility-class terminology. | 3 / 3 |
Total | 11 / 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.
This skill is comprehensive and highly actionable with excellent executable examples, but severely undermines its utility through extreme verbosity. It reads like complete documentation rather than a skill file, explaining basic concepts Claude already knows and including exhaustive utility class references that belong in separate files or external documentation links.
Suggestions
Reduce content by 70-80% - remove explanations of what Tailwind is, basic CSS concepts, and exhaustive utility class listings that Claude can infer or reference from official docs
Split into multiple files: keep SKILL.md as a concise overview with links to UTILITIES.md, COMPONENTS.md, and TROUBLESHOOTING.md for detailed reference
Add validation steps to installation workflow: 'Verify setup by adding a test class and confirming styles apply'
Remove the 'When to Use This Skill' section entirely - this belongs in frontmatter description, not body content
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Extremely verbose at ~800+ lines. Explains concepts Claude already knows (what utility-first CSS is, what PDFs are equivalent explanations like 'Tailwind CSS is a utility-first CSS framework that enables rapid UI development'). Includes extensive basic examples that don't add unique value beyond standard documentation. | 1 / 3 |
Actionability | Provides fully executable code examples throughout - installation commands, configuration files, and copy-paste ready HTML/CSS snippets. Framework-specific setup instructions are concrete and complete. | 3 / 3 |
Workflow Clarity | Installation steps are clearly sequenced with numbered steps, but the document lacks validation checkpoints. No guidance on verifying Tailwind is working correctly after setup, or troubleshooting feedback loops beyond a brief section at the end. | 2 / 3 |
Progressive Disclosure | Monolithic wall of text with no references to external files. All content is inline despite being comprehensive enough to warrant splitting into separate reference files (e.g., component examples, utility reference, troubleshooting guide). | 1 / 3 |
Total | 7 / 12 Passed |
Validation
81%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 9 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
skill_md_line_count | SKILL.md is long (1134 lines); consider splitting into references/ and linking | Warning |
frontmatter_unknown_keys | Unknown frontmatter key(s) found; consider removing or moving to metadata | Warning |
Total | 9 / 11 Passed | |
b1b2fe0
Table of Contents
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.