tailwind-css-v4

Reference for Tailwind CSS v4 syntax and the differences from v3.x. Use when configuring Tailwind (CSS-first @theme config, @import "tailwindcss"), using new v4 features (container queries, 3D transforms, gradients, composable variants, @utility/@custom-variant/@plugin), or migrating v3 patterns. This repo is on v4 — do NOT emit v3 syntax like tailwind.config.js, @tailwind directives, or bg-gradient-*.

Quality

85%

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

78%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 highly actionable, well-organized delta reference that teaches v4 correctly with executable examples throughout. Its main weaknesses are mild token bloat from exhaustive listings that could be trimmed or offloaded, and a fully monolithic structure with no reference files despite content that would split naturally.

Suggestions

Move the exhaustive theme-namespace listing (the --color-* through --animate-* block) and the Advanced Configuration sections into a references/theme-namespaces.md file, keeping only the namespace format and a few examples inline in SKILL.md.

Add a short ordered v3→v4 migration checklist (replace @tailwind directives with @import, swap tailwind.config.js for @theme or @config, rename renamed utilities) ending with a build/render verification step.

Trim entries that restate knowledge Claude already has (e.g., package-name lists and default-style changes could be condensed to a table) to reduce token cost without losing the v4 deltas.

Dimension	Reasoning	Score
Conciseness	The body is a dense, delta-focused reference with no prose padding and copy-paste code blocks, but the exhaustive 18-entry theme-namespace listing and some v4 facts already likely in training data could be trimmed — minor over-inclusion rather than lean throughout.	4 / 5
Actionability	Fully executable, copy-paste-ready CSS for every directive (@theme, @config, @utility, @custom-variant, @plugin, prefix(tw), @reference) plus concrete old→new utility mappings ('bg-gradient-*' → 'bg-linear-45', 'shadow-sm' → 'shadow-xs') covering the common v4 cases.	5 / 5
Workflow Clarity	As a reference skill with no destructive or batch operations, no validation cap applies; sections are clearly organized and Old/New syntax pairs act as implicit checkpoints. However, there is no explicit migration sequence (e.g., step-by-step v3→v4 upgrade with a build-verification checkpoint), which keeps it below 5.	4 / 5
Progressive Disclosure	Section structure is good, but the entire ~220-line reference is inlined in SKILL.md with no bundle files at all; the full theme-namespace listing and Advanced Configuration sections are exactly the material that belongs in one-level-deep reference files, fitting the 'content that should be separate is inline' anchor.	3 / 5
	Total	16 / 20 Passed

Description

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

An exemplary description: third-person, concise, with an explicit 'Use when' clause enumerating concrete triggers and a distinctive v4-only guardrail. The only minor gap is that general utility-class authoring is not listed as a trigger.

Dimension	Reasoning	Score
Specificity	The description enumerates multiple concrete capabilities — 'CSS-first @theme config', '@import "tailwindcss"', 'container queries, 3D transforms, gradients, composable variants', '@utility/@custom-variant/@plugin', and 'migrating v3 patterns' — giving comprehensive, non-generic coverage of the skill's scope.	5 / 5
Completeness	It explicitly answers both parts: what ('Reference for Tailwind CSS v4 syntax and the differences from v3.x') and when ('Use when configuring Tailwind..., using new v4 features..., or migrating v3 patterns'), with a concrete repo-specific guardrail on top.	5 / 5
Trigger Term Quality	Strong natural triggers ('configuring Tailwind', 'migrating v3 patterns', 'tailwind.config.js', '@tailwind directives', 'bg-gradient-*'), but coverage is skewed toward config/feature/migration tasks; everyday phrasing like 'styling with Tailwind' or 'Tailwind classes/utilities' is missing, so a few natural terms are absent.	4 / 5
Distinctiveness Conflict Risk	A clear niche (Tailwind v4 vs v3 in a repo pinned to v4) with an explicit negative trigger ('This repo is on v4 — do NOT emit v3 syntax like tailwind.config.js, @tailwind directives, or bg-gradient-*'), making wrong-skill triggering very unlikely.	5 / 5
	Total	19 / 20 Passed

Validation

93%

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

Validation for skill structure

Criteria	Description	Result
metadata_version	'metadata.version' is missing	Warning

	Total	15 / 16 Passed

Repository: joe-bell/cva
Path: .agents/skills/tailwind-css-v4/SKILL.md
Commit: 638844f

Reviewed: 2 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.