关于 fumadocs-registry-integration
fumadocs-registry-integration 说明如何在 registry.json 中登记 8-bit 组件和预构建区块,面向维护组件注册表的开发者。内容涵盖分类、依赖、文件路径及通过 shadcn 命令行安装测试。
主要功能
- 01组件与区块的条目范式
- 02登记必需的 retro.css 文件
- 03分类和依赖项说明
- 04源路径与目标路径约定
- 05命令行安装测试步骤
适用场景
- 01登记可复用的 8-bit 组件
- 02添加预构建游戏界面区块
- 03准备通过 shadcn 命令行安装的组件
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ theorcdev/ 8bitcn-ui --skill fumadocs-registry-integration安装后在 Claude Code 中输入/fumadocs-registry-integration确认已加载。
详细介绍
注册表集成
在 registry.json 中注册 8-bit 组件,以便通过 shadcn add @8bitcn/[component-name] 发现。
组件条目模式
{
"name": "button",
"type": "registry:component",
"title": "8-bit Button",
"description": "A simple 8-bit button component",
"registryDependencies": ["button"],
"files": [
{
"path": "components/ui/8bit/button.tsx",
"type": "registry:component",
"target": "components/ui/8bit/button.tsx"
},
{
"path": "components/ui/8bit/styles/retro.css",
"type": "registry:component",
"target": "components/ui/8bit/styles/retro.css"
}
]
}
区块条目模式
对于游戏 UI 等预构建布局:
{
"name": "quest-log",
"type": "registry:block",
"title": "8-bit Quest Log",
"description": "An 8-bit quest and mission tracking system.",
"registryDependencies": ["card", "accordion"],
"categories": ["gaming"],
"files": [
{
"path": "components/ui/8bit/quest-log.tsx",
"type": "registry:block",
"target": "components/ui/8bit/quest-log.tsx"
},
{
"path": "components/ui/8bit/styles/retro.css",
"type": "registry:component",
"target": "components/ui/8bit/styles/retro.css"
}
]
}
必需的 retro.css
始终在 files 数组中包含 retro.css:
"files": [
{
"path": "components/ui/8bit/new-component.tsx",
"type": "registry:component",
"target": "components/ui/8bit/new-component.tsx"
},
{
"path": "components/ui/8bit/styles/retro.css",
"type": "registry:component",
"target": "components/ui/8bit/styles/retro.css"
}
]
分类
游戏组件请使用游戏专属分类:
"categories": ["gaming"]
可用分类:gaming、layout、form、data-display、feedback、navigation、overlay。
注册表依赖项
列出基础 shadcn 依赖项(不是 8-bit 版本):
"registryDependencies": ["button", "dialog", "progress"]
对于包含多个组件的区块:
"registryDependencies": ["card", "button", "progress", "tabs"]
类型选择
registry:component - 单个可复用组件:
{
"type": "registry:component",
"files": [...]
}
registry:block - 预构建布局或功能:
{
"type": "registry:block",
"categories": ["gaming"],
"files": [...]
}
完整示例
{
"name": "health-bar",
"type": "registry:component",
"title": "8-bit Health Bar",
"description": "An 8-bit health bar component for game UI.",
"registryDependencies": ["progress"],
"files": [
{
"path": "components/ui/8bit/health-bar.tsx",
"type": "registry:component",
"target": "components/ui/8bit/health-bar.tsx"
},
{
"path": "components/ui/8bit/progress.tsx",
"type": "registry:component",
"target": "components/ui/8bit/progress.tsx"
},
{
"path": "components/ui/8bit/styles/retro.css",
"type": "registry:component",
"target": "components/ui/8bit/styles/retro.css"
}
]
}
核心原则
- 类型 - 单个组件使用
registry:component,布局使用registry:block - 必需的 retro.css - 始终在 files 数组中包含
- 目标路径 - 源路径和目标路径相同
- 分类 - 复古风格区块使用
gaming - 依赖项 - 列出基础 shadcn/ui 组件(不是 8-bit 组件)
- 描述 - 简洁明了,适合 CLI 输出
- 文件顺序 - 组件在前,retro.css 在后
添加新组件
- 在
components/ui/8bit/component.tsx中创建组件 - 在
content/docs/components/component.mdx中创建文档 - 在
registry.json中添加条目:- 复制现有组件作为模板
- 更新名称、标题和描述
- 设置正确的 registryDependencies
- 在 files 中包含 retro.css
- 测试:
pnpm dlx shadcn@latest add @8bitcn/component
参考
registry.json- 完整组件注册表content/docs/components/*.mdx- 组件文档
评论
支持 Markdown