CtrlK
BlogDocsLog inGet started
Tessl Logo

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-*.

72

Quality

90%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

80%

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

A well-organized, highly actionable reference: concrete utility names and executable CSS throughout with no concept fluff. Its weaknesses are the absence of an explicit migration workflow with a verification step, and a single-file structure that a reference of this size would benefit from splitting into navigable sub-files.

Suggestions

Add a short 'Migrating from v3' workflow with explicit steps and a verification checkpoint (e.g. 'after replacing @tailwind directives with @import, grep the codebase for residual tailwind.config.js / @tailwind / bg-gradient-* usages before finishing') to lift workflow clarity.

Split the detailed namespace catalogue (the --color-* ... --animate-* list) and the breaking-change rename table into one-level-deep reference files (e.g. references/namespaces.md, references/migration.md) linked from SKILL.md so the overview stays lean.

DimensionReasoningScore

Conciseness

Lean reference style — dense bullets and copy-paste CSS blocks with no explanatory padding of concepts Claude already knows; every line states a concrete v4 fact or syntax the model would not reliably recall.

3 / 3

Actionability

Provides concrete, executable guidance throughout: valid CSS blocks (e.g. '@theme { ... }', '@utility tab-4 { ... }', '@variant dark (...)') and specific utility names like 'bg-linear-45', 'rotate-x-*', and 'field-sizing-content' that are copy-paste ready.

3 / 3

Workflow Clarity

Sections are logically sequenced (Core Changes → Theme → New Features → Breaking Changes), but there is no multi-step migration workflow with validation checkpoints, and the v3→v4 migration task — where emitting wrong syntax is a real failure mode — lacks an explicit verify step. It is above a 1 because structure is clear, but not a 3 because no feedback loop is present.

2 / 3

Progressive Disclosure

The skill is a single ~210-line monolithic SKILL.md with no references/, scripts/, or assets/ bundle files and no external links. Section organization is good (so above a 1), but at this length detailed material such as the full namespace catalogue and breaking-change mappings is inline rather than split into one-level-deep reference files; the under-50-line simple-skill exception does not apply.

2 / 3

Total

10

/

12

Passed

Description

100%

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 description: it states concrete capabilities, gives an explicit 'Use when' trigger with version-specific keywords, and pins the niche tightly. It also reinforces correct usage with a clear negative constraint against v3 patterns.

DimensionReasoningScore

Specificity

Names multiple concrete actions such as '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', matching the 'lists multiple specific concrete actions' anchor.

3 / 3

Completeness

Explicitly answers both 'what' ('Reference for Tailwind CSS v4 syntax and the differences from v3.x') and 'when' via an explicit 'Use when ...' clause covering configuration, new features, and migration.

3 / 3

Trigger Term Quality

Includes natural terms a user would say when they need this skill — 'Tailwind CSS v4', 'configuring Tailwind', 'container queries', '3D transforms', 'migrate v3 patterns' — giving good coverage rather than generic jargon.

3 / 3

Distinctiveness Conflict Risk

Occupies a clear niche (Tailwind CSS v4 specifically) with distinct, version-pinned triggers and an explicit anti-trigger ('do NOT emit v3 syntax'), making conflict with other skills unlikely.

3 / 3

Total

12

/

12

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

Total

15

/

16

Passed

Repository
joe-bell/cva
Reviewed

Table of Contents

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.