mcpField
R
registry-component-patterns

registry-component-patterns

github.com/theorcdev開発2.1k38 回インストール2 日前に更新
リポジトリ

registry-component-patterns について

registry.json に 8-bit コンポーネントやレイアウトブロックを登録し、shadcn から見つけられるようにする開発スキルです。エントリー項目、カテゴリ、依存関係、ファイルの target、必須の retro.css を説明します。

主な機能

  1. 01コンポーネントとブロックのエントリー定義
  2. 02ゲーム向けカテゴリの設定
  3. 03shadcn 依存関係の指定
  4. 04ファイル一覧への retro.css 追加
  5. 05ソースと target に同じパスを指定

活用シーン

  1. 01新しい 8-bit コンポーネントの登録
  2. 02ゲーム UI の既成レイアウト追加
  3. 03shadcn add 用エントリーの準備

インストール

コマンドをコピーしてターミナルで実行します。

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

インストール後、Claude Code で/registry-component-patternsを入力して読み込まれたか確認します。

詳細

レジストリのコンポーネントパターン

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

レジストリエントリーには、必ず 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 が必須 - 必ず 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 対応