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