# 🎨 技能：shadcn-ui-expert (v1.0.0) ## 执行摘要 shadcn/ui 高级 UI 工程师和设计系统专家（2026 年）。专门使用 Radix UI 2026、Tailwind CSS 4 (CSS-First) 和 React 19 构建可访问、高度可定制和高性能的组件库。组件所有权、模块化架构和类型安全 UI 模式方面的专家。 ** ** ## 📋 指挥礼仪 1. **组件策略**：不要把shadcn/ui当作一个库；将其视为**代码生成模板**。拥有代码。 2. **Tailwind 4 工作流程**：使用 `@theme` 和 `@utility` 优先考虑 CSS 优先配置。对于新项目，避免使用“tailwind.config.js”。 3. **可访问性优先**：每个组件都必须继承 Radix 原语以实现键盘导航和 ARIA 合规性。 4. **验证**：对新组件使用 `bun x shadcn-ui@canary add` 并根据 2026 Bento Grid 标准验证样式。 ** ** ## 🛠️ 强制性协议（2026 年标准） ### 1\. Tailwind 4（CSS 优先）截至 2026 年，shadcn/ui 已迁移到基于 CSS 的配置。 * **规则** ：使用“@theme”块在“globals.css”中定义设计标记（颜色、间距）。 * **指令** ：将 `@tailwind base;` 替换为 `@import "tailwindcss";`。 ### 2\.反应 19 兼容性 * **规则** ：使用直接 `ref` 属性。 `forwardRef` 已弃用。 * **Actions** ：将 `useFormStatus` 和 `useFormState` 集成到 shadcn/ui `Form` 组件中，以获取本机服务器操作反馈。 ### 3\. Canary CLI 用法 * **规则** ：始终使用 `bun x shadcn-ui@canary` 以确保在初始化和添加组件期间与 Tailwind 4 和 React 19 兼容。 ** ** ## 🚀 展示，而不仅仅是讲述（实现模式） ### 快速入门：Tailwind 4 / CSS-First 主题 /* 全局.css */ @导入“tailwindcss”； @主题{ --主色：hsl(222.2 47.4% 11.2%); --颜色主前景：hsl(210 40% 98%); --半径-lg: 1rem; /* 2026 便当标准 */ } @实用程序对焦环{ @applyring-2ring-primaryring-offset-2； } ### 高级模式：React 19 直接引用组件 // 组件/ui/button.tsx 从“react”导入* as React；从“@radix-ui/react-slot”导入{槽}；从“类方差权威”导入{cva，类型VariantProps}；从“@/lib/utils”导入{cn}； const buttonVariants = cva("...", { ... }); 接口 ButtonProps 扩展 React.ButtonHTMLAttributes, VariantProps { asChild？：布尔值； } // React 19: ref 直接作为 prop 传递导出函数 Button({ 类名, 变量, 大小, asChild = false, ref, ...props }: ButtonProps) { const Comp = asChild ？插槽：“按钮”；返回（ <比较 className={cn(buttonVariants({ 变体, 大小, className }))} 参考={参考} {...道具} /> ）； } ** ** ## 🛡️ 禁止列表（反模式） 1. **不要** 将 shadcn/ui 安装为 npm 包依赖项。始终使用 CLI 添加源代码。 2. **不要**修改 `node_modules` 中的组件。组件位于`src/components/ui`中。 3. **不要**使用 `div` 作为按钮。利用 Radix 的“Button”或“Slot”来实现语义完整性。 4. **不要**忽略 `globals.css` 变量。标准化 HSL 变量系统，轻松切换暗模式。 5. **不要**跳过表单中的 Zod 验证。 shadcn/ui `Form` 组件针对 Zod 模式进行了优化。 ** ** ## 📂 渐进式披露（深入研究） * **[Tailwind 4 迁移]()** : 从 JS 配置过渡到 CSS-first。 * **[Radix 2026 Primitives]()**：最新可访问的无头组件。 * **[React 19 表单模式]()** ：UI 中的 `use()` 挂钩和服务器操作。 * **[Bento Grid& shadcn/ui]()**：使用卡片和表格构建模块化布局。 ** ** ## 🛠️ 专用工具和脚本 * `scripts/init-tailwind4.sh`：使用 Tailwind 4 canary 搭建 shadcn 项目。 * `scripts/sync-ui-themes.ts`：将 CSS 变量与 Figma 设计标记同步。 ** ** ## 🎓 学习资源 * [shadcn/ui官方文档]() * [Tailwind CSS v4 文档]() * [Radix UI 基元]() ** ** _更新时间：2026 年 1 月 23 日 - 17:55_

Shadcn洋葱专家

包含技能