tailwindcss

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.

Quality

66%

Does it follow best practices?

Impact

—

No eval scenarios have been run

Securityby

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./claude/skills/tailwindcss/SKILL.md

Quality

Content

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

Description

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

Validation

81%

Warnings & errors only

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

Repository: einverne/dotfiles
Commit: b1b2fe0

Reviewed: 4 months ago

Table of Contents

Discovery Implementation Validation

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.