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. 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
88
85%
Does it follow best practices?
Impact
92%
1.55xAverage score across 3 eval scenarios
Passed
No known issues
Quality
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 both technical terms and natural problem descriptions users would type, and a clearly distinct niche. 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 with multiple 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', 'dark mode'). Includes file extensions, 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
70%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 excellent workflow clarity and progressive disclosure - the four-step architecture is well-sequenced, code examples are executable, and reference files are clearly signaled. However, it is significantly bloated with redundant content (rules repeated across multiple sections), unnecessary meta-instructions (telling Claude how to announce itself), marketing-style comparisons, and explanations that don't add value. The content could likely be cut by 40-50% without losing any actionable information.
Suggestions
Remove the entire 'Before You Start' section - the marketing comparison table, meta-instructions about announcing skill usage, and 'Known Issues This Skill Prevents' list are not actionable and waste ~40 lines of context.
Consolidate the 'Critical Rules' section with the inline rules already stated in the Four-Step Architecture to eliminate repetition (e.g., hsl() wrapping, @layer base prohibition, and delete tailwind.config.ts are each stated 2-3 times).
Remove exact version numbers from the Dependencies section (e.g., '^4.1.17', '^2.1.1') as these become stale quickly and Claude can look up current versions; just list package names.
Cut the 'Production Example' and 'Questions? Issues?' sections - the production reference adds no actionable guidance and the troubleshooting steps are redundant with earlier content.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Extremely verbose. The 'Before You Start' section with marketing-style comparisons, meta-instructions telling Claude to announce skill usage, and repeated emphasis on 'CRITICAL' adds significant bloat. The dependencies section lists exact version numbers Claude doesn't need memorized. Rules are stated multiple times across sections (e.g., 'delete tailwind.config.ts' appears 3+ times, hsl wrapping rules repeated in multiple sections). | 1 / 3 |
Actionability | Provides fully executable code for vite.config.ts, CSS setup, components.json, and bash commands. The four-step architecture gives concrete, copy-paste ready patterns with clear correct/incorrect examples. The troubleshooting table maps symptoms directly to fixes. | 3 / 3 |
Workflow Clarity | The Quick Start has a clear numbered sequence, the Four-Step Architecture provides an explicit ordered workflow with validation rules at each step, and the Setup Checklist provides a comprehensive verification checkpoint. The common issues table serves as a debugging feedback loop. | 3 / 3 |
Progressive Disclosure | Well-structured with a table of contents, core content inline, and clear one-level-deep references to separate files (common-gotchas.md, dark-mode.md, migration-guide.md, plugins-reference.md, advanced-usage.md). The 'When to Load References' section provides excellent navigation guidance for when to consult each file. | 3 / 3 |
Total | 10 / 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 | |
- Repository
- secondsky/claude-skills
- Commit
40506e5
- 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.