shadcn/ui Agent Skill
shadcn/ui — Radix primitives, copy-paste components, and consistent theming.
The Skill
Full content, every format. Copy it, download it, or install with one command.
---
description: shadcn/ui — Radix primitives, copy-paste components, and consistent theming.
homepage: https://yepapi.com/skills/shadcn-ui
metadata:
tags: [shadcn, radix, ui, components]
---
# shadcn/ui
## Rules
- Install components individually: `npx shadcn@latest add button` — not a full library install
- Components live in `components/ui/` — they're YOUR code, not a node_module
- Use CSS variables for theming in `globals.css` — `--primary`, `--secondary`, `--destructive`, etc.
- Extend components with `cn()` — never modify the installed source directly for one-off changes
- Use `cva` (class-variance-authority) for component variants: `const buttonVariants = cva("base", { variants: { ... } })`
- Form components: pair with React Hook Form — use `<FormField>`, `<FormItem>`, `<FormLabel>`, `<FormMessage>`
- Data tables: use `@tanstack/react-table` with shadcn's `<DataTable>` pattern
- Toast notifications: use `sonner` (shadcn default) — `toast("Message")`, not custom toast implementations
- Dialogs/sheets/drawers: use Radix primitives via shadcn — controlled with state, not imperative APIs
## Avoid
- Installing all components at once — only add what you need
- Ejecting or heavily modifying base component files — compose on top instead
- Using raw Radix primitives when shadcn has a styled wrapper
- Mixing multiple component libraries (MUI + shadcn) — pick one system
- Hardcoding colors instead of using CSS variable tokensInstall
Why Use the shadcn/ui Skill?
Without this skill, your AI guesses at shadcn/ui patterns. It might hallucinate deprecated APIs, use outdated conventions, or miss best practices entirely. With it, your AI follows a proven ruleset — every suggestion aligns with current standards.
Drop this skill into your project and your AI instantly knows the rules. Better code suggestions, fewer errors, faster shipping.
Try These Prompts
These prompts work better with the shadcn/ui skill installed. Your AI knows the context and writes code that fits.
"Set up shadcn/ui with a custom theme, consistent spacing, and dark mode support"
"Build a component library on top of shadcn/ui with custom variants and compositions"
"Create a form with shadcn/ui components, proper validation states, and accessible labels"
Works Great With
shadcn/ui skill — FAQ
It provides shadcn/ui patterns with Radix primitives, copy-paste components, and consistent theming. Your AI uses shadcn/ui components correctly with proper variant composition and accessibility.
Run `npx skills add YepAPI/skills --skill shadcn-ui` in your project root. This copies the skill file into your repo where your AI coding tool can read it automatically.
It is a collection of copy-paste components built on Radix primitives. Unlike traditional libraries, you own the code. The skill ensures consistent theming, proper variant usage, and accessibility.