CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

75

Quality

92%

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

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.

An excellent reference-style body: lean, concrete, and immediately applicable, with strong do/don't tables and no filler. The weaker spots are the absence of any validation/feedback step (understandable for a non-destructive guide) and a fully inline structure where a couple of the larger tables could be offloaded to reference files.

Suggestions

Add a short validation cue, e.g. 'Confirm the pinned version with `grep tailwindcss package.json` before using utilities newer than the pin' — a cheap checkpoint that closes the workflow gap.

Consider moving the full v3→v4 rename table into references/renames.md with a pointer from SKILL.md to reduce inline weight, keeping only the most common renames in the body.

DimensionReasoningScore

Conciseness

The body is almost entirely dense do/don't tables and one-line behavior notes with no padding and no explanation of concepts Claude already knows. The one time-sensitive detail (the 4.3.3 version pin) is confined to a dedicated 'Version and sources' section that instructs verification ('Check the pinned version... verify against the docs instead of guessing') rather than an inline stale date, so it earns rather than spends tokens.

5 / 5

Actionability

Everything is directly executable: exact utility names ('bg-(--row-bg)', 'size-6', 'mask-b-from-80%'), full rename mappings in tables, and check-first rules ('Before writing a stylesheet rule... check for a variant'). A model reviewing or writing Tailwind code can apply every row verbatim, matching the copy-paste-ready anchor covering common cases.

5 / 5

Workflow Clarity

This is a reference guide rather than a sequential process, and its sections are logically ordered (config → renames → preferred utilities → variants → new capabilities → behavior changes) with check-first guidance ('Check the pinned version before using recent utilities', 'Before writing a stylesheet rule... check for a variant'). Not 5 because the under-50-line simple-skill exception does not apply and there are no explicit validation/feedback checkpoints (e.g., how to confirm the pinned version or test a migrated component); not 3 because no gaps make the guidance ambiguous.

4 / 5

Progressive Disclosure

Well-organized section headers with clear do/don't tables and external doc links, and no bundle files exist so nothing is mis-split. Not 5 because at ~109 lines all reference material lives inline in SKILL.md — the full rename table or the v4-capability list would also fit naturally in a references/ file; not 3 because the content is genuinely all high-frequency review guidance and the structure is easy to navigate.

4 / 5

Total

18

/

20

Passed

Description

95%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 description: third-person, concise, explicit what and when, with concrete and natural trigger terms. The only softness is the slightly generic phrase 'usage guide' standing in for the skill's actual capability areas.

Suggestions

Replace or expand the generic 'usage guide' phrase with 1-2 concrete capability phrases, e.g. 'Idiomatic Tailwind v4 utilities, @theme CSS-first configuration, and v3-to-v4 renames' to sharpen the 'what'.

DimensionReasoningScore

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', 'cleanup of v3-era syntax'), matching the several-specific-actions anchor. Not 5 because 'usage guide' is slightly generic and it does not enumerate the concrete capability areas (renames, @theme configuration, variant preference) the skill actually covers.

4 / 5

Completeness

Both parts are explicit: 'what' is stated first ('Tailwind CSS v4 usage guide and v3-to-v4 differences') and 'when' appears twice with concrete triggers ('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...'). This matches the anchor for a clear and explicit what AND when with concrete trigger phrases.

5 / 5

Trigger Term Quality

'Tailwind classes, @theme blocks, CSS-first configuration, or cleanup of v3-era syntax' plus 'writing, reviewing, or refactoring Tailwind CSS code' covers the natural phrasings users and Claude would use, including synonyms (refactoring/cleanup, classes/code). Anchor 4 would require missing natural terms, and none of significance are missing for this domain.

5 / 5

Distinctiveness Conflict Risk

The v4 version pin, v3-to-v4 framing, and @theme/CSS-first triggers carve out a clear niche that is unlikely to fire for other CSS or styling skills. Only a hypothetical dedicated 'Tailwind v3' skill would overlap, and the description's v4/differences language distinguishes even from that.

5 / 5

Total

19

/

20

Passed

Validation

100%

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