注册组件模式Skill registry-component-patterns

---

name: registry-component-patterns description: 在registry.json中注册组件，用于shadcn/ui添加命令。适用于向组件库添加新的8位组件。

注册组件模式

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

组件条目模式

{
  "name": "button",
  "type": "registry:component",
  "title": "8位按钮",
  "description": "一个简单的8位按钮组件",
  "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": "chapter-intro",
  "type": "registry:block",
  "title": "8位章节介绍",
  "description": "一个具有像素艺术背景的电影式章节/关卡介绍。",
  "registryDependencies": ["card"],
  "categories": ["gaming"],
  "files": [
    {
      "path": "components/ui/8bit/blocks/chapter-intro.tsx",
      "type": "registry:block",
      "target": "components/ui/8bit/blocks/chapter-intro.tsx"
    },
    {
      "path": "components/ui/8bit/styles/retro.css",
      "type": "registry:component",
      "target": "components/ui/8bit/styles/retro.css"
    },
    {
      "path": "components/ui/8bit/card.tsx",
      "type": "registry:component",
      "target": "components/ui/8bit/card.tsx"
    }
  ]
}

必需的 retro.css

始终在注册条目中包含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依赖：

"registryDependencies": ["button", "dialog"]

对于包含多个组件的块：

"registryDependencies": ["card", "button", "progress"]

关键原则

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

添加新组件

1. 在components/ui/8bit/component.tsx中创建组件
2. 更新registry.json，添加条目（复制现有组件作为模板）
3. 包含retro.css依赖
4. 测试：pnpm dlx shadcn@latest add @8bitcn/component