SuperAPI AI 工具集

shadcn

测试与质量

查看项目

更新于 10-15 22:39

技能介绍

用途:用于构建 UI、组件和设计系统。组件以源代码形式通过 CLI 添加到用户项目,而非作为依赖包引入,因此可直接修改。该技能负责管理 shadcn 组件与项目,涵盖添加、搜索、修复、调试、样式与组合 UI,并提供项目上下文与组件文档。

主要能力:提供当前项目的配置与已安装组件信息(npx shadcn@latest info --json);通过 npx shadcn@latest docs <component> 获取组件文档、示例与 API 参考地址;用 npx shadcn@latest search 在注册表中搜索组件;用 npx shadcn@latest add 添加或更新组件。强调优先复用已有组件、用组合而非重写、优先使用内置变体与语义化颜色(如 bg-primary、text-muted-foreground)。

使用方式:所有 CLI 命令使用项目包管理器对应的 runner(npx shadcn@latest、pnpm dlx shadcn@latest 或 bunx --bun shadcn@latest)。创建项目如 npx shadcn@latest init --name my-app --preset base-nova;添加组件如 npx shadcn@latest add button card dialog;更新前用 --dry-run 与 --diff 预览,避免直接 --overwrite。添加社区注册表组件后需检查并修正硬编码导入路径,并按项目 iconLibrary 替换图标导入。切换预设需先询问用户选择重装、合并或跳过,且命令应在项目目录内运行。

规则要点:表单使用 FieldGroup + Field,校验用 data-invalid 与 aria-invalid;间距用 gap-* 而非 space-y-;等宽高用 size-;图标通过 data-icon 传入且不加尺寸类;项必须置于对应 Group 内(如 SelectItem 在 SelectGroup),弹层必须有标题。

限制:资料未提供该技能的收费、价格、平台覆盖与效果数据。必须在具体项目上下文中使用,未初始化项目(shadcn init)时 info 会返回错误;预设代码需直接传给 init,不应手动解码;添加组件前应检查已安装列表,避免重复添加或导入未添加的组件。