8bit-docs-patterns

8-bit ドキュメントのパターン

8-bit コンポーネントのゲーム要素やレトロな特徴を強調したドキュメントを作成します。

ゲーム用語

説明や例では、ゲームに特化した言葉を使用します。

---
title: Quest Log
description: Displays an 8-bit mission and task tracking system.
---

実際のゲームデータ

例には、意味のあるゲーム関連のデータを使用します。

<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.",
    },
  ]}
/>

ヘルスバーの例

実際の状況に即したヘルス値とコンテキストを使用します。

<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" />

ピクセルフォントの使用

ピクセルフォントのスタイルを適用するには、.retro クラスを使用します。

<div className="flex justify-between text-sm mb-2 retro">
  <span>Health</span>
  <span>75/100</span>
</div>

例でのラッパーパターン

8-bit コンポーネントが 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!

retro.css に関する注意

すべての 8-bit コンポーネントで 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>

複数のバリアント

デフォルトとレトロのバリアントを示します。

<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>

ゲームブロックのドキュメント

ブロック（複数のコンポーネント）の場合：

---
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>

主な原則

1. ゲームのコンテキスト - ゲーム関連の用語を使用します
2. 実際のデータ - 実際のゲームのシナリオを示します
3. レトロなスタイル - ピクセルフォントには .retro クラスを使用します
4. ラッパーへの配慮 - @/components/ui/8bit/ からインポートします
5. バリアントの紹介 - 複数のバリアントを紹介します
6. ブロックの複雑さ - 複数のコンポーネントのドキュメントに対応します
7. 8-bit 固有の特徴 - 8-bit ならではの機能を強調します

参考例

• content/docs/blocks/gaming/quest-log.mdx - クエスト追跡のパターン
• content/docs/components/health-bar.mdx - ヘルスバーのバリアント
• content/docs/blocks/gaming/leaderboard.mdx - ゲーム用リストのパターン