Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →asymmetric-al/shadcn
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".
Passed 16 of 21 test cases with the skill, and 7 of 21 without it.
and 12 more in the full report
11 fixed7 passed either way4 still failing1 broke
Tokens, turns and time describe resource use, not a dollar price.
This benchmark measured an earlier version of the skill.
One of 11 test cases the skill fixed. Same model, same prompt, with and without the skill.
We want to update our project's CSS variables and theme from preset code `a2r6bw` without overwriting or reinstalling our UI components. What terminal command applies only the theme?
| Checked | Without skill | With skill |
|---|---|---|
| Uses the --only theme flag with npx shadcn@latest apply. | Missed | Passed |
The instructions your model reads when the skill loads.
A framework for building ui, components and design systems. Components are added as source code to the user's project via the CLI.
IMPORTANT: Run all CLI commands using the project's package runner:
npx shadcn@latest,pnpm dlx shadcn@latest, orbunx --bun shadcn@latest— based on the project'spackageManager. Examples below usenpx shadcn@latestbut substitute the correct runner for the project.
!`npx shadcn@latest info --json`
The JSON above contains the project config and installed components. Use npx shadcn@latest docs <component> to get documentation and example URLs for any component.
npx shadcn@latest search to check registries before writing custom UI. Check community registries too.variant="outline", size="sm", etc.bg-primary, text-muted-foreground — never raw values like bg-blue-500.These rules are always enforced. Each links to a file with Incorrect/Correct code pairs.
className for layout, not styling. Never override component colors or typography.space-x-* or space-y-*. Use flex with gap-*. For vertical stacks, flex flex-col gap-*.size-* when width and height are equal. size-10 not w-10 h-10.truncate shorthand. Not overflow-hidden text-ellipsis whitespace-nowrap.dark: color overrides. Use semantic tokens (bg-background, text-muted-foreground).cn() for conditional classes. Don't write manual template literal ternaries.z-index on overlay components. Dialog, Sheet, Popover, etc. handle their own stacking.FieldGroup + Field. Never use raw div with space-y-* or grid gap-* for form layout.InputGroup uses InputGroupInput/InputGroupTextarea. Never raw Input/Textarea inside InputGroup.InputGroup + InputGroupAddon.test cases passed, vs 7 / 21 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.