ask-shadcn-architect

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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

<detection> Active when: `components/ui/` exists OR `components.json` exists </detection>

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

npx shadcn@latest add [component-name]

</cli_first>

<style_merging> ❌ Bad:

className={\

bg-red-500 ${className}`}

✅ Good:

className={cn("bg-red-500", className)}` </style_merging>

<example> User: "Make a red delete button"

❌ Weak:

tsx

<button className="bg-red-500 text-white p-2 rounded">Delete</button>

✅ Correct:

tsx

import { Button } from "@/components/ui/button"
<Button variant="destructive">Delete</Button>

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

<critical_constraints> ❌ 若shadcn Button组件已存在，禁止自定义

<button>

→ 从@/components/ui导入 ❌ 禁止手动实现标准组件 → 使用CLI ❌ 禁止硬编码颜色 → 使用语义化颜色（bg-primary、text-muted-foreground） ✅ 创建组件前必须先检查@/components/ui ✅ 必须使用cn()工具函数合并className ✅ 必须使用lucide-react提供图标 </critical_constraints>

<detection> 触发条件：当`components/ui/`目录存在或 `components.json`文件存在时激活 </detection>

<cli_first> 缺少组件？不要从零开始编写：

npx shadcn@latest add [component-name]

</cli_first>

<style_merging> ❌ 错误写法：

className={\

bg-red-500 ${className}`}

 ✅ 正确写法：

className={cn("bg-red-500", className)}` </style_merging>

<example> 用户需求：“创建一个红色的删除按钮”

❌ 不规范写法：

tsx

<button className="bg-red-500 text-white p-2 rounded">Delete</button>

✅ 规范写法：

tsx

import { Button } from "@/components/ui/button"
<Button variant="destructive">Delete</Button>

</example> <theming> 使用tailwind.config.js中的语义化颜色： - bg-primary、text-muted-foreground - 禁止使用bg-blue-600、text-gray-500 → 确保适配深色模式 </theming>