shadcn/ui组件注册集成技能Skill fumadocs-registry-integration

---

name: fumadocs-registry-integration description: 在 registry.json 中注册 8-bit 组件，用于 shadcn/ui 添加命令。在向组件库分发中添加新组件时应用。

注册集成

在 registry.json 中注册 8-bit 组件，以便通过 shadcn add @8bitcn/[组件名称] 发现。

组件条目模式

{
  "name": "button",
  "type": "registry:component",
  "title": "8-bit Button",
  "description": "一个简单的 8-bit 按钮组件",
  "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": "一个 8-bit 任务和使命追踪系统。",
  "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": "一个用于游戏 UI 的 8-bit 生命条组件。",
  "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"
    }
  ]
}

关键原则

1. 类型 - 使用 registry:component 表示单个组件，registry:block 表示布局
2. retro.css 必需 - 始终包含在 files 数组中
3. 目标路径 - 源路径和目标路径相同
4. 类别 - 对于复古主题的块使用 gaming
5. 依赖 - 列出基础 shadcn/ui 组件（非 8-bit）
6. 描述 - 清晰简洁，适用于 CLI 输出
7. 文件顺序 - 组件文件在前，retro.css 在后

添加新组件

1. 在 components/ui/8bit/component.tsx 中创建组件
2. 在 content/docs/components/component.mdx 中创建文档
3. 添加到 registry.json：
   • 复制现有组件作为模板
   • 更新 name、title、description
   • 设置正确的 registryDependencies
   • 包含 retro.css 在 files 中
4. 测试：pnpm dlx shadcn@latest add @8bitcn/component

参考

• registry.json - 完整组件注册表
• content/docs/components/*.mdx - 组件文档