mcpField
R
registry-component-patterns

registry-component-patterns

github.com/theorcdev开发2.1k38 次安装2 天前更新
代码仓库

关于 registry-component-patterns

这项开发技能讲解如何在 registry.json 中添加 8-bit 组件和布局区块，以供 shadcn 发现。内容涵盖条目字段、分类、依赖、文件目标以及必须包含的 retro.css。

主要功能

  1. 01定义组件和区块条目
  2. 02设置游戏相关分类
  3. 03声明 shadcn 依赖项
  4. 04在文件列表中加入 retro.css
  5. 05使用一致的源路径和目标路径

适用场景

  1. 01注册新的 8-bit 组件
  2. 02添加预构建游戏 UI 布局
  3. 03准备 shadcn add 所需条目

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/theorcdev/8bitcn-ui --skill registry-component-patterns

安装后在 Claude Code 中输入/registry-component-patterns确认已加载。

详细介绍

Registry 组件模式

在 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": "chapter-intro",
  "type": "registry:block",
  "title": "8-bit Chapter Intro",
  "description": "A cinematic chapter/level intro with pixel art background.",
  "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

Registry 条目中始终包含 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。

Registry 依赖项

列出基础 shadcn 依赖项：

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

对于包含多个组件的区块：

"registryDependencies": ["card", "button", "progress"]
关键原则
  1. 类型 - 单个组件使用 registry:component，布局使用 registry:block
  2. 必需的 retro.css - 始终将其包含在 files 数组中
  3. 目标路径 - 源路径和目标路径使用相同的路径
  4. 类别 - 复古主题组件使用 gaming
  5. 依赖项 - 列出基础 shadcn/ui 组件（不是 8-bit 版本）
  6. 描述 - 为 CLI 输出提供清晰、简洁的描述
添加新组件
  1. 在 components/ui/8bit/component.tsx 中创建组件
  2. 使用条目更新 registry.json（复制现有组件作为模板）
  3. 添加 retro.css 依赖项
  4. 使用以下命令测试：pnpm dlx shadcn@latest add @8bitcn/component

评论

支持 Markdown