From c77e6c2d171bcd09def06eefcd9799a2636d3041 Mon Sep 17 00:00:00 2001 From: wehub-skill-sync Date: Mon, 13 Jul 2026 21:36:22 +0800 Subject: [PATCH] chore: import zh skill shadcn --- README.wehub.md | 9 ++ SKILL.md | 254 +++++++++++++++++++++++++++++++++ agents/openai.yml | 5 + assets/shadcn-small.png | Bin 0 -> 1049 bytes assets/shadcn.png | Bin 0 -> 3852 bytes cli.md | 255 +++++++++++++++++++++++++++++++++ customization.md | 209 +++++++++++++++++++++++++++ evals/evals.json | 47 ++++++ mcp.md | 94 ++++++++++++ rules/base-vs-radix.md | 306 ++++++++++++++++++++++++++++++++++++++++ rules/composition.md | 195 +++++++++++++++++++++++++ rules/forms.md | 192 +++++++++++++++++++++++++ rules/icons.md | 101 +++++++++++++ rules/styling.md | 162 +++++++++++++++++++++ 14 files changed, 1829 insertions(+) create mode 100644 README.wehub.md create mode 100644 SKILL.md create mode 100644 agents/openai.yml create mode 100644 assets/shadcn-small.png create mode 100644 assets/shadcn.png create mode 100644 cli.md create mode 100644 customization.md create mode 100644 evals/evals.json create mode 100644 mcp.md create mode 100644 rules/base-vs-radix.md create mode 100644 rules/composition.md create mode 100644 rules/forms.md create mode 100644 rules/icons.md create mode 100644 rules/styling.md diff --git a/README.wehub.md b/README.wehub.md new file mode 100644 index 0000000..b2da4ec --- /dev/null +++ b/README.wehub.md @@ -0,0 +1,9 @@ +# WeHub 来源说明 + +- Skill 名称：`shadcn` +- 中文类目：shadcn/ui 组件初始化与定制 +- 上游仓库：`sickn33__antigravity-awesome-skills` +- 上游路径：`plugins/antigravity-awesome-skills-claude/skills/shadcn/SKILL.md` +- 上游链接：https://github.com/sickn33/antigravity-awesome-skills/blob/HEAD/plugins/antigravity-awesome-skills-claude/skills/shadcn/SKILL.md +- 本仓库为 WeHub 中文 Skill 汉化包，基于 skill 市场筛选 Top200 清单整理 +- 原作者、版权和许可证信息以上游仓库为准 diff --git a/SKILL.md b/SKILL.md new file mode 100644 index 0000000..06afb53 --- /dev/null +++ b/SKILL.md @@ -0,0 +1,254 @@ +--- +name: shadcn +description: 管理 shadcn/ui 组件和项目，提供上下文、文档和使用模式，用于构建现代设计系统。 +user-invocable: false +risk: safe +source: https://github.com/shadcn-ui/ui/tree/main/skills/shadcn +date_added: "2026-03-07" +--- + +# shadcn/ui + +一个用于构建 UI、组件和设计系统的框架。组件通过 CLI 以源代码形式添加到用户项目中。 + +> **重要提示：** 使用项目的包运行器执行所有 CLI 命令：`npx shadcn@latest`、`pnpm dlx shadcn@latest` 或 `bunx --bun shadcn@latest`——基于项目的 `packageManager`。以下示例使用 `npx shadcn@latest`，但请替换为项目对应的正确运行器。 + +## 何时使用 +- 当从 shadcn/ui 或社区注册表添加新组件时使用。 +- 当对现有 shadcn/ui 组件进行样式设置、组合或调试时使用。 +- 当初始化新项目或切换设计系统预设时使用。 +- 用于获取组件文档、示例和 API 参考。 + +## 当前项目上下文 + +```json +!`npx shadcn@latest info --json 2>/dev/null || echo '{"error": "No shadcn project found. Run shadcn init first."}'` +``` + +上述 JSON 包含项目配置和已安装的组件。使用 `npx shadcn@latest docs ` 获取任意组件的文档和示例 URL。 + +## 原则 + +1. **优先使用现有组件。** 在编写自定义 UI 之前，使用 `npx shadcn@latest search` 检查注册表。同时也要检查社区注册表。 +2. **组合，不要重新发明。** 设置页面 = Tabs + Card + 表单控件。仪表板 = Sidebar + Card + Chart + Table。 +3. **优先使用内置变体，而非自定义样式。** 例如 `variant="outline"`、`size="sm"` 等。 +4. **使用语义化颜色。** 例如 `bg-primary`、`text-muted-foreground`——绝不使用 `bg-blue-500` 这样的原始值。 + +## 关键规则 + +以下规则**始终强制执行**。每条规则链接到一个包含错误/正确代码对的文件。 + +### 样式与 Tailwind → [styling.md](./rules/styling.md) + +- **`className` 用于布局，而非样式。** 切勿覆盖组件的颜色或排版。 +- **不要使用 `space-x-*` 或 `space-y-*`。** 使用 `flex` 配合 `gap-*`。对于垂直堆叠，使用 `flex flex-col gap-*`。 +- **当宽度和高度相等时使用 `size-*`。** 使用 `size-10` 而非 `w-10 h-10`。 +- **使用 `truncate` 简写。** 而非 `overflow-hidden text-ellipsis whitespace-nowrap`。 +- **不要手动使用 `dark:` 颜色覆盖。** 使用语义化令牌（`bg-background`、`text-muted-foreground`）。 +- **使用 `cn()` 处理条件类名。** 不要手写模板字面量三元表达式。 +- **覆盖类组件上不要手动设置 `z-index`。** Dialog、Sheet、Popover 等会自行处理层级。 + +### 表单与输入 → [forms.md](./rules/forms.md) + +- **表单使用 `FieldGroup` + `Field`。** 切勿在表单布局中使用原始的 `div` 配合 `space-y-*` 或 `grid gap-*`。 +- **`InputGroup` 使用 `InputGroupInput`/`InputGroupTextarea`。** 切勿在 `InputGroup` 内部使用原始的 `Input`/`Textarea`。 +- **输入框内的按钮使用 `InputGroup` + `InputGroupAddon`。** +- **选项集（2–7 个选项）使用 `ToggleGroup`。** 不要循环使用 `Button` 并手动维护激活状态。 +- **使用 `FieldSet` + `FieldLegend` 对相关复选框/单选框进行分组。** 不要使用带标题的 `div`。 +- **字段验证使用 `data-invalid` + `aria-invalid`。** 在 `Field` 上使用 `data-invalid`，在控件上使用 `aria-invalid`。对于禁用状态：在 `Field` 上使用 `data-disabled`，在控件上使用 `disabled`。 + +### 组件结构 → [composition.md](./rules/composition.md) + +- **项始终放在其 Group 内部。** `SelectItem` → `SelectGroup`。`DropdownMenuItem` → `DropdownMenuGroup`。`CommandItem` → `CommandGroup`。 +- **使用 `asChild`（radix）或 `render`（base）实现自定义触发器。** 从 `npx shadcn@latest info` 检查 `base` 字段。→ [base-vs-radix.md](./rules/base-vs-radix.md) +- **Dialog、Sheet 和 Drawer 始终需要 Title。** `DialogTitle`、`SheetTitle`、`DrawerTitle` 对无障碍访问是必需的。如果视觉上需要隐藏，使用 `className="sr-only"`。 +- **使用完整的 Card 组合。** `CardHeader`/`CardTitle`/`CardDescription`/`CardContent`/`CardFooter`。不要把所有内容都塞进 `CardContent`。 +- **Button 没有 `isPending`/`isLoading`。** 使用 `Spinner` + `data-icon` + `disabled` 组合。 +- **`TabsTrigger` 必须放在 `TabsList` 内部。** 切勿直接在 `Tabs` 中渲染触发器。 +- **`Avatar` 始终需要 `AvatarFallback`。** 用于图片加载失败的情况。 + +### 使用组件，而非自定义标记 → [composition.md](./rules/composition.md) + +- **在编写自定义标记之前，优先使用现有组件。** 在编写带样式的 `div` 之前，先检查是否存在可用的组件。 +- **提示/标注使用 `Alert`。** 不要构建自定义样式的 div。 +- **空状态使用 `Empty`。** 不要构建自定义的空状态标记。 +- **Toast 通过 `sonner` 实现。** 使用 `sonner` 中的 `toast()` 函数。 +- **使用 `Separator`** 替代 `
` 或 `
`。 +- **使用 `Skeleton`** 作为加载占位符。不要使用自定义的 `animate-pulse` div。 +- **使用 `Badge`** 替代自定义样式的 span。 + +### 图标 → [icons.md](./rules/icons.md) + +- **`Button` 中的图标使用 `data-icon`。** 在图标上使用 `data-icon="inline-start"` 或 `data-icon="inline-end"`。 +- **组件内部的图标不要添加尺寸类。** 组件通过 CSS 处理图标尺寸。不要使用 `size-4` 或 `w-4 h-4`。 +- **将图标作为对象传递，而非字符串键。** 使用 `icon={CheckIcon}`，而不是字符串查找。 + +### CLI + +- **切勿手动解码或获取预设代码。** 直接将其传递给 `npx shadcn@latest init --preset `。 + +## 关键模式 + +以下是区分正确 shadcn/ui 代码的最常见模式。对于边界情况，请参见上面链接的规则文件。 + +```tsx +// 表单布局：使用 FieldGroup + Field，而非 div + Label。 + + + 邮箱 + + + + +// 验证：在 Field 上使用 data-invalid，在控件上使用 aria-invalid。 + + 邮箱 + + 无效的邮箱地址。 + + +// 按钮中的图标：使用 data-icon，不要添加尺寸类。 + + +// 间距：使用 gap-*，而非 space-y-*。 +
// 正确 +
// 错误 + +// 相等尺寸：使用 size-*，而非 w-* h-*。 + // 正确 + // 错误 + +// 状态颜色：使用 Badge 变体或语义化令牌，而非原始颜色。 ++20.1% // 正确 ++20.1% // 错误 +``` + +## 组件选择 + +| 需求 | 使用 | +| ------------------------ | ---------------------------------------------------------------------------------------------------- | +| 按钮/操作 | `Button`，配合适当的 variant | +| 表单输入 | `Input`、`Select`、`Combobox`、`Switch`、`Checkbox`、`RadioGroup`、`Textarea`、`InputOTP`、`Slider` | +| 在 2–5 个选项之间切换 | `ToggleGroup` + `ToggleGroupItem` | +| 数据展示 | `Table`、`Card`、`Badge`、`Avatar` | +| 导航 | `Sidebar`、`NavigationMenu`、`Breadcrumb`、`Tabs`、`Pagination` | +| 覆盖层 | `Dialog`（模态框）、`Sheet`（侧面板）、`Drawer`（底部面板）、`AlertDialog`（确认弹窗） | +| 反馈 | `sonner`（Toast）、`Alert`、`Progress`、`Skeleton`、`Spinner` | +| 命令面板 | `Dialog` 内部的 `Command` | +| 图表 | `Chart`（封装 Recharts） | +| 布局 | `Card`、`Separator`、`Resizable`、`ScrollArea`、`Accordion`、`Collapsible` | +| 空状态 | `Empty` | +| 菜单 | `DropdownMenu`、`ContextMenu`、`Menubar` | +| 工具提示/信息 | `Tooltip`、`HoverCard`、`Popover` | + +## 关键字段 + +注入的项目上下文包含以下关键字段： + +- **`aliases`** → 为导入使用实际的别名前缀（例如 `@/`、`~/`），切勿硬编码。 +- **`isRSC`** → 当为 `true` 时，使用 `useState`、`useEffect`、事件处理器或浏览器 API 的组件需要在文件顶部添加 `"use client"`。在就此指令提供建议时，始终参考此字段。 +- **`tailwindVersion`** → `"v4"` 使用 `@theme inline` 块；`"v3"` 使用 `tailwind.config.js`。 +- **`tailwindCssFile`** → 定义自定义 CSS 变量的全局 CSS 文件。始终编辑此文件，切勿新建。 +- **`style`** → 组件视觉风格（例如 `nova`、`vega`）。 +- **`base`** → 底层基础库（`radix` 或 `base`）。影响组件 API 和可用属性。 +- **`iconLibrary`** → 决定图标的导入来源。`lucide` 使用 `lucide-react`，`tabler` 使用 `@tabler/icons-react`，以此类推。切勿假设使用 `lucide-react`。 +- **`resolvedPaths`** → 组件、工具函数、Hook 等的精确文件系统目标路径。 +- **`framework`** → 路由和文件约定（例如 Next.js App Router 与 Vite SPA）。 +- **`packageManager`** → 用于安装任何非 shadcn 依赖（例如 `pnpm add date-fns` 与 `npm install date-fns`）。 + +完整字段参考请参见 [cli.md — `info` 命令](./cli.md)。 + +## 组件文档、示例与用法 + +运行 `npx shadcn@latest docs ` 获取组件的文档、示例和 API 参考的 URL。获取这些 URL 以查看实际内容。 + +```bash +npx shadcn@latest docs button dialog select +``` + +**在创建、修复、调试或使用组件时，始终先运行 `npx shadcn@latest docs` 并获取 URL。** 这确保你使用的是正确的 API 和使用模式，而非凭空猜测。 + +## 工作流程 + +1. **获取项目上下文**——已在上方注入。如果需要刷新，再次运行 `npx shadcn@latest info`。 +2. **首先检查已安装的组件**——在运行 `add` 之前，始终检查项目上下文中的 `components` 列表，或列出 `resolvedPaths.ui` 目录。不要导入尚未添加的组件，也不要重复添加已安装的组件。 +3. **查找组件**——`npx shadcn@latest search`。 +4. **获取文档和示例**——运行 `npx shadcn@latest docs ` 获取 URL，然后获取这些 URL 的内容。使用 `npx shadcn@latest view` 浏览尚未安装的注册表项。要预览对已安装组件的更改，使用 `npx shadcn@latest add --diff`。 +5. **安装或更新**——`npx shadcn@latest add`。更新现有组件时，先使用 `--dry-run` 和 `--diff` 预览更改（请参见下文[更新组件](#updating-components)）。 +6. **修复第三方组件中的导入路径**——从社区注册表（例如 `@bundui`、`@magicui`）添加组件后，检查新增的非 UI 文件中是否存在硬编码的导入路径（如 `@/components/ui/...`）。这些路径可能与项目实际的别名不匹配。使用 `npx shadcn@latest info` 获取正确的 `ui` 别名（例如 `@workspace/ui/components`）并相应重写导入。CLI 会为其自己的 UI 文件重写导入路径，但第三方注册表组件可能使用与项目不匹配的默认路径。 +7. **审查新增的组件**——从任何注册表添加组件或块之后，**始终读取新增的文件并验证其正确性**。检查是否缺少子组件（例如 `SelectItem` 没有 `SelectGroup`）、缺少导入、组合不正确或违反[关键规则](#关键规则)。同时将所有图标导入替换为项目上下文中的 `iconLibrary`（例如，如果注册表项使用 `lucide-react` 但项目使用 `hugeicons`，则相应替换导入和图标名称）。解决所有问题后再继续。 +8. **注册表必须明确指定**——当用户要求添加块或组件时，**不要猜测注册表**。如果没有指定注册表（例如用户说"添加一个登录块"但没有指定 `@shadcn`、`@tailark` 等），询问使用哪个注册表。切勿代表用户默认选择注册表。 +9. **切换预设**——先询问用户：**重新安装（reinstall）**、**合并（merge）** 还是 **跳过（skip）**？ + - **重新安装**：`npx shadcn@latest init --preset --force --reinstall`。覆盖所有组件。 + - **合并**：`npx shadcn@latest init --preset --force --no-reinstall`，然后运行 `npx shadcn@latest info` 列出已安装的组件，再对每个已安装组件分别使用 `--dry-run` 和 `--diff` 进行[智能合并](#updating-components)。 + - **跳过**：`npx shadcn@latest init --preset --force --no-reinstall`。仅更新配置和 CSS，组件保持不变。 + +## 更新组件 + +当用户要求从上游更新组件同时保留本地更改时，使用 `--dry-run` 和 `--diff` 进行智能合并。**切勿手动从 GitHub 获取原始文件——始终使用 CLI。** + +1. 运行 `npx shadcn@latest add --dry-run` 查看所有会受到影响的文件。 +2. 对每个文件，运行 `npx shadcn@latest add --diff ` 查看上游与本地之间的差异。 +3. 根据差异逐文件决定： + - 无本地更改→可安全覆盖。 + - 有本地更改→读取本地文件，分析差异，在保留本地修改的同时应用上游更新。 + - 用户说"直接更新所有内容"→使用 `--overwrite`，但先确认。 +4. **未经用户明确批准，切勿使用 `--overwrite`。** + +## 快速参考 + +```bash +# 创建新项目。 +npx shadcn@latest init --name my-app --preset base-nova +npx shadcn@latest init --name my-app --preset a2r6bw --template vite + +# 创建单体仓库项目。 +npx shadcn@latest init --name my-app --preset base-nova --monorepo +npx shadcn@latest init --name my-app --preset base-nova --template next --monorepo + +# 初始化现有项目。 +npx shadcn@latest init --preset base-nova +npx shadcn@latest init --defaults # 快捷方式：--template=next --preset=base-nova + +# 添加组件。 +npx shadcn@latest add button card dialog +npx shadcn@latest add @magicui/shimmer-button +npx shadcn@latest add --all + +# 在添加/更新之前预览更改。 +npx shadcn@latest add button --dry-run +npx shadcn@latest add button --diff button.tsx +npx shadcn@latest add @acme/form --view button.tsx + +# 搜索注册表。 +npx shadcn@latest search @shadcn -q "sidebar" +npx shadcn@latest search @tailark -q "stats" + +# 获取组件文档和示例 URL。 +npx shadcn@latest docs button dialog select + +# 查看注册表项详情（针对尚未安装的项）。 +npx shadcn@latest view @shadcn/button +``` + +**命名预设：** `base-nova`、`radix-nova` +**模板：** `next`、`vite`、`start`、`react-router`、`astro`（均支持 `--monorepo`）和 `laravel`（不支持单体仓库） +**预设代码：** 以 `a` 开头的 Base62 字符串（例如 `a2r6bw`），来自 [ui.shadcn.com](https://ui.shadcn.com)。 + +## 详细参考 + +- [rules/forms.md](./rules/forms.md) — FieldGroup、Field、InputGroup、ToggleGroup、FieldSet、验证状态 +- [rules/composition.md](./rules/composition.md) — Groups、覆盖层、Card、Tabs、Avatar、Alert、Empty、Toast、Separator、Skeleton、Badge、Button 加载状态 +- [rules/icons.md](./rules/icons.md) — data-icon、图标尺寸、将图标作为对象传递 +- [rules/styling.md](./rules/styling.md) — 语义化颜色、变体、className、间距、尺寸、truncate、深色模式、cn()、z-index +- [rules/base-vs-radix.md](./rules/base-vs-radix.md) — asChild 与 render、Select、ToggleGroup、Slider、Accordion +- [cli.md](./cli.md) — 命令、标志、预设、模板 +- [customization.md](./customization.md) — 主题化、CSS 变量、扩展组件 + +## 限制 +- 仅当任务明确符合上述范围时使用此技能。 +- 请勿将输出视为环境特定验证、测试或专家审查的替代方案。 +- 如果缺少必要的输入、权限、安全边界或成功标准，请停下来并要求澄清。 diff --git a/agents/openai.yml b/agents/openai.yml new file mode 100644 index 0000000..ab636da --- /dev/null +++ b/agents/openai.yml @@ -0,0 +1,5 @@ +interface: + display_name: "shadcn/ui" + short_description: "Manages shadcn/ui components — adding, searching, fixing, debugging, styling, and composing UI." + icon_small: "./assets/shadcn-small.png" + icon_large: "./assets/shadcn.png" diff --git a/assets/shadcn-small.png b/assets/shadcn-small.png new file mode 100644 index 0000000000000000000000000000000000000000..547154b97f2298335159c23eec1dac0d147a1246 GIT binary patch literal 1049 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`Ea{HEjtmSN`?>!lvI6-E$sR$z z3=CCj3=9n|3=F@3LJcn%7)lKo7+xhXFj&oCU=S~uvn$XBDAAG{;hE;^%b*2hb1<+n z3NbJPS&Tr)z$nE4G7ZRL@M4sPvx68lplX;H7}_%#SfFa6fHVkr05M1pgl1mAh%j*h z6I`{x0%imor0saV%ts)_S>O>_%)r1c48n{Iv*t(uO^eJ7i71Ki^|4CM&(%vz$xlkv ztH>0+>{umUo3Q%e#RDspr3imfVamB1>jfNYSkzLEl1NlCV?QiN}Sf^&XRs)CuG zfu4bq9hZWFf=y9MnpKdC8&o@xXRDM^Qc_^0uU}qXu2*iXmtT~wZ)j<0sc&GUZ)Btk zRH0j3nOBlnp_^B%3^4>|j!SBBa#3bMNoIbY0?6FNr2NtnTO}osMQ{LdXGvxn!lt}p zsJDO~)CbAv8|oS8!_5Y2wE>A*`4?rT0&NDFZ)a!&R*518wZ}#uWI2*!AU*|)0=;U- zWup%dHajlKxQFb(K%V94;uvBfm>Yb$>yU#$kCbgiC(9RwrlwA(rsW(``(6H=zq@!* zUB_~Trk_lTdxPh$yxDTsVY&L;b+6{tRm^+d+gl^OQcCIBok=%y)Vhx@dR1ceL3r{0 z9=2nMXx8DxEkhL{v?(>~8{qDBkfB!u-iDB`| z-5d%Ae82YI%n8Zg9$mRN?o-|V)V*=5b-R>a>}P2{=pcK^B(&B-W{C#Z!Q%b*ueK>n zK6ymYLRneebCKDSzcqHEHFopo-mkH{zIkt2Z0^086Tko7%N)NxoZYSDM1jSUwPpuS zSeq*wzrC2D(tq4pZ#s9QP@Cd8Q^wW3*2cL_519?*;#4`B;+ei#o;C{Kkamm3Jooa; zE$3K-+c(6ShTjelW_B*W5o zcS6z34IR5C-SIF8m(lui^IOy!-~We?b1?PSGniCYR=ZyR^%<1lJzf1=);T3K0RU@N BSy=!8 literal 0 HcmV?d00001 diff --git a/assets/shadcn.png b/assets/shadcn.png new file mode 100644 index 0000000000000000000000000000000000000000..b7b6814acc25073e5f48099b1fd3f70c47bfb1c3 GIT binary patch literal 3852 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 **重要说明：** 始终使用项目的包管理器来运行命令：`npx shadcn@latest`、`pnpm dlx shadcn@latest` 或 `bunx --bun shadcn@latest`。从项目上下文中检查 `packageManager` 以选择正确的命令。以下示例使用 `npx shadcn@latest`，但请替换为项目对应的正确运行器。 + +> **重要说明：** 只使用下面列出的标志。不要发明或猜测标志——如果某个标志未在此处列出，则它不存在。CLI 会从项目的锁定文件中自动检测包管理器；没有 `--package-manager` 标志。 + +## 目录 + +- 命令：init、add（空跑、智能合并）、search、view、docs、info、build +- 模板：next、vite、start、react-router、astro +- 预设：命名、代码、URL 格式与字段 +- 切换预设 + +--- + +## 命令 + +### `init` — 初始化或创建项目 + +```bash +npx shadcn@latest init [components...] [options] +``` + +在已有项目中初始化 shadcn/ui，或创建新项目（当提供了 `--name` 时）。可选地在同一步骤中安装组件。 + +| 标志 | 缩写 | 描述 | 默认值 | +| ------------------------ | --- | -------------------------------------------------- | ------- | +| `--template