This skill should be used when the user asks to "add a component", "use shadcn", "install Button", "create Dialog", "add Form", "use DataTable", "implement dark mode toggle", "use cn utility", or discusses UI components, component libraries, or accessible components. Always use the latest shadcn/ui version and modern patterns.
SkillScore86Maintained
Automatic
◆Frontend / UI pack
Last verified 8/3/2026
What it changes
Passed 18 of 21 test cases with the skill, and 11 of 21 without it.
Without skill55%
With skill86%
Checks it passed that the model alone missed
Uses size='icon' for the icon button variant
Advises against installing tailwindcss-animate
Configures attribute='class' on the provider in the root layout
and 10 more in the full report
8 fixed11 passed either way2 still failing1 broke
Pass-rate lift
+32 pp
Tokens
+122%
Agent turns
0%
Response time
-37%
Model gemini-3.6-flashMeasured 8/3/2026v119 of 22 cases passed with skill · 21 comparable
Tokens, turns and time describe resource use, not a dollar price.
See it in action
One of 7 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 7
Prompt
What is the standard snippet for rendering a text input field linked to its text label for an email field?
What was checked, without and with the skill
Checked
Without skill
With skill
Uses a Label component with htmlFor matching the Input id attribute
Missed
Passed
case-10 · gemini-3.6-flash · 8/3/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md567 lines3 files
shadcn/ui Development
This skill provides guidance for building interfaces with shadcn/ui, focusing on always using the latest version and modern patterns.
Philosophy: Copy and own your components. Use the new-york style. Leverage Radix UI primitives for accessibility.