// Create documentation with gaming-specific examples, retro styling, and 8-bit terminology. Apply when documenting gaming blocks, RPG components, or retro-styled UI elements.
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.
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.
Create component documentation with installation, usage examples, and preview sections. Apply when documenting 8-bit components with proper structure and examples.
| name | 8bit-docs-patterns |
| description | Create documentation with gaming-specific examples, retro styling, and 8-bit terminology. Apply when documenting gaming blocks, RPG components, or retro-styled UI elements. |
Create documentation that emphasizes the gaming and retro aspects of 8-bit components.
Use gaming-specific language in descriptions and examples:
---
title: Quest Log
description: Displays an 8-bit mission and task tracking system.
---
Use meaningful, game-related data in examples:
<QuestLog
quests={[
{
id: "quest-1",
title: "Defeat the Goblin King",
description: "The Goblin King has been terrorizing the village for weeks.",
status: "active",
shortDescription: "Defeat the Goblin King in the Dark Forest.",
},
{
id: "quest-2",
title: "Collect Dragon Scales",
description: "The local blacksmith needs dragon scales to forge armor.",
status: "completed",
shortDescription: "Collect 10 dragon scales.",
},
]}
/>
Use realistic health values and context:
<HealthBar value={75} />
<div className="flex justify-between text-sm mb-2 retro">
<span>Health</span>
<span>75%</span>
</div>
<HealthBar value={75} />
<p className="text-sm text-muted-foreground mb-2">
Default health bar
</p>
<HealthBar value={75} />
<p className="text-sm text-muted-foreground mb-2">
Critical health (25%)
</p>
<HealthBar value={25} variant="retro" />
Apply .retro class for pixel font styling:
<div className="flex justify-between text-sm mb-2 retro">
<span>Health</span>
<span>75/100</span>
</div>
Remember 8-bit components wrap shadcn/ui:
// Import the 8-bit component
import { Button } from "@/components/ui/8bit/button";
// Not the base shadcn component
import { Button } from "@/components/ui/button"; // Wrong!
All 8-bit components require retro.css:
// This import is required in the component source
import "@/components/ui/8bit/styles/retro.css";
// Documentation shows usage with 8-bit components
<Button className="retro">START GAME</Button>
Show default vs retro variants:
<ComponentPreview title="8-bit Health Bar component" name="health-bar">
<div className="md:min-w-[300px] min-w-[200px] flex flex-col gap-8">
<div>
<p className="text-sm text-muted-foreground mb-2">
Default health bar
</p>
<HealthBar value={75} />
</div>
<div>
<p className="text-sm text-muted-foreground mb-2">
Retro health bar
</p>
<HealthBar value={45} variant="retro" />
</div>
</div>
</ComponentPreview>
For blocks (multiple components):
---
title: Quest Log
description: Displays an 8-bit mission and task tracking system.
---
<ComponentPreview title="8-bit Quest Log block" name="quest-log">
<QuestLog
quests={[
{
id: "quest-1",
title: "Defeat the Goblin King",
status: "active",
},
]}
/>
</ComponentPreview>
.retro class for pixel fonts@/components/ui/8bit/content/docs/blocks/gaming/quest-log.mdx - Quest tracking patterncontent/docs/components/health-bar.mdx - Health bar variantscontent/docs/blocks/gaming/leaderboard.mdx - Gaming list pattern