ask-shadcn-architect

<critical_constraints> ❌ NO custom 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 </critical_constraints>

<cli_first> Missing component? Don't write from scratch: </cli_first>

<style_merging> ❌ Bad: bg-red-500 ${className}`}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>