CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

tailwind-v4-shadcn

| Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React. Use when: initializing React projects with Tailwind v4, setting up shadcn/ui, implementing dark mode, debugging CSS variable issues, fixing theme switching, migrating from Tailwind v3, or encountering color/theming problems. Covers: @theme inline pattern, CSS variable architecture, dark mode with ThemeProvider, component composition, vite.config setup, common v4 gotchas, and production-tested patterns.

Quality

79%

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 ./plugins/tailwind-v4-shadcn/skills/tailwind-v4-shadcn/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 body is highly actionable with a well-sequenced setup workflow, but it is padded with marketing-style justification and triple-repeated rules, and its navigation is undermined by inconsistent reference paths and a nonexistent templates/ directory that the dark-mode and file-templates sections depend on.

Suggestions

Delete the '⚠️ BEFORE YOU START' section (the with/without-activation comparison tables and 'Known Issues This Skill Prevents' prose) — it repeats later content and adds no actionable guidance.

Fix reference paths ('reference/common-gotchas.md' → 'references/common-gotchas.md', used inconsistently 4 times) and either ship the referenced 'templates/' directory (theme-provider.tsx, index.css, utils.ts, etc.) or inline that content and drop the directory listing.

Consolidate the rules repeated across 'Four-Step Architecture', 'Critical Rules', and 'Complete Setup Checklist' into a single section, and add a quick verification step (e.g. 'run the dev server and toggle dark mode') after the destructive tailwind.config.ts deletion and CSS rewrite.

DimensionReasoningScore

Conciseness

There is genuinely dense, useful guidance (install commands, vite.config, four-step CSS architecture), but the '⚠️ BEFORE YOU START' section is pure padding ('Token usage: ~20k (70% reduction)', 'User confidence: Instant success', without/with-activation comparisons), and the same rules are stated three times across 'Four-Step Architecture', 'Critical Rules', and the setup checklist. Mostly efficient with clearly trimmable sections — matches anchor 3 rather than anchor 4's 'minor instances of over-explanation'.

3 / 5

Actionability

Install commands, vite.config.ts, components.json, the full CSS pattern, and a checklist are copy-paste ready — mostly executable per anchor 4. Falls short of 5 because the ThemeProvider section says only 'Copy from: templates/theme-provider.tsx' with no inline code, and that templates/ directory does not exist in the bundle, leaving a key step non-executable.

4 / 5

Workflow Clarity

'Quick Start (Follow This Exact Order)' and the mandated 'Four-Step Architecture' give a clear, explicitly ordered sequence, ending with a 'Test theme switching works in browser' checklist item — a validation checkpoint. Anchors 5's feedback loops (verify-then-fix-retry) are absent and the destructive 'rm tailwind.config.ts' step has no verification, keeping it at 4 rather than 5; well above anchor 3's implicit checkpoints.

4 / 5

Progressive Disclosure

The 'When to Load References' section is exemplary and all five references/*.md files exist — but the body mixes 'reference/' (wrong, 4 occurrences) with 'references/' (correct), and it advertises a 'templates/' directory with six files that does not exist in the bundle, plus an unverifiable 'dependency-upgrade' skill. The broken templates/ path is more than anchor 4's 'minor organization gaps', while references are in fact clearly signaled, so it sits between anchors 3 and 4.

3 / 5

Total

14

/

20

Passed

Description

88%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, explicit 'what' and 'when' clauses, concrete actions, and stack-specific triggers. The only weaknesses are a few missing natural trigger synonyms and a couple of broad theming triggers with minor overlap risk.

DimensionReasoningScore

Specificity

The description lists multiple concrete actions — 'initializing React projects with Tailwind v4, setting up shadcn/ui, implementing dark mode, debugging CSS variable issues, fixing theme switching, migrating from Tailwind v3' — plus a concrete 'Covers' list ('@theme inline pattern, CSS variable architecture... vite.config setup'). Coverage is comprehensive with no significant gaps; not below 4 because nothing concrete is missing from the action list.

5 / 5

Completeness

Both parts are explicit: 'what' ('Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React') and 'when' ('Use when: initializing... setting up... debugging... migrating...'), matching the anchor-5 example structure exactly. Neither 'when' is weakly implied nor 'what' vague, ruling out 4 and below.

5 / 5

Trigger Term Quality

Good natural trigger phrases: 'implementing dark mode', 'fixing theme switching', 'migrating from Tailwind v3', 'encountering color/theming problems'. A few natural phrasing variants users would say are missing (e.g. 'styles not applying', 'Tailwind colors broken'), so it falls just short of the comprehensive-with-synonyms anchor 5, but is clearly above anchor 3's 'missing common variations'.

4 / 5

Distinctiveness Conflict Risk

The niche is clear (Tailwind v4 + shadcn/ui + Vite + React) and most triggers are stack-specific, but broad triggers like 'encountering color/theming problems' or 'implementing dark mode' could also fire for non-Tailwind theming tasks — minor overlap with closely related CSS/theming skills. Mostly distinct rather than minimal-conflict, so 4 rather than 5; clearly above anchor 3's 'could still overlap with similar skills' as most triggers name the stack explicitly.

4 / 5

Total

18

/

20

Passed

Validation

81%

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

Validation — 13 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

skill_md_line_count

SKILL.md is long (575 lines); consider splitting into references/ and linking

Warning

metadata_version

'metadata.version' is missing

Warning

metadata_field

'metadata' should map string keys to string values

Warning

Total

13

/

16

Passed

Repository

secondsky/claude-skills

Path

plugins/tailwind-v4-shadcn/skills/tailwind-v4-shadcn/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.