CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

tailwind-4

Tailwind CSS 4 patterns and best practices. Trigger: When styling with Tailwind - cn(), theme variables, no var() in className.

56

Quality

71%

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

Fix and improve this skill with Tessl

tessl review fix ./curated/tailwind-4/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

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

The core guidance — the decision tree, the var()/hex prohibitions with ✅/❌ examples, cn() usage rules, and library color constants — is excellent, executable, and clearly the skill's real value. However, nearly half the body is a generic Tailwind cheat sheet Claude does not need, inflating token cost and burying the project-specific conventions.

Suggestions

Delete or move the "Common Patterns" section (Flexbox, Grid, Spacing, Typography, Borders, States, Responsive, Dark Mode) out of SKILL.md — it is standard Tailwind knowledge Claude already has and roughly doubles the skill's token footprint.

If the patterns are kept at all, place them in a references/ file (e.g. "See [PATTERNS.md](references/patterns.md)") so SKILL.md stays a lean overview with one-level-deep disclosure.

Add a short note on when tailwind-merge conflicts need manual resolution, since the cn() section assumes merge behavior without covering the failure case.

DimensionReasoningScore

Conciseness

The ~90-line "Common Patterns" section (Flexbox, Grid, Spacing, Typography, Borders, States, Responsive, Dark Mode) restates standard Tailwind knowledge Claude already has, which is exactly the padding the rubric penalizes. The genuinely valuable parts — the decision tree, critical rules, cn() usage, and chart constants — are lean, but the redundant reference material drags the whole body to "several unnecessary padded sections" (anchor 2) rather than anchor 3's single-instance looseness.

2 / 5

Actionability

Every rule is expressed as copy-paste-ready TypeScript/JSX with imports included (the cn() utility), and the ❌/✅ contrast pairs make the correct action unambiguous. The Styling Decision Tree gives a concrete selection rule, matching anchor 5's "fully executable, covers common cases"; it is not anchor 4 because there are no meaningful gaps in the covered cases.

5 / 5

Workflow Clarity

This is a decision/reference skill, and the "Styling Decision Tree" up top sequences the decision (class exists → dynamic → conditional → static → library) clearly, which is the effective workflow. It holds at anchor 4 rather than 5 because the skill's simple-skill exception is undercut by its 190-line length and there are no checkpoints for the trickier branches (e.g., when tailwind-merge conflicts are ambiguous); it stays above anchor 3 because the sequence itself is fully explicit.

4 / 5

Progressive Disclosure

Sections are well-organized with clear headers, but the body is ~190 lines with no bundle files, and the bulk-standard "Common Patterns" reference material is inlined where it clearly belongs in a separate reference file per anchor 3 ("content that should be separate is inline"). It is not anchor 4 because roughly half the body is reference material a well-disclosed skill would move out of SKILL.md.

3 / 5

Total

14

/

20

Passed

Description

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

The description has a strong, explicit trigger clause with genuinely natural keywords, but the capability statement is generic ("patterns and best practices") and never conveys what the skill concretely does. It is serviceable for routing but undersells the skill's specific content.

Suggestions

Replace "Tailwind CSS 4 patterns and best practices" with the concrete actions the skill performs, e.g. "Applies project Tailwind CSS 4 conventions: choosing between className, cn(), and style props; using semantic theme classes instead of var() or hex values in className."

Broaden trigger coverage with natural variations users say, such as "utility classes", "responsive styling", or "tailwind-merge", to lift trigger_term_quality toward 5.

State the outcome of following the skill (consistent theming, no arbitrary color values) so the 'what' half is as explicit as the 'when' half.

DimensionReasoningScore

Specificity

The description names the domain ("Tailwind CSS 4 patterns and best practices") but describes no concrete actions — "patterns and best practices" is generic padding with no verbs. The trigger fragment mentions concrete topics ("cn(), theme variables, no var() in className") but these are nouns, not capability actions, so it does not rise to anchor 3's "1-2 concrete actions".

2 / 5

Completeness

Both parts are present: the 'what' ("Tailwind CSS 4 patterns and best practices") and an explicit trigger clause ("Trigger: When styling with Tailwind - cn(), theme variables, no var() in className"), so it clears the cap for missing trigger guidance. It is not a 5 because the 'what' half is vague — it never states what the skill actually does with those patterns.

4 / 5

Trigger Term Quality

"When styling with Tailwind" is a natural user phrase, and the terms cn(), theme variables, var(), and className are ones users would actually say when needing this skill. It sits between anchor 3 ("some relevant keywords but missing common variations") and anchor 5 (comprehensive synonyms); natural variations like "utility classes", "responsive", or "CSS classes" are missing, matching anchor 4.

4 / 5

Distinctiveness Conflict Risk

Tailwind CSS 4 styling conventions with cn()/theme-variable rules form a clear niche that would not fire for unrelated skills. Minor overlap risk remains with generic CSS or design-system skills where "styling" alone could match, keeping it below anchor 5's "minimal conflict risk".

4 / 5

Total

14

/

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

Gentleman-Programming/Gentleman-Skills

Path

curated/tailwind-4/SKILL.md

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.