ask-shadcn-architect

❌ 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> Active when: `components/ui/` exists OR `components.json` exists Missing component? Don't write from scratch: `npx shadcn@latest add [component-name]` </cli_first>

<style_merging><br>❌ Bad: <code>className={\</code>bg-red-500 ${className}`}<code>✅ Good:</code>className={cn(&quot;bg-red-500&quot;, className)}`<br></style_merging></p> <example> User: "Make a red delete button" <p>❌ Weak:</p> <pre><code class="language-tsx" data-language="tsx">&lt;button className=&quot;bg-red-500 text-white p-2 rounded&quot;&gt;Delete&lt;/button&gt;</code></pre><p>✅ Correct:</p> <pre><code class="language-tsx" data-language="tsx">import { Button } from &quot;@/components/ui/button&quot; &lt;Button variant=&quot;destructive&quot;&gt;Delete&lt;/Button&gt;</code></pre></example> <theming> Use semantic colors from tailwind.config.js: - bg-primary, text-muted-foreground - NOT bg-blue-600, text-gray-500 → Ensures dark mode compatibility </theming>