ReddRadar
Agent skill
fumadocs-mdx-structure
Create MDX documentation files with proper frontmatter, imports, and component integration. Apply when creating or updating Fumadocs documentation pages in content/docs/.
Install this agent skill to your Project
npx add-skill https://github.com/TheOrcDev/8bitcn-ui/tree/main/.claude/skills/fumadocs-mdx-structure
SKILL.md
Fumadocs MDX Structure
Create well-structured MDX documentation files for 8-bit components following the established patterns.
Frontmatter Pattern
---
title: Component Name
description: Brief description of the 8-bit component.
---
Import Pattern
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";
Copy Command Button
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>
Component Preview
Wrap component examples:
<ComponentPreview title="8-bit ComponentName component" name="component-name">
<ComponentName>Example</ComponentName>
</ComponentPreview>
Installation Section
## Installation
---
<InstallationCommands packageName="component-name" />
Usage Section
## 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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
TheOrcDev/8bitcn-ui
component-wrapper-architecture
Best practices for wrapping shadcn/ui components. Apply when creating 8-bit styled variants of existing shadcn/ui components.
TheOrcDev/8bitcn-ui
registry-component-patterns
Register components in registry.json for shadcn/ui add command. Apply when adding new 8-bit components to the component library.
TheOrcDev/8bitcn-ui
retro-css-architecture
Organize 8-bit CSS with custom properties, pixel fonts, and responsive pixel art. Apply when creating or modifying retro-styled components and their CSS.
TheOrcDev/8bitcn-ui
gaming-ui-state-management
Patterns for game-like interfaces - health bars, XP bars, mana bars. Apply when building RPG/retro gaming UI components with state-driven visuals.
TheOrcDev/8bitcn-ui
bundle-barrel-imports
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.
TheOrcDev/8bitcn-ui
rendering-hoist-jsx
Extract static JSX elements outside components to avoid re-creation on every render. Apply when rendering static elements repeatedly or in lists.
Didn't find tool you were looking for?