SuperAPI AI 工具集

shadcn

测试与质量

查看项目

更新于 10-15 21:48

技能介绍

用途:shadcn/ui 是构建 UI、组件与设计系统的框架,组件以源代码形式通过 CLI 添加到用户项目。该技能用于管理 shadcn 组件与项目,涵盖添加、搜索、修复、调试、样式设置与组合 UI。

主要能力:提供项目上下文与组件文档。可用 npx shadcn@latest info --json 获取项目配置与已安装组件;用 npx shadcn@latest docs <component> 获取组件文档与示例 URL;用 npx shadcn@latest search 查询注册表,包括社区注册表。遵循“先复用现有组件、优先组合而非重造、优先内置变体、使用语义颜色”等原则,并有表单、组合、图标、样式、base 与 radix 区别等规则的详细参考文件。

使用方式:所有 CLI 命令需按项目 packageManager 使用对应运行器,如 npx shadcn@latest 或 pnpm dlx shadcn@latest。常用命令包括 init 创建或初始化项目、add 添加组件、apply 应用预设、search 搜索、docs 获取文档、view 浏览注册表项。更新组件时先用 --dry-run 与 --diff 预览合并,且不得在未经用户明确同意时使用 --overwrite。第三方注册表组件添加后需检查硬编码导入路径并改为项目别名,同时替换图标库导入。添加区块或组件时若未指定注册表,应先询问,不得默认选择。

适用场景:在 shadcn/ui 项目中新增或更新组件、查询文档与示例、搜索注册表、组合页面(如设置页、仪表盘)、调整主题与样式、排查组件导入与组合问题。

限制:资料未提供收费、价格与具体平台支持范围的完整信息;预设命令需在含 components.json 的现有项目中运行;apply 仅适用于已有项目;icon 预设不支持,仅 theme 与 font;模板与预设的具体可用范围以 CLI 实际输出为准。