用途:在编写或重构界面时统一应用 shadcn/ui 与 Tailwind CSS 规范,适用于 React 与 SolidJS 两种生态。
主要能力:先读 package.json 判断模式——含 react/react-dom 为 React 模式,含 solid-js 为 Solid 模式。React 模式用 Base UI 原语,命令为 npx shadcn@latest,可用 info --json、search、docs、add、--dry-run/--diff;Solid 模式用 Kobalte(Zaidan),命令为 npx shadcn-solid@latest,仅 init、add、diff,需在浏览器查看组件文档。
使用方式:优先复用已有组件,其次扩展,再考虑注册表组件,最后才自写;样式用语义化令牌(如 bg-primary、text-muted-foreground),不用 text-blue-500 等原始色值或内联十六进制;间距用 flex + gap-,不用 space-x/space-y;尺寸用 size-;条件类名统一用 cn();变体用 cva 且仅在多处复用时新增。主题变量在全局 CSS 的 :root 定义(OKLCH),Tailwind v4 通过 @theme inline 映射。命令用项目包管理器运行。
适用场景:新建或重构 UI、组件库维护、主题令牌与响应式样式规范化。
限制:Solid 模式 CLI 功能较少,无 info/search/docs/--dry-run;两种模式的 className 与 class、组合写法不同需区分;资料未提供具体收费、价格或效果数据。