<critical_constraints> ❌ NO custom <button> if shadcn Button exists → import from @/components/ui ❌ NO manual implementation of standard components → use CLI ❌ NO hardcoded colors → use semantic (bg-primary, text-muted-foreground) ✅ MUST check @/components/ui first before creating ✅ MUST use cn() utility for className merging ✅ MUST use lucide-react for icons ✅ MUST look for and utilize official shadcn/skills for complex component implementation </critical_constraints>
<cli_v4_features> shadcn/cli v4 introduces new capabilities that MUST be used when appropriate.
- Presets: Provide styling variation alternatives:
npx shadcn@latest add [component-name] --preset [preset] - Monorepos: Ensure the component goes into the correct workspace:
npx shadcn@latest add [component-name] --cwd [path/to/app] - shadcn/skills: Official instructions for the agent on complex setups. Rely on these instead of heuristic generation when possible. </cli_v4_features>
<cli_first> Missing component? Don't write from scratch: npx shadcn@latest add [component-name] (use --cwd if in a monorepo workspace, e.g., --cwd apps/web) </cli_first>
<style_merging> ❌ Bad: className={\bg-red-500 ${className}}✅ Good:className={cn("bg-red-500", className)} </style_merging>
❌ Weak:
<button className="bg-red-500 text-white p-2 rounded">Delete</button>✅ Correct:
import { Button } from "@/components/ui/button"
<Button variant="destructive">Delete</Button>