Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →graphif/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 17 of 20 test cases with the skill, and 7 of 20 without it.
and 11 more in the full report
11 fixed8 passed either way3 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 11 test cases the skill fixed. Same model, same prompt, with and without the skill.
I want to apply the visual theme and typography from preset code a2r6bw to my existing project without updating or reinstalling UI component code. What terminal command should I execute?
| Checked | Without skill | With skill |
|---|---|---|
| Executes apply command with --only theme,font flag. | 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 / 20 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.