菜单
Register components in registry.json for shadcn/ui add command. Apply when adding new 8-bit components to the component library.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Create pixelated borders, shadows, and effects for 8-bit retro components. Apply when building 8-bit styled UI components that need authentic pixel art aesthetics.
Create documentation with gaming-specific examples, retro styling, and 8-bit terminology. Apply when documenting gaming blocks, RPG components, or retro-styled UI elements.
Optimize 8-bit animations for smooth performance. Apply when creating animated pixel art, game UI effects, or any retro-styled animations.
Import directly from source files instead of barrel files. Apply when using libraries like lucide-react, @mui/material, or @radix-ui/react-* to reduce bundle size and improve dev boot time.
Use next/dynamic for lazy-loading heavy components. Apply when importing large components like editors, charts, or rich text editors that aren't needed on initial render.
Best practices for wrapping shadcn/ui components. Apply when creating 8-bit styled variants of existing shadcn/ui components.
| name | registry-component-patterns |
| description | Register components in registry.json for shadcn/ui add command. Apply when adding new 8-bit components to the component library. |
Register 8-bit components in registry.json for discovery via 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"
}
]
}
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"
}
]
}
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"
}
]
Use gaming-specific categories:
"categories": ["gaming"]
Available categories: gaming, layout, form, data-display, feedback, navigation, overlay.
List base shadcn dependencies:
"registryDependencies": ["button", "dialog"]
For blocks with multiple components:
"registryDependencies": ["card", "button", "progress"]
registry:component for single components, registry:block for layoutsgaming for retro-themed componentscomponents/ui/8bit/component.tsxregistry.json with entry (copy existing component as template)retro.css dependencypnpm dlx shadcn@latest add @8bitcn/component