tailwind-v4

Tailwind CSS v4 usage guide and v3-to-v4 differences. This skill should be used when writing, reviewing, or refactoring any Tailwind CSS code in this repo. Triggers on tasks involving Tailwind classes, @theme blocks, CSS-first configuration, or cleanup of v3-era syntax.

Quality

88%

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

Quality

Content

90%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.

A dense, highly actionable Tailwind v4 reference that respects the context window and gives concrete class spellings throughout. The main gap is progressive disclosure: the skill is reference-heavy yet ships as a single inline file with no bundle files to offload the bulk lookup tables.

Suggestions

Move the large v3->v4 renames table and the 'prefer generated utilities' table into a references/ file (e.g. RENAMES.md) and link to it from SKILL.md, keeping only the most common conversions inline.

Add a short 'When writing Tailwind, first check...' decision sequence at the top so the reference doubles as a crisp lookup workflow.

Dimension	Reasoning	Score
Conciseness	Lean, table-driven reference that assumes competence: no padded explanation of what Tailwind or CSS variables are, and every row earns its place. The single time-sensitive note ('4.3.3 at the time of writing') is correctly paired with a 'verify against the docs' instruction rather than left as stale guidance.	5 / 5
Actionability	Fully actionable: side-by-side 'Use / Never use' and 'Don't / Do' tables give copy-paste-ready class spellings (e.g. bg-(--var), grid-cols-15, field-sizing-content), plus explicit rules like 'never build fragments like `bg-${tone}-500`'. Specific examples cover the common cases.	5 / 5
Workflow Clarity	Clearly organized into labeled sections (CSS-first config, renames, prefer generated utilities, variants, behavior changes) that make lookups unambiguous, but it is reference material rather than a sequenced multi-step workflow, so it lacks explicit checkpoints. Not capped at 3 because no destructive or batch operation is involved; not a 5 because there is no explicit decision/lookup sequence.	4 / 5
Progressive Disclosure	Good single-file structure with well-delimited sections and no nested references. Not a 5 because the large lookup tables (v3->v4 renames, prefer-generated-utilities) are bulk reference content that could be split into one-level-deep reference files, and the skill ships no bundle files despite being reference-heavy.	4 / 5
	Total	18 / 20 Passed

Description

87%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-targeted description that explicitly states both what the skill does and when to use it, with concrete and version-specific trigger terms. Minor room to broaden trigger synonyms and itemize the concrete sub-tasks.

Suggestions

Add a natural synonym such as 'migrating from v3 to v4' or 'Tailwind config' to the trigger list to broaden keyword coverage.

Itemize the concrete actions (e.g. 'rename v3 classes, configure theme tokens, pick variants over hand-written CSS') instead of relying on the generic verbs 'writing, reviewing, refactoring'.

Dimension	Reasoning	Score
Specificity	Names the domain ('Tailwind CSS v4 usage guide and v3-to-v4 differences') and several concrete actions ('writing, reviewing, or refactoring any Tailwind CSS code'), but the actions are slightly generic verbs rather than itemized tasks. Not a 5 because it does not enumerate the specific sub-tasks (renames, theme tokens, variant selection) that the body actually covers.	4 / 5
Completeness	Explicitly answers both 'what' (v4 usage guide and v3-to-v4 differences) and 'when' ('This skill should be used when writing, reviewing, or refactoring... Triggers on tasks involving...') with concrete trigger phrases. Clearly meets the top anchor.	5 / 5
Trigger Term Quality	Includes natural phrases a user would say ('Tailwind classes', '@theme blocks', 'CSS-first configuration', 'cleanup of v3-era syntax') with good coverage. Not a 5 because it lacks common synonyms like 'migrating from v3 to v4' or 'Tailwind config' that a user might naturally say.	4 / 5
Distinctiveness Conflict Risk	Scoped to a clear niche (Tailwind CSS v4 in this repo) with distinct, version-specific triggers (@theme blocks, v3-era syntax cleanup) that are unlikely to fire for unrelated skills.	5 / 5
	Total	18 / 20 Passed

Validation

100%

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 — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository: mastra-ai/mastra
Path: .claude/skills/tailwind-v4/SKILL.md
Commit: d6ce34a

Reviewed: about 18 hours 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.