mcpField
R
registry-component-patterns

registry-component-patterns

github.com/theorcdevDevelopment2.1k38 installsUpdated 2d ago
Repository

About registry-component-patterns

A development skill for adding 8-bit components and layout blocks to a registry.json file for shadcn discovery. It covers entry fields, categories, dependencies, file targets, and the required retro.css inclusion.

Key features

  1. 01Define component and block entries
  2. 02Set gaming-focused categories
  3. 03Declare shadcn dependencies
  4. 04Include retro.css in file lists
  5. 05Use matching source and target paths

Use cases

  1. 01Register a new 8-bit component
  2. 02Add a prebuilt game UI layout
  3. 03Prepare entries for shadcn add

Install

Copy the command and run it in a terminal.

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

After installing, type/registry-component-patternsin Claude Code to confirm it loaded.

Details

From the project README

Registry Component Patterns

Register 8-bit components in registry.json for discovery via shadcn add @8bitcn/[component-name].

Component Entry Pattern
{
  "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"
    }
  ]
}
Block Entry Pattern

For pre-built layouts like game UIs:

{
  "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"
    }
  ]
}
Required retro.css

Always include retro.css in registry entries:

"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

Use gaming-specific categories:

"categories": ["gaming"]

Available categories: gaming, layout, form, data-display, feedback, navigation, overlay.

Registry Dependencies

List base shadcn dependencies:

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

For blocks with multiple components:

"registryDependencies": ["card", "button", "progress"]
Key Principles
  1. Type - Use registry:component for single components, registry:block for layouts
  2. retro.css required - Always include in files array
  3. Target path - Use same path for source and target
  4. Categories - Use gaming for retro-themed components
  5. Dependencies - List base shadcn/ui components (not 8-bit versions)
  6. Description - Clear, concise description for CLI output
Adding a New Component
  1. Create component in components/ui/8bit/component.tsx
  2. Update registry.json with entry (copy existing component as template)
  3. Include retro.css dependency
  4. Test with: pnpm dlx shadcn@latest add @8bitcn/component

Comments

Markdown supported