fumadocs-mdx-structure

Verwendung

Installationsbefehl kopieren und das Quellpaket vor der Installation in der eigenen Agentenumgebung prüfen.
Benötigte Werkzeuge, Zugangsdaten und Hosts im Original prüfen.
Eingabe und gewünschtes Ergebnis beschreiben und die Ausgabe mit den Quellen abgleichen.

npx skills add https://github.com/theorcdev/8bitcn-ui --skill fumadocs-mdx-structure

Vor dem Start

Die Installation umfasst weder Modellabo noch API-Kontingent oder Dateizugriffsrechte.
Sterne und Installationen zeigen Aktivität, keine unabhängige Qualitäts- oder Sicherheitsprüfung.

Originales Skill-Dokument

Aus dem Quell-Repository gerendert; Überschriften, Beispiele, Code, Tabellen, Links und Bilder bleiben erhalten.

Fumadocs MDX Structure

Create well-structured MDX documentation files for 8-bit components following the established patterns.

Frontmatter Pattern

mdx

---
title: Component Name
description: Brief description of the 8-bit component.
---

Import Pattern

All documentation files require these imports:

mdx

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

Copy Command Button

Place immediately after frontmatter:

mdx

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

Component Preview

Wrap component examples:

mdx

<ComponentPreview title="8-bit ComponentName component" name="component-name">
  <ComponentName>Example</ComponentName>
</ComponentPreview>

Installation Section

mdx

## Installation

---

<InstallationCommands packageName="component-name" />

Usage Section

mdx

## Usage

---

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

<ComponentName variant="outline">Example</ComponentName>

Complete Example

mdx

---
title: Button
description: Displays an 8-bit button component.
---

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 button component" name="button">
  <Button>Button</Button>
</ComponentPreview>

## Installation

---

<InstallationCommands packageName="button" />

## Usage

---

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

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

Key Principles

Frontmatter required - title and description are mandatory
Import order - Component → utilities → UI components
Copy button - Place before ComponentPreview
ComponentPreview - Use for all component examples
Code blocks - Use ```tsx for TypeScript examples
Section separators - Use --- after headings
8-bit imports - Use @/components/ui/8bit/ path

File Location

Place documentation files in:

content/docs/components/component-name.mdx for components
content/docs/blocks/category/block-name.mdx for blocks