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. Keywords: Tailwind v4, shadcn/ui, @tailwindcss/vite, @theme inline, dark mode, CSS variables, hsl() wrapper, components.json, React theming, theme switching, colors not working, variables broken, theme not applying, @plugin directive, typography plugin, forms plugin, prose class, @tailwindcss/typography, @tailwindcss/forms
83
77%
Does it follow best practices?
Impact
92%
1.55xAverage score across 3 eval scenarios
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./plugins/tailwind-v4-shadcn/skills/tailwind-v4-shadcn/SKILL.mdQuality
Discovery
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.
This is an excellent skill description that hits all the marks. It provides specific capabilities, explicit trigger conditions via a 'Use when:' clause, comprehensive keyword coverage including natural problem-oriented phrases users would type, and a clearly distinctive niche focused on Tailwind CSS v4 with shadcn/ui. The structured format with 'Use when:', 'Covers:', and 'Keywords:' sections makes it highly scannable and effective for skill selection.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions and areas: initializing React projects, setting up shadcn/ui, implementing dark mode, debugging CSS variable issues, fixing theme switching, migrating from Tailwind v3. Also covers specific technical patterns like @theme inline, CSS variable architecture, ThemeProvider, vite.config setup. | 3 / 3 |
Completeness | Clearly answers both 'what' (production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React; covers @theme inline pattern, CSS variable architecture, etc.) and 'when' (explicit 'Use when:' clause listing specific trigger scenarios like initializing projects, debugging CSS variable issues, migrating from v3). | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural terms users would say, including both technical terms ('Tailwind v4', 'shadcn/ui', '@tailwindcss/vite', 'components.json') and problem-oriented phrases users would naturally type ('colors not working', 'variables broken', 'theme not applying'). Includes file formats, plugin names, and common pain points. | 3 / 3 |
Distinctiveness Conflict Risk | Highly distinctive niche targeting specifically Tailwind CSS v4 with shadcn/ui, Vite, and React. The combination of these specific technologies plus v4-specific patterns (@theme inline, @plugin directive) makes it very unlikely to conflict with general CSS, general React, or even Tailwind v3 skills. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
54%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
The skill has excellent workflow clarity and progressive disclosure, with a well-structured four-step architecture and clear references to deeper documentation. However, it is significantly bloated with meta-commentary (skill activation instructions, token usage comparisons, production marketing), version-pinned dependencies that will go stale, and sections that explain things Claude already knows. The actionability is weakened by deferring key implementations (ThemeProvider, templates) to external files without inline fallbacks.
Suggestions
Remove the entire 'BEFORE YOU START' section including the skill activation instructions, token comparison table, and known issues list — Claude doesn't need to be told how to use its own skills, and the known issues are already addressed by the patterns themselves.
Inline the ThemeProvider component code directly in the Dark Mode Setup section instead of pointing to a template file, or at minimum provide the core implementation inline with a reference for the full version.
Remove the 'Production Example' section and trim the Dependencies section to just the critical packages without pinned versions — the exact version numbers will become stale and the production marketing adds no instructional value.
Consolidate the 'When to Load References' section into the existing 'Reference Documentation' section as brief inline annotations rather than a separate verbose section with repeated bullet lists.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Extremely verbose with significant padding. The 'BEFORE YOU START' section wastes tokens explaining how to activate the skill, comparing token usage with/without the skill, and instructing users to tell Claude things. The 'Known Issues This Skill Prevents' list, production example section, 'Why This Matters' comparison table, and meta-instructions about when to load references are all unnecessary filler. The dependencies section lists exact version numbers that will become stale. Much content explains things Claude already knows. | 1 / 3 |
Actionability | The Quick Start and Four-Step Architecture sections provide concrete, executable code and commands. However, the Dark Mode Setup section punts to template files and reference docs instead of providing the actual ThemeProvider code. The File Templates section just lists filenames without content. Several critical pieces are deferred to reference files that may or may not exist, reducing immediate actionability. | 2 / 3 |
Workflow Clarity | The four-step architecture is clearly sequenced with explicit ordering, critical rules at each step, and clear do/don't examples. The Quick Start follows a numbered sequence. The setup checklist provides a comprehensive validation checkpoint. The common issues table serves as a troubleshooting feedback loop. The workflow is well-structured for a multi-step setup process. | 3 / 3 |
Progressive Disclosure | Content is well-structured with a clear table of contents, concise main content, and well-signaled references to deeper documentation (common-gotchas.md, dark-mode.md, migration-guide.md, plugins-reference.md, advanced-usage.md). The 'When to Load References' section provides clear guidance on which reference to consult for specific scenarios. References are one level deep. | 3 / 3 |
Total | 9 / 12 Passed |
Validation
90%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 10 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
skill_md_line_count | SKILL.md is long (558 lines); consider splitting into references/ and linking | Warning |
Total | 10 / 11 Passed | |
88da5ff
Table of Contents
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.