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

69%

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

Fix and improve this skill with Tessl

tessl review fix ./plugins/tailwind-v4-shadcn/skills/tailwind-v4-shadcn/SKILL.md

Quality

Content

53%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 content is highly actionable with executable code and a clear quick-start sequence, but it suffers from verbosity, marketing-style padding, and structural problems — inconsistent and broken reference paths plus a missing templates/ directory that the body repeatedly cites. Destructive steps also lack explicit validation checkpoints.

Suggestions

Remove the 'BEFORE YOU START (READ THIS!)' and 'Why This Matters (Real-World Results)' sections — they are marketing/padding that explains concepts and results Claude does not need, and they bloat the token budget.

Fix the inconsistent reference paths (pick 'references/' and use it everywhere, including the 'reference/common-gotchas.md' occurrences in the BEFORE YOU START and Common Issues sections) and either create the cited 'templates/' directory or stop referencing it.

Add an explicit validation/verification step after destructive and batch operations (e.g., after 'rm tailwind.config.ts' and 'pnpm dlx shadcn init', run a build or check that bg-primary resolves) so the workflow includes a validate→fix→retry loop.

Dimension	Reasoning	Score
Conciseness	The body is noticeably verbose: it opens with an attention-grabbing 'BEFORE YOU START' section, a 'Why This Matters (Real-World Results)' before/after table, marketing-style status banners ('Production Ready ✅', '70% reduction'), and restates rules already covered in the Four-Step Architecture under a separate 'Critical Rules' section. This matches the 'noticeably verbose; several unnecessary explanations or padded sections' anchor rather than the mostly-efficient 3.	2 / 5
Actionability	It provides copy-paste-ready, executable guidance throughout — concrete install commands, complete vite.config.ts, components.json snippets, full CSS blocks for the four-step architecture, and a troubleshooting table mapping symptom→cause→fix. This matches the 'fully executable; copy-paste ready code' anchor.	5 / 5
Workflow Clarity	The Quick Start is a clearly numbered sequence and there is a setup checklist, but validation/verification steps are implicit at best — the destructive 'rm tailwind.config.ts' and 'Delete tailwind.config.ts' steps and batch init have no validate-then-proceed feedback loop. Per the rubric's feedback-loop cap for destructive/batch config operations, this caps at 3.	3 / 5
Progressive Disclosure	Structure issues pull this down: reference paths are inconsistent ('reference/common-gotchas.md' vs 'references/dark-mode.md'), the body repeatedly points to a 'templates/' directory and a 'dependency-upgrade' skill and 'templates/theme-provider.tsx' that do not exist in the bundle, and a large amount of CSS rule material that belongs in references is inlined in the Four-Step Architecture and Critical Rules sections. This matches 'minimal structure; references are buried / inconsistent' rather than the better-organized 3.	2 / 5
	Total	12 / 20 Passed

Description

85%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 is specific, trigger-rich, and clearly answers both what and when with an explicit 'Use when:' clause and a focused tooling niche. Its main weakness is verbosity in the 'Covers:' portion, which pads the description without adding trigger value.

Suggestions

Trim the trailing 'Covers:' list — the 'Use when:' clause already conveys triggers; the verbose 'Covers:' section adds length without improving discoverability.

Consider consolidating overlapping 'when' phrases (e.g., 'debugging CSS variable issues' and 'fixing theme switching' both map to the common-gotchas path) to tighten the trigger clause.

Move the metadata keywords (already exhaustive) out of the description so the description stays a concise trigger-focused sentence.

Dimension	Reasoning	Score
Specificity	The description lists numerous 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'), matching the 'several specific actions; minor gaps' anchor rather than the comprehensive 5.	4 / 5
Completeness	It answers both 'what' (production-tested setup covering listed patterns) and 'when' via the explicit 'Use when:' clause, but the 'when' is a long clause list that could be tighter and more trigger-focused; sits clearly above 3, below a perfectly crisp 5.	4 / 5
Trigger Term Quality	It covers natural terms and synonyms users would say — 'dark mode', 'theme switching', 'colors not working', 'theme not applying', 'migrating from Tailwind v3', plus technical tokens like '@theme inline' and 'CSS variables' — achieving comprehensive natural keyword coverage.	5 / 5
Distinctiveness Conflict Risk	It carves a clear niche — Tailwind v4 + shadcn/ui + Vite + React theming — with distinctive triggers (@theme inline, hsl() wrapper, components.json) unlikely to fire for unrelated skills, matching the 'clear niche with distinct triggers' anchor.	5 / 5
	Total	18 / 20 Passed

Validation

81%

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 — 13 / 16 Passed

Validation for skill structure

Criteria	Description	Result
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
Commit: ad16332

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