8位文档模式Skill 8bit-docs-patterns

---

名称: 8位文档模式 描述: 创建具有游戏特定示例、复古风格和8位术语的文档。适用于记录游戏块、RPG组件或复古风格UI元素时。

8位文档模式

创建强调8位组件游戏和复古方面的文档。

游戏术语

在描述和示例中使用游戏特定语言：

---
标题: 任务日志
描述: 显示一个8位任务和任务跟踪系统。
---

真实游戏数据

在示例中使用有意义的、与游戏相关的数据：

<QuestLog
  quests={[
    {
      id: "quest-1",
      title: "击败哥布林王",
      description: "哥布林王已经恐吓村庄数周。",
      status: "active",
      shortDescription: "在黑暗森林中击败哥布林王。",
    },
    {
      id: "quest-2",
      title: "收集龙鳞",
      description: "当地铁匠需要龙鳞来锻造盔甲。",
      status: "completed",
      shortDescription: "收集10片龙鳞。",
    },
  ]}
/>

血条示例

使用真实的血量和上下文：

<HealthBar value={75} />

<div className="flex justify-between text-sm mb-2 retro">
  <span>血量</span>
  <span>75%</span>
</div>
<HealthBar value={75} />

<p className="text-sm text-muted-foreground mb-2">
  默认血条
</p>
<HealthBar value={75} />

<p className="text-sm text-muted-foreground mb-2">
  临界血量 (25%)
</p>
<HealthBar value={25} variant="retro" />

像素字体使用

应用 .retro 类进行像素字体样式化：

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

示例中的包装模式

记住8位组件包装了 shadcn/ui：

// 导入8位组件
import { Button } from "@/components/ui/8bit/button";

// 不要导入基础 shadcn 组件
import { Button } from "@/components/ui/button"; // 错误！

retro.css 意识

所有8位组件都需要 retro.css：

// 这个导入在组件源中是必需的
import "@/components/ui/8bit/styles/retro.css";

// 文档显示与8位组件的使用
<Button className="retro">开始游戏</Button>

多种变体

显示默认与复古变体：

<ComponentPreview title="8位血条组件" 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">
        默认血条
      </p>
      <HealthBar value={75} />
    </div>
    <div>
      <p className="text-sm text-muted-foreground mb-2">
        复古血条
      </p>
      <HealthBar value={45} variant="retro" />
    </div>
  </div>
</ComponentPreview>

游戏块文档

对于块（多个组件）：

---
标题: 任务日志
描述: 显示一个8位任务和任务跟踪系统。
---

<ComponentPreview title="8位任务日志块" name="quest-log">
  <QuestLog
    quests={[
      {
        id: "quest-1",
        title: "击败哥布林王",
        status: "active",
      },
    ]}
  />
</ComponentPreview>

关键原则

1. 游戏上下文 - 使用游戏相关术语
2. 真实数据 - 显示实际游戏场景
3. 复古风格 - 使用 .retro 类进行像素字体
4. 包装意识 - 从 @/components/ui/8bit/ 导入
5. 变体展示 - 演示多种变体
6. 块复杂性 - 处理多组件文档
7. 8位特定 - 强调独特的8位功能

参考示例

• content/docs/blocks/gaming/quest-log.mdx - 任务跟踪模式
• content/docs/components/health-bar.mdx - 血条变体
• content/docs/blocks/gaming/leaderboard.mdx - 游戏列表模式