Docs Creator

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.