关于 install-kokonutui-component
install-kokonutui-component 是一项用于查找并向项目添加 KokonutUI React 组件的技能。它介绍通过 shadcn MCP 服务或 CLI 安装；组件以可编辑源码复制，而非作为 npm 包安装。
主要功能
- 01浏览组件注册表
- 02通过 shadcn MCP 安装
- 03通过 shadcn CLI 安装
- 04解析组件依赖
- 05编辑复制的源码
适用场景
- 01为界面查找 KokonutUI 组件
- 02向 shadcn 项目添加组件
- 03定制已安装组件的源码
MCP 相关
如果有 shadcn MCP 服务，此技能可用它浏览并安装 @kokonutui 注册表中的组件；否则介绍使用 shadcn CLI。
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/install-kokonutui-component确认已加载。
详细介绍
安装 KokonutUI 组件
KokonutUI 是一个包含 100 多个开源 React 组件的集合，基于 Next.js、React、Tailwind CSS v4 和 Motion 构建。组件不会作为 npm 包发布，而是通过 shadcn CLI 以源代码的形式复制到目标项目中， 因此之后可以自由编辑。
探索现有组件
https://kokonutui.com/r/registry.json— 机器可读的可安装组件索引，其中包含依赖项和文件列表。https://kokonutui.com/llms.txt— 文档索引，每个组件占一行，并附有其 Markdown 源文件链接。https://kokonutui.com/r/{name}.json— 单个组件的完整注册表条目，包含其提供的每个文件的完整源代码。
若要搜索文档，请使用 Accept: text/markdown 请求任意文档页面（或在 URL 后添加 .md），以获取整洁的 Markdown，而非 HTML。例如：
https://kokonutui.com/docs/cards/card-flip.md。
安装
如果有可用的 shadcn MCP 服务，可直接使用它浏览和安装组件——它开箱即支持 @kokonutui 注册表。设置方法：
https://kokonutui.com/docs/mcp。
否则，请使用带有 @kokonutui 命名空间的 shadcn CLI：
npx shadcn@latest add @kokonutui/card-flip
将 card-flip 替换为 registry.json 中任意一个 name。CLI 会自动解析组件的 registryDependencies（例如 button 或 textarea 这样的 shadcn/ui 基础组件）以及其 npm dependencies（例如 motion 或 lucide-react）。
目标项目的前置条件
- 已配置 Tailwind CSS v4。
- 已初始化 shadcn/ui（
npx shadcn@latest init），以确保存在components.json和lib/utils.ts中的cn工具函数。 - 对于使用现代 React 功能的组件，需要 React 19 或更高版本。
安装后
默认情况下，组件会放在 components/kokonutui/{name}.tsx 中。它是纯源代码——直接编辑即可，无需对其进行封装。请查看组件的文档页面，了解属性和用法示例。
许可证
MIT。组件可用于商业项目，也可进行修改和发布。