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

88%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No known issues

Quality

Content

77%

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

The skill is highly actionable with a clearly sequenced, validated setup workflow, but it carries padding (marketing metrics, meta instructions, inline version dates) and its progressive disclosure is undermined by inconsistent reference paths and a referenced templates/ directory that is absent from the bundle.

Suggestions

Standardize every reference path to the actual bundle directory `references/` (plural) — replace the singular `reference/common-gotchas.md` and `reference/dark-mode.md` occurrences so links resolve.

Either create the `templates/` directory with the listed files (index.css, components.json, vite.config.ts, theme-provider.tsx, utils.ts, tsconfig.app.json) or remove the "File Templates" section and the "Copy from: templates/theme-provider.tsx" pointer, since no such directory exists.

Cut the "Why This Matters (Real-World Results)" before/after block and the "Explicitly state you're using this skill" / "USER ACTION REQUIRED" meta instructions, and move the "Last Updated: 2025-12-04" and version numbers into a dedicated versions/deprecated section to tighten token efficiency.

Dimension	Reasoning	Score
Conciseness	Much of the body is lean and earns its tokens (the 4-step architecture, critical rules, executable code), but it is padded with a "Why This Matters (Real-World Results)" before/after marketing section, meta instructions like "Explicitly state you're using this skill" / "USER ACTION REQUIRED: Tell Claude to check this skill first", redundancy between "Known Issues This Skill Prevents" and the troubleshooting table, and inline time-sensitive info ("Last Updated: 2025-12-04", "Tailwind v4.1.17", "Nov 2025") not placed in a deprecated section.	2 / 3
Actionability	Core flows are fully executable and copy-paste ready: vite.config.ts, components.json with "config": "", the @theme inline CSS block, and bash commands ("bun add tailwindcss @tailwindcss/vite", "pnpm dlx shadcn@latest init", "rm tailwind.config.ts").	3 / 3
Workflow Clarity	Multi-step setup is clearly sequenced (Quick Start numbered 1-4 "Follow This Exact Order", the mandatory Four-Step Architecture) with a Complete Setup Checklist as a validation checkpoint and a symptom/cause/fix table for error recovery.	3 / 3
Progressive Disclosure	The "When to Load References" section is well-signaled and references are one level deep, but against the actual bundle the body mixes broken singular paths (`reference/common-gotchas.md`, `reference/dark-mode.md`) with correct plural ones (`references/...`), and the "File Templates" section plus line 225 point to a `templates/` directory that does not exist, so navigation is not clean enough for a 3.	2 / 3
	Total	10 / 12 Passed

Description

100%

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, concrete description that clearly states capabilities, provides explicit "Use when:" triggers in natural language, and occupies a distinct niche. The only blemish is a stray leading pipe character and some redundancy between the "Use when" and "Covers" lists, neither of which lowers any dimension.

Dimension	Reasoning	Score
Specificity	Lists many concrete actions and topics such as "initializing React projects with Tailwind v4", "implementing dark mode", "debugging CSS variable issues", "fixing theme switching", and "migrating from Tailwind v3" alongside a "Covers:" list naming the @theme inline pattern and CSS variable architecture.	3 / 3
Completeness	It explicitly answers both "what" ("Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React" plus a "Covers:" list) and "when" via an explicit "Use when:" trigger clause, so it is not capped at 2.	3 / 3
Trigger Term Quality	Natural trigger phrases users would actually say are well covered ("setting up shadcn/ui", "implementing dark mode", "fixing theme switching", "migrating from Tailwind v3", "color/theming problems"), going beyond jargon to common variations.	3 / 3
Distinctiveness Conflict Risk	The niche is very specific (Tailwind CSS v4 + shadcn/ui + Vite + React) with distinct triggers, making it unlikely to fire for an unrelated skill.	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
Commit: c4889f6

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