メニュー
Create MDX documentation files with proper frontmatter, imports, and component integration. Apply when creating or updating Fumadocs documentation pages in content/docs/.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/TheOrcDev/8bitcn-ui --skill fumadocs-mdx-structureコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
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.
SKILL.md を表示中
SOC 職業分類に基づく
| name | fumadocs-mdx-structure |
| description | Create MDX documentation files with proper frontmatter, imports, and component integration. Apply when creating or updating Fumadocs documentation pages in content/docs/. |
Create well-structured MDX documentation files for 8-bit components following the established patterns.
---
title: Component Name
description: Brief description of the 8-bit component.
---
All documentation files require these imports:
import { ComponentName } from "@/components/ui/8bit/component-name";
import CopyCommandButton from "@/components/copy-command-button";
import InstallationCommands from "@/components/installation-commands";
import ComponentPreview from "@/components/component-preview";
Place immediately after frontmatter:
<div className="flex flex-col md:flex-row items-center justify-end gap-2 mb-2">
<CopyCommandButton
copyCommand="pnpm dlx shadcn@latest add @8bitcn/component-name"
command="pnpm dlx shadcn@latest add @8bitcn/component-name"
/>
</div>
Wrap component examples:
<ComponentPreview title="8-bit ComponentName component" name="component-name">
<ComponentName>Example</ComponentName>
</ComponentPreview>
## Installation
---
<InstallationCommands packageName="component-name" />
## Usage
---
```tsx
import { ComponentName } from "@/components/ui/8bit/component-name"
<ComponentName variant="outline">Example</>
### Complete Example
```mdx
---
title: Button
description: Displays an 8-bit button component.
---
import { Button } from "@/components/ui/8bit/button";
import CopyCommandButton from "@/components/copy-command-button";
import InstallationCommands from "@/components/installation-commands";
import ComponentPreview from "@/components/component-preview";
<div className="flex flex-col md:flex-row items-center justify-end gap-2 mb-2">
<CopyCommandButton
copyCommand="pnpm dlx shadcn@latest add @8bitcn/button"
command="pnpm dlx shadcn@latest add @8bitcn/button"
/>
</div>
<ComponentPreview title="8-bit button component" name="button">
<Button>Button</Button>
</ComponentPreview>
## Installation
---
<InstallationCommands packageName="button" />
## Usage
---
```tsx
import { Button } from "@/components/ui/8bit/button"
<Button variant="outline">Button</Button>
### Key Principles
1. **Frontmatter required** - title and description are mandatory
2. **Import order** - Component → utilities → UI components
3. **Copy button** - Place before ComponentPreview
4. **ComponentPreview** - Use for all component examples
5. **Code blocks** - Use ```tsx for TypeScript examples
6. **Section separators** - Use `---` after headings
7. **8-bit imports** - Use `@/components/ui/8bit/` path
### File Location
Place documentation files in:
- `content/docs/components/component-name.mdx` for components
- `content/docs/blocks/category/block-name.mdx` for blocks