SkillsAdd

theorcdev/8bitcn-ui

fumadocs-mdx-structure

Create MDX documentation files with proper frontmatter, imports, and component integration. Apply when creating or updating Fumadocs documentation pages in content/docs/.

First seen Jan 23, 2026

Installation

$ npx skills add theorcdev/8bitcn-ui --skill fumadocs-mdx-structure
View on skills.sh ↗ GitHub repository ↗

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

azure-rbac Shared topics
microsoft/azure-skills 489K installs
plugin structure Similar name
anthropics/claude-code

This skill should be used when the user asks to "create a plugin", "scaffold a plugin", "unders…

12.6K installs
expo-project-structure Similar name
expo/skills

Framework (OSS). Folder structure for a new Expo app. Use when scaffolding or laying out a new …

11.3K installs
folder-structure-blueprint-generator Similar name
github/awesome-copilot

Comprehensive technology-agnostic prompt for analyzing and documenting project folder structure…

9.4K installs
structured-autonomy-plan Similar name
github/awesome-copilot

Structured Autonomy Planning Prompt

8.9K installs
structured-autonomy-implement Similar name
github/awesome-copilot

Structured Autonomy Implementation Prompt

8.8K installs

Also in this package

Other skills from theorcdev/8bitcn-ui · top by installs.

npx skills add theorcdev/8bitcn-ui
8-bit-pixel-art-patterns 127 fumadocs-component-docs 127 rendering-animate-svg 108 fumadocs-registry-integration 82 retro-css-architecture 79 animation-performance-retro 77 gaming-ui-state-management 72 bundle-barrel-imports 44 shadcn-ui-conventions 42 8bit-docs-patterns 41

Browse all from theorcdev/8bitcn-ui

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Also listed on

Alternate registries and mirrors of this skill.

Repository health

Stars 2.0K
License license.md
Default branch main
Open issues 14
Status Active

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 3,152 B
  • docs SUMMARY.md 200 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 255 installs

SKILL.md

Fumadocs MDX Structure

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

Frontmatter Pattern

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

Import Pattern

All documentation files require these imports:

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:

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

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

Installation Section

## Installation

---

<InstallationCommands packageName="component-name" />

Usage Section

## Usage

---

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

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

Complete Example

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

  1. Frontmatter required - title and description are mandatory
  2. Import order - Component → utilities → UI components
  3. Copy button - Place before ComponentPreview
  4. ComponentPreview - Use for all component examples
  5. Code blocks - Use ```tsx for TypeScript examples
  6. Section separators - Use --- after headings
  7. 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