// Create MDX documentation files with proper frontmatter, imports, and component integration. Apply when creating or updating Fumadocs documentation pages in content/docs/.
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 | 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</ComponentName>
### 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