shadcn-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
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 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