SuperAPI AI 工具集

use-shadcn

前端与建站

查看项目

更新于 10-27 16:28

技能介绍

use-shadcn 是一个面向 shadcn/ui 组件开发的技能,主要用于在 monorepo 项目中按照既定结构与编码标准构建组件。当用户输入 /use-shadcn 时触发使用。

用途 该技能用于指导 shadcn/ui 组件的构建,确保组件遵循 monorepo 结构、导入模式和编码规范。

主要能力

  • 使用 MCP 服务器:使用 shadcnui-official 处理单个组件、变体和规范模式;使用 shadcnui-jpisnice-react 处理完整区块、演示和页面模板。仅在不确定实现方式或遇到错误时才调用 MCP。
  • 在 @repo/ui 中安装:将组件安装到 packages/ui/src/components/,确保 components.json 指向 @repo/ui/lib/utils 和 @repo/ui/components,并遵循现有组件组织模式。
  • 遵循 monorepo 导入模式:从 @repo/ui/components/* 导入,绝不直接从 packages/ui 导入;使用 @repo/ui/lib/utils 获取 cn 等工具;从 @repo/ui/radix 导入 Radix 原语,绝不直接从 @radix-ui/react-* 导入。
  • 应用编码标准:遵循 TypeScript 规则(接口、类型推断、RORO 模式),使用 class-variance-authority(cva)处理变体,应用移动优先的响应式设计,遵循 linting 规则(Biome + ESLint)。
  • 验证与测试:运行 pnpm lint:fix 确保代码质量,验证导入在消费应用中正常工作,测试组件功能与响应式表现。

使用方式 当用户输入 /use-shadcn 时触发该技能。技能会按照上述流程指导组件的安装、导入、编码与验证。

适用场景 适用于在 monorepo 项目中开发 shadcn/ui 组件的场景,尤其是需要统一组件结构、导入路径和编码规范的团队协作环境。

限制 资料未提供关于收费、价格、平台支持范围或具体效果的信息。