mcpField
8
8bit-docs-patterns

8bit-docs-patterns

github.com/theorcdev开发2.1k42 次安装2 天前更新
代码仓库

关于 8bit-docs-patterns

面向使用 8-bit 组件的项目文档编写者的技能，指导采用游戏语境和数据、展示复古样式与变体，并说明组件包装层及多组件区块。

主要功能

  1. 01使用游戏术语和示例
  2. 02应用 .retro 类
  3. 03说明 8-bit 组件包装层
  4. 04展示默认与复古变体
  5. 05编写多组件区块文档

适用场景

  1. 01编写组件文档
  2. 02制作游戏主题示例
  3. 03记录 8-bit 组件区块

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/theorcdev/8bitcn-ui --skill 8bit-docs-patterns

安装后在 Claude Code 中输入/8bit-docs-patterns确认已加载。

详细介绍

8 位文档模式

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

游戏术语

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

---
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 位组件包装了 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 位组件都需要 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 位特色 - 强调独特的 8 位功能
参考示例
  • content/docs/blocks/gaming/quest-log.mdx - 任务追踪模式
  • content/docs/components/health-bar.mdx - 生命值条变体
  • content/docs/blocks/gaming/leaderboard.mdx - 游戏列表模式

评论

支持 Markdown