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

81%

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

Quality

Content

62%Weight 40%Scale 1-3

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

The body is well-structured and largely actionable with a clear workflow and checklist, but it is verbose with some redundancy and promotional padding, and its reference/path hygiene is inconsistent (singular vs plural folder names, a missing templates/ directory).

Suggestions

Tighten conciseness by removing the 'Why This Matters (Real-World Results)' stats block and the meta instruction to announce skill usage, and de-duplicate Critical Rules against the Four-Step Architecture.

Fix reference path consistency: standardize on the actual 'references/' folder (the body mixes 'reference/' and 'references/'), and either add the missing 'templates/' directory or inline the ThemeProvider/ModeToggle code.

Provide the ThemeProvider and ModeToggle component code inline (or in a real reference file) rather than pointing at a non-existent templates/theme-provider.tsx, so the dark mode step is fully actionable.

Dimension	Reasoning	Score
Conciseness	Mostly efficient and free of basic-concept padding, but ~545 lines with redundancy (the Critical Rules section restates the Four-Step Architecture) and promotional fluff like the 'Why This Matters (Real-World Results)' token-usage table and the meta 'Explicitly state you're using this skill' instruction.	2 / 3
Actionability	Strong concrete code for the core setup (vite.config.ts, index.css, components.json, install commands), but key pieces are deferred rather than provided inline — the ThemeProvider is 'Copy from: templates/theme-provider.tsx' and that templates/ directory does not exist in the bundle.	2 / 3
Workflow Clarity	Clear sequenced Quick Start (1-4) and Four-Step Architecture, with a Complete Setup Checklist acting as a verification checkpoint and a Common Issues & Quick Fixes table providing error-recovery feedback.	3 / 3
Progressive Disclosure	Good one-level-deep reference structure with a helpful 'When to Load References' navigation section, but paths are inconsistent ('reference/' singular vs the actual 'references/' folder) and the referenced 'templates/' directory is absent from the bundle.	2 / 3
	Total	9 / 12 Passed

Description

100%Weight 40%Scale 1-3

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, complete, and well-targeted: it names concrete actions, includes explicit 'Use when' triggers with natural keywords, and occupies a clear niche. Voice is appropriately third person.

Dimension	Reasoning	Score
Specificity	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') rather than vague language.	3 / 3
Completeness	Explicitly answers both what ('Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React' plus a 'Covers:' list) and when ('Use when: ...') with explicit triggers.	3 / 3
Trigger Term Quality	Covers natural terms users would say ('Tailwind v4', 'shadcn/ui', 'dark mode', 'theme switching', 'migrating from Tailwind v3', 'color/theming problems') with good variation; uses third person voice.	3 / 3
Distinctiveness Conflict Risk	Niche is clearly scoped to Tailwind v4 + shadcn/ui + Vite + React with distinct triggers, making conflict with other skills unlikely.	3 / 3
	Total	12 / 12 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: 61cb874

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