BC 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
Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React.
As a process C 54/100 · Has gaps — weak spots: result and completion, when it triggers, inputs and preconditions
How to improve
- Your own cases (evals/evals.json, 4–6 real requests with expected answers): the full check would then run those instead of a model-drafted suite.
- A spec.yaml with trigger phrases and assertions — a behaviour contract for CI; `skilltest init` writes a template.
Guard findings · 0
✓ No critical or high findings
Files scanned: 11. Evidence is masked. Grey chips explain why severity was lowered.
Against the Agent Skills spec
- note
edit-residuethe text marks something as outdated (lines 57, 297, 425, 429, 430): check that old rules are not kept next to new ones — the full check reads the text for contradictions
Process rating: all ten parameters 54/100
- 0Result and completion. Does not say what the result is
- 0Inputs and preconditions. Does not say what the process needs to start
- 0Progress reporting. Says nothing while it works
- 20When it triggers. No condition that starts the skill
- 30Running it twice. 9 mutating operations with no state check
- 55Failures and branches. 1 branches
- 85Steps. 115 steps, 2 vague phrases
- 100Tools and files. No external tools needed
- 100Consistency. Name and required fields are in place
- 100Execution cost. Instruction body is 3559 tokens
- low 17 top-level sections: this looks like several domains in one skill
- high The skill tells the model to perform an irreversible action with no human approval
Everything here is measured from the skill text rather than judged by a model, so the numbers are checkable. A parameter weighs more when it is a more common reason for the process to stall.
Quality signals
- +5Description has no quoted example phrases that should trigger the skill
- +4Description does not say when NOT to use the skill (false activations)
- +3Description length 810: 120–800 characters recommended
- +3Output format is not stated: the model decides each time
- -223 emoji in the instructions: noise for the model
- +2Single-language instructions
- +4Structure: 40 headings
- +3Step-by-step instructions: 115 items
- +4Has examples (26 code blocks)
- +4Reference files are cited in the instructions (5 of 5)
- +1License stated
Quality base 70; lint remarks subtract, signals add up to 100. Result: 84.