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?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./claude/skills/tailwindcss/SKILL.md

Quality

Content

53%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body is highly actionable with abundant copy-paste-ready code, but it is severely over-long for a SKILL.md, re-teaching Tailwind utility classes Claude already knows, and makes no use of progressive disclosure - everything is crammed into one monolithic file. Setup workflows are sequenced but lack any validation checkpoints.

Suggestions

Split the reference material into one-level-deep bundle files (e.g., references/utilities.md, references/components.md, references/frameworks.md) and keep SKILL.md as a concise overview with pointers, drastically cutting inline token volume.

Remove concept explanations Claude already knows - the 'Core Concepts' benefits list, the color-scale legend, and exhaustive per-utility HTML examples - keeping only version-specific or non-obvious guidance like the @tailwindcss/vite setup, @theme, @utility, and @custom-variant directives.

Add a validation checkpoint to the setup workflow (e.g., 'After Step 4, confirm a Tailwind class renders correctly before proceeding') so the sequence has an explicit feedback loop.

Dimension	Reasoning	Score
Conciseness	The 1134-line body extensively re-documents utility-class syntax (display, flex, grid, spacing, typography, colors, borders, shadows, states, animations, component galleries) that Claude already knows, plus explanatory padding like the 'Core Concepts' benefits list and the color-scale legend; the genuinely valuable version-specific setup (Vite plugin, @theme, @custom-variant) is a small fraction of the total.	2 / 5
Actionability	It provides copy-paste-ready, executable code throughout: install commands for npm/pnpm/yarn, vite.config.ts, postcss.config.js, @theme CSS blocks, and concrete HTML/JSX/Vue/Svelte examples covering the common cases, matching the fully-executable anchor.	5 / 5
Workflow Clarity	The 'Installation & Setup' section gives a clear Step 1-4 sequence and the closing 'Implementation Checklist' provides ordering, but there are no validation checkpoints or feedback loops (e.g., 'verify the dev server renders Tailwind classes'), matching the score-3 anchor of sequence present with checkpoints missing.	3 / 5
Progressive Disclosure	No bundle files exist (references/, scripts/, assets/ all absent) and the entire reference manual - utility-class catalog, component gallery, framework integrations - is inlined into a single 1134-line SKILL.md with no one-level-deep external references, matching the anchor where content that clearly belongs in separate files is inlined.	2 / 5
	Total	12 / 20 Passed

Description

78%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong, well-structured description that clearly states both what the skill does and when to use it, with good natural trigger terms and a distinct Tailwind-specific niche. Its main weakness is that the named actions ('implementing', 'styling') are high-level rather than concrete, and some trigger scenarios could overlap with general CSS skills.

Dimension	Reasoning	Score
Specificity	The description names the domain ('Tailwind CSS') and a few high-level actions ('implementing', 'styling', 'building design systems'), but these are generic rather than the concrete atomic actions (e.g., 'fill forms', 'merge documents') seen in the score-4 anchor.	3 / 5
Completeness	It explicitly answers both 'what' ('Guide for implementing Tailwind CSS - a utility-first CSS framework for rapid UI development') and 'when' with a concrete 'Use when...' clause listing specific trigger scenarios, matching the score-5 anchor.	5 / 5
Trigger Term Quality	It includes natural user-facing terms ('Tailwind CSS', 'responsive design', 'dark mode', 'custom themes', 'design systems', 'utility classes') that users would actually say, matching the good-coverage anchor; no file-extension synonyms apply to this framework, so it stops short of a 5.	4 / 5
Distinctiveness Conflict Risk	Tailwind CSS is a clear, specific niche with minimal conflict risk, but the trigger phrases ('responsive design', 'dark mode', 'custom themes') are broad enough to overlap with general CSS/styling skills, so it is mostly distinct with minor overlap rather than fully conflict-free.	4 / 5
	Total	16 / 20 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 — 13 / 16 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
relative_links	Relative link issues: 1 missing	Warning

	Total	13 / 16 Passed

Repository: einverne/dotfiles
Path: claude/skills/tailwindcss/SKILL.md
Commit: 7d18cf4

Reviewed: 4 days 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.