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/@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

91%

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

82%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 with executable CSS examples and concrete breaking-change mappings, well-organized by topic. Its main weaknesses are a monolithic single-file structure with no progressive split and minor over-explanation in a few spots.

Suggestions

Move the full --* namespace catalog (the ~20 bullet list under Theme Configuration) into a references/ file and link to it from SKILL.md to improve progressive disclosure.

Add a short, explicitly sequenced v3→v4 migration checklist (e.g., 1. replace @tailwind with @import, 2. move config to @theme, 3. rename shadow/blur/rounded utilities, 4. verify build) to raise workflow clarity.

Trim explanatory restatements like 'Configuration is now done in CSS instead of JavaScript' since the @theme example already conveys this.

Dimension	Reasoning	Score
Conciseness	Mostly lean and dense with executable CSS snippets and tight bullets that earn their place, but a few explanatory lines ('Configuration is now done in CSS instead of JavaScript') and the long inline namespace listing could be trimmed or moved. Not a 5 because there is minor over-explanation; not a 3 because the bulk is v4-specific deltas Claude would not already know.	4 / 5
Actionability	Provides copy-paste-ready, executable CSS throughout — @theme blocks, @import/@config, @utility/@variant/@plugin, prefix() syntax, and @apply in Vue/Svelte — plus concrete before→after breaking-change mappings (shadow-sm → shadow-xs, bg-opacity-* → bg-black/50) covering the common cases.	5 / 5
Workflow Clarity	As a reference/lookup skill with no destructive or batch operations, its single purpose is unambiguous and content is well-organized by category (Core Changes, New Features, Breaking Changes, etc.). Not a 5 because the v3→v4 migration material is presented as a reference list rather than an explicit sequenced migration workflow.	4 / 5
Progressive Disclosure	Well-structured with clear section headers and easy in-file navigation, but at ~218 lines it is monolithic with no bundle files (references/, scripts/, assets/ are absent) — the namespace catalog and Advanced Configuration sections could be split into one-level-deep reference files. Not a 3 because organization is genuinely good; not a 5 because nothing is split out.	4 / 5
	Total	17 / 20 Passed

Description

100%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, concrete description that clearly states what the skill provides and when to use it, with version-scoped trigger terms and explicit anti-pattern guidance to avoid v3 drift. Every dimension is well-satisfied.

Dimension	Reasoning	Score
Specificity	Names the domain (Tailwind CSS v4) and lists multiple concrete actions with specifics — 'configuring Tailwind (CSS-first @theme config, @import "tailwindcss")', 'using new v4 features (container queries, 3D transforms, gradients, composable variants, @utility/@variant/@plugin)', and 'migrating v3 patterns' — giving comprehensive coverage.	5 / 5
Completeness	Explicitly answers both '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 concrete trigger phrases.	5 / 5
Trigger Term Quality	Covers the natural terms a Tailwind user would actually say — 'Tailwind CSS v4', 'configuring Tailwind', 'container queries', '3D transforms', 'gradients', 'migrating v3 patterns', plus v3 anti-patterns like 'tailwind.config.js', '@tailwind directives', 'bg-gradient-*'.	5 / 5
Distinctiveness Conflict Risk	Scoped tightly to Tailwind CSS v4 with version-specific triggers and explicit negative guidance ('do NOT emit v3 syntax like tailwind.config.js, @tailwind directives, or bg-gradient-*'), giving it a clear niche with minimal conflict risk.	5 / 5
	Total	20 / 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: b06a7c8

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