The official shadcn/ui skill: detects the project setup, adds and updates components with the CLI, and follows the library's styling and composition rules.
$ npx skills add https://craftwork.design/skills/shadcn -a claude-code -y
Installs into .claude/skills/shadcn. Add -g for every project.
SKILL.md
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, or bunx --bun shadcn@latest — based on the project's packageManager. Examples below use npx shadcn@latest but substitute the correct runner for the project.
Current Project Context
!`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.
Principles
Use existing components first. Use to check registries before writing custom UI. Check community registries too.
Forms use 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.
Buttons inside inputs use InputGroup + InputGroupAddon.
Option sets (2–7 choices) use ToggleGroup. Don't loop Button with manual active state.
FieldSet + FieldLegend for grouping related checkboxes/radios. Don't use a div with a heading.
Field validation uses data-invalid + aria-invalid.data-invalid on Field, aria-invalid on the control. For disabled: data-disabled on Field, disabled on the control.
Use asChild (radix) or render (base) for custom triggers. Check base field from npx shadcn@latest info. → base-vs-radix.md
Dialog, Sheet, and Drawer always need a Title.DialogTitle, SheetTitle, DrawerTitle required for accessibility. Use className="sr-only" if visually hidden.
Use full Card composition.CardHeader/CardTitle/CardDescription/CardContent/CardFooter. Don't dump everything in CardContent.
Button has no isPending/isLoading. Compose with Spinner + data-icon + disabled.
TabsTrigger must be inside TabsList. Never render triggers directly in Tabs.
Avatar always needs AvatarFallback. For when the image fails to load.
Chat UI composes the chat primitives. Conversations use MessageScroller, rows use Message, surfaces use Bubble. Never hand-rolled bubble divs or a raw scroll container.
MessageScroller owns scroll behavior. Streaming follow, anchoring, and jump-to-latest (MessageScrollerButton) are built in. Don't write a useStickToBottom/ResizeObserver hook.
Attachments use Attachment; system notes and dividers use Marker. Not Item cards or Separator + a label.
CLI
Never decode preset codes or build preset URLs manually. Use npx shadcn@latest preset decode <code>, preset url <code>, or preset open <code>. For project-aware preset detection, use npx shadcn@latest preset resolve.
Apply preset codes directly with the CLI. Use npx shadcn@latest apply <code> for existing projects, or npx shadcn@latest init --preset <code> when initializing.
Key Patterns
These are the most common patterns that differentiate correct shadcn/ui code. For edge cases, see the linked rule files above.
// Form layout: FieldGroup + Field, not div + Label.
<FieldGroup>
<Field>
<FieldLabel htmlFor="email">Email</FieldLabel>
<Input id="email" />
</Field>
</FieldGroup>
// Validation: data-invalid on Field, aria-invalid on the control.
<Field data-invalid>
<FieldLabel>Email</FieldLabel>
<Input aria-invalid />
<FieldDescription>Invalid email.</FieldDescription>
</Field>
// Icons in buttons: data-icon, no sizing classes.
<Button>
<SearchIcon data-icon="inline-start" />
Search
</Button>
// Spacing: gap-*, not space-y-*.
<div className="flex flex-col gap-4"> // correct
<div className="space-y-4"> // wrong
// Equal dimensions: size-*, not w-* h-*.
<Avatar className="size-10"> // correct
<Avatar className="w-10 h-10"> // wrong
// Status colors: Badge variants or semantic tokens, not raw colors.
<Badge variant="secondary">+20.1%</Badge> // correct
<span className="text-emerald-600">+20.1%</span> // wrong
The injected project context contains these key fields:
aliases → use the actual alias prefix for imports (e.g. @/, ~/), never hardcode.
isRSC → when true, components using useState, useEffect, event handlers, or browser APIs need "use client" at the top of the file. Always reference this field when advising on the directive.
Run npx shadcn@latest docs <component> to get the URLs for a component's documentation, examples, and API reference. Fetch these URLs to get the actual content.
npx shadcn@latest docs button dialog select
When creating, fixing, debugging, or using a component, always run npx shadcn@latest docs and fetch the URLs first. This ensures you're working with the correct API and usage patterns rather than guessing.
Workflow
Get project context — already injected above. Run npx shadcn@latest info again if you need to refresh.
Check installed components first — before running add, always check the components list from project context or list the resolvedPaths.ui directory. Don't import components that haven't been added, and don't re-add ones already installed.
Find components — npx shadcn@latest search.
Get docs and examples — run npx shadcn@latest docs <component> to get URLs, then fetch them. Use npx shadcn@latest view to browse registry items you haven't installed. To preview changes to installed components, use npx shadcn@latest add --diff.
Install or update — npx shadcn@latest add. When updating existing components, use --dry-run and --diff to preview changes first (see Updating Components below).
Fix imports in third-party components — After adding components from community registries (e.g. @bundui, @magicui), check the added non-UI files for hardcoded import paths like @/components/ui/.... These won't match the project's actual aliases. Use npx shadcn@latest info to get the correct ui alias (e.g. @workspace/ui/components) and rewrite the imports accordingly. The CLI rewrites imports for its own UI files, but third-party registry components may use default paths that don't match the project.
Review added components — After adding a component or block from any registry, always read the added files and verify they are correct. Check for missing sub-components (e.g. SelectItem without SelectGroup), missing imports, incorrect composition, or violations of the Critical Rules. Also replace any icon imports with the project's iconLibrary from the project context (e.g. if the registry item uses lucide-react but the project uses hugeicons, swap the imports and icon names accordingly). Fix all issues before moving on.
Registry must be explicit — When the user asks to add a block or component, do not guess the registry. If no registry is specified (e.g. user says "add a login block" without specifying @shadcn, @tailark, owner/repo, etc.), ask which registry to use. Never default to a registry on behalf of the user.
Switching presets — Ask the user first: overwrite, partial, merge, or skip?
Inspect current preset: npx shadcn@latest preset resolve. Use --json when you need structured values.
Inspect incoming preset: npx shadcn@latest preset decode <code>. Use preset url <code> or preset open <code> to share or open the preset builder.
Partial: npx shadcn@latest apply <code> --only theme,font. Updates only the selected preset parts without reinstalling UI components. Supported values are theme and font; comma-separated combinations are allowed. icon is intentionally not supported, because icon changes may require full component reinstall and transforms.
Merge: npx shadcn@latest init --preset <code> --force --no-reinstall, then run to list installed components, then for each installed component use and to it individually.
Design Systems from DESIGN.md
When the user asks for a design system from a DESIGN.md (or a brand spec), with or without a preset, follow design-system.md end to end:
init --preset <code> --template <vite|next> --name <app> --no-monorepo -y. Without a preset code, pick the closest style and pass --base base --preset <style>. Then add --all -y.
Read the DESIGN.md frontmatter, Do's and Don'ts, and Known Gaps before editing.
Map its tokens onto the shadcn variables in tailwindCssFile. Pin the radius scale, shadows, fonts and type-* utilities.
Restyle components by editing their cva variants. Change control heights together.
Build the design system page per design-system-page.md: contrast-checked color roles, type specimens, pinned state matrices, edge cases, do/don't pairs, recipes. Check coverage with scripts/showcase-coverage.mjs.
Verify in a browser: typecheck, no console errors, loads at the top, no horizontal overflow, dark mode.
Updating Components
When the user asks to update a component from upstream while keeping their local changes, use --dry-run and --diff to intelligently merge. NEVER fetch raw files from GitHub manually — always use the CLI.
Run npx shadcn@latest add <component> --dry-run to see all files that would be affected.
For each file, run npx shadcn@latest add <component> --diff <file> to see what changed upstream vs local.
Decide per file based on the diff:
No local changes → safe to overwrite.
Has local changes → read the local file, analyze the diff, and apply upstream updates while preserving local modifications.
User says "just update everything" → use --overwrite, but confirm first.
Never use --overwrite without the user's explicit approval.
design-system.md: DESIGN.md (with or without a preset) to a themed app: style picking, token mapping, radius, fonts, type scale, control heights, showcase traps, verification
design-system-page.md: What goes on a design system page and how: foundations, component tiers, pinned state matrices, contrast pairs, edge cases, do/don't, recipes
Skip: npx shadcn@latest init --preset <code> --force --no-reinstall. Only updates config and CSS, leaves components as-is.
Important: Always run preset commands inside the user's project directory. apply only works in an existing project with a components.json file. The CLI automatically preserves the current base (base vs radix) from components.json. If you must use a scratch/temp directory (e.g. for --dry-run comparisons), pass --base <current-base> explicitly — preset codes do not encode the base.
