docs-creator

AayushBaniya2006's avatarfrom AayushBaniya2006

Create and organize public documentation pages using Fumadocs. Use when building new documentation pages or organizing existing ones.

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 4, 2026
[Technical Writing]

When & Why to Use This Skill

The Documentation Creator skill streamlines the process of building and organizing professional, public-facing documentation using the Fumadocs framework. It automates the generation of MDX-based content, manages complex directory structures, and configures metadata for optimal navigation and SEO. By handling frontmatter, Lucide icons, and sidebar organization, it ensures a consistent and high-quality developer experience for technical knowledge bases.

Use Cases

  • Case 1: Bootstrapping a new documentation site by automatically generating the required MDX file structure and directory hierarchy in src/content/docs.
  • Case 2: Reorganizing existing technical documentation by creating and managing meta.json files to control sidebar ordering, group titles, and navigation flow.
  • Case 3: Enhancing documentation SEO and visual consistency by applying standardized frontmatter, descriptions, and Lucide icons across all pages.
  • Case 4: Building interactive user guides and API references using advanced MDX components like Callouts, Tabs, and Cards for better information density.
namedocs-creator
descriptionCreate and organize public documentation pages using Fumadocs. Use when building new documentation pages or organizing existing ones.

Documentation Creator Skill

This skill helps you build public-facing documentation in src/content/docs. The system is powered by Fumadocs and supports MDX, automatic routing, and Lucide icons.

Core Concepts

1. File Structure

  • Root: src/content/docs/
  • Pages: .mdx files become pages (e.g., getting-started.mdx -> /docs/getting-started).
  • Nested: Folders create URL segments (e.g., api/auth.mdx -> /docs/api/auth).
  • Images: Automatic OG image generation is enabled.

2. Frontmatter

Every .mdx file should have frontmatter:

---
title: Page Title
description: A short description for SEO and search
icon: Box # Lucide icon name
---

3. Folder Organization (meta.json)

Control sidebar order, group titles, and icons by placing a meta.json in any directory.

{
  "title": "Section Name",
  "icon": "Settings",
  "pages": [
    "index",           // Matches index.mdx
    "getting-started", // Matches getting-started.mdx
    "---Separator---", // Adds a visual separator
    "advanced"         // Matches advanced/ folder or file
  ],
  "defaultOpen": true
}

Features

  • Lucide Icons: Use any Lucide icon name in frontmatter icon: Name.
  • Components: All standard MDX components + Fumadocs UI components (Callout, Cards, Tabs) are available.
  • Relative Links: [Link](./other-page) works correctly.
  • Sitemap: Automatically generated.

Examples

Basic Page (src/content/docs/introduction.mdx)

---
title: Introduction
description: Getting started with our platform
icon: BookOpen
---

# Welcome

This is the introduction page.

## Next Steps
- [Installation](./installation)
- [Configuration](./config)

Folder Metadata (src/content/docs/api/meta.json)

{
  "title": "API Reference",
  "icon": "Webhook",
  "root": true, 
  "pages": ["introduction", "endpoints", "authentication"]
}

Note: "root": true makes this folder a separate tab in the sidebar if using root-level folders.