用途
shadcn（shadcn/ui）是一个用于构建 UI、组件与设计系统的框架，其核心特点是组件以源代码形式通过 CLI 添加到用户项目中，而非作为依赖包引入。该技能用于管理 shadcn 组件与项目，涵盖添加、搜索、修复、调试、样式调整与界面组合，包括聊天界面。
主要能力
- 项目上下文感知：通过
npx shadcn@latest info --json获取项目配置与已安装组件列表，上下文包含 aliases（导入别名）、isRSC（是否 React 服务端组件）、tailwindVersion（v3/v4）、tailwindCssFile、style、base（radix 或 base）、iconLibrary、resolvedPaths、framework、packageManager、preset 等字段。 - 组件搜索与查看：使用
npx shadcn@latest search在配置的注册表中查找组件；用view浏览尚未安装的注册表条目。 - 文档与示例获取：用
npx shadcn@latest docs <component>获取组件的文档、示例与 API 参考 URL，再抓取内容。 - 添加与更新组件：
npx shadcn@latest add，支持--dry-run与--diff预览变更。 - 预设管理：
preset decode、preset url、preset open、preset resolve用于解码预设码、生成或打开预设构建器链接、解析当前项目预设；apply <code>可覆盖式或按--only theme,font部分应用预设。 - 第三方注册表组件导入修复：添加社区注册表组件后，检查非 UI 文件中的硬编码导入路径并按项目实际别名改写；同时将图标导入替换为项目所用图标库。
使用方式
所有 CLI 命令需使用项目的包运行器：npx shadcn@latest、pnpm dlx shadcn@latest 或 bunx --bun shadcn@latest，以项目 packageManager 为准。资料给出的常用命令示例（保留原文）：
# Create a new project.
npx shadcn@latest init --name my-app --preset base-nova
# Initialize existing project.
npx shadcn@latest init --preset base-nova
# Apply a preset to an existing project.
npx shadcn@latest apply a2r6bw
# Add components.
npx shadcn@latest add button card dialog
npx shadcn@latest add @magicui/shimmer-button
# Preview changes before adding/updating.
npx shadcn@latest add button --dry-run
npx shadcn@latest add button --diff button.tsx
# Search registries.
npx shadcn@latest search @shadcn -q "sidebar"
# Get component docs and example URLs.
npx shadcn@latest docs button dialog select
工作流大致为：获取项目上下文 → 先检查已安装组件 → 搜索组件 → 获取文档与示例 → 安装或更新 → 修复第三方组件的导入 → 审查新增组件 → 必要时切换预设。组件更新时用 --dry-run 与 --diff 逐文件比对，保留本地修改；未经用户明确同意不得使用 --overwrite。
规则要点
- 优先使用已有组件与内置变体（variant、size），用语义色（如 bg-primary、text-muted-foreground），不使用原始颜色值。
- 布局用 className，不用 space-x-* / space-y-，改用 flex 配 gap-；宽高相等用 size-*；用 truncate 简写；不用手写 dark: 颜色覆盖；条件类用 cn()。
- 表单用 FieldGroup + Field；校验用 data-invalid（Field）与 aria-invalid（控件）；图标在 Button 中用 data-icon 且不加尺寸类。
- 条目须放在对应 Group 中（如 SelectItem 在 SelectGroup 内）；Dialog、Sheet、Drawer 必须有 Title；Card 使用完整组合；TabsTrigger 须在 TabsList 内；Avatar 需 AvatarFallback。
- 聊天界面使用 MessageScroller、Message、Bubble、Attachment、Marker 等原语，不手写滚动容器或气泡 div。
适用场景
适用于使用 shadcn/ui 的前端项目，尤其是基于 Next.js、Vite、Astro 等模板构建的界面开发与设计系统维护，以及需要组件化聊天界面的场景。
限制
资料未提供该技能的收费、价格、平台限制或效果数据；预设码不支持 --only icon，因为图标变更可能需要完整重装组件。添加区块或组件时若用户未指定注册表，应询问而非默认选择。