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