shadcn/ui Best Practices

shadcn/ui done right. Local component ownership, cn() class merging, React Hook Form + Zod forms, CSS variable theming, cva variants, Radix primitives, accessible patterns, and the npx shadcn CLI workflow.

AI coding assistants import from @shadcn/ui, use template literals for conditional classes, build forms without React Hook Form, hardcode colors, and skip the CLI. This plugin anchors your agent to the copy-paste ownership model shadcn/ui is built on.

Install

Cursor / Claude Code / Windsurf

npx skills add ofershap/shadcn-best-practices

Or copy skills/ into your .cursor/skills/ or .claude/skills/ directory.

What's Included

Type	Name	Description
Skill	shadcn-best-practices	12 rules for component ownership, cn(), forms, theming, cva, accessibility, and more
Rule	best-practices	Always-on behavioral rule that enforces shadcn/ui patterns
Command	/audit	Scan your codebase for shadcn/ui anti-patterns

What Agents Get Wrong

What the agent writes	What shadcn/ui actually uses
import { Button } from "@shadcn/ui"	import { Button } from "@/components/ui/button"
Template literals for conditional classes	cn() utility from @/lib/utils
Manual form validation	React Hook Form + Zod with <Form> components
Hardcoded color values	CSS variables (--primary, --background)
Complex conditional class logic	cva (class-variance-authority) for variants
npm install @shadcn/ui	npx shadcn@latest add button via CLI

Related Plugins

• tailwind-best-practices - Tailwind CSS v4 patterns (shadcn/ui depends on Tailwind)
• typescript-best-practices - TypeScript 5.x strict patterns

---

If this helped your workflow, a star helps others find it.

Author

License

MIT