FumadocsMDX结构指南Skill fumadocs-mdx-structure

---

name: fumadocs-mdx-structure description: 创建具有适当前置元数据、导入和组件集成的MDX文档文件。在创建或更新content/docs/中的Fumadocs文档页面时应用。

Fumadocs MDX 结构

按照既定模式为8-bit组件创建结构良好的MDX文档文件。

前置元数据模式

---
title: 组件名称
description: 8-bit组件的简要描述。
---

导入模式

所有文档文件都需要这些导入：

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

复制命令按钮

立即放置在前置元数据之后：

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

组件预览

包装组件示例：

<ComponentPreview title="8-bit ComponentName 组件" name="component-name">
  <ComponentName>示例</ComponentName>
</ComponentPreview>

安装部分

## 安装

---

<InstallationCommands packageName="component-name" />

使用部分

## 使用

---

```tsx
import { ComponentName } from "@/components/ui/8bit/component-name"

<ComponentName variant="outline">示例</ComponentName>

### 完整示例

```mdx
---
title: 按钮
description: 显示一个8-bit按钮组件。
---

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 按钮组件" name="button">
  <Button>按钮</Button>
</ComponentPreview>

## 安装

---

<InstallationCommands packageName="button" />

## 使用

---

```tsx
import { Button } from "@/components/ui/8bit/button"

<Button variant="outline">按钮</Button>

### 关键原则

1. **必须包含前置元数据** - 标题和描述是必需的
2. **导入顺序** - 组件 → 实用程序 → UI组件
3. **复制按钮** - 放置在组件预览之前
4. **组件预览** - 用于所有组件示例
5. **代码块** - 对TypeScript示例使用```tsx
6. **部分分隔符** - 在标题后使用`---`
7. **8-bit导入** - 使用`@/components/ui/8bit/`路径

### 文件位置

将文档文件放置在：
- `content/docs/components/component-name.mdx` 对于组件
- `content/docs/blocks/category/block-name.mdx` 对于块