🚀 generate-docs-site

A reusable Claude Code skill that generates a full Docusaurus 3.x documentation site from any local repository — AI-analyzed content, Mermaid diagrams, sidebar navigation, and a custom landing page.

What It Does

Give Claude Code any local repo, and this skill guides it to:

1. Explore the codebase (parallel agents read source code)
2. Scaffold a Docusaurus 3.x project with Mermaid support
3. Generate 15-20 documentation pages with real content from your code
4. Build a custom landing page with tech badges and quick navigation
5. Verify everything builds and serves correctly

The result: a docs-site/ directory you can build and serve locally at http://localhost:3000.

What the Generated Site Includes

Section	Pages	Content
Overview	intro, architecture, data models, deployment	Mermaid diagrams, tables, code examples
Module Docs	One page per module/package	Deep analysis of actual source code
Cross-cutting	API reference, testing, dev guide	Practical reference documentation
Landing Page	Custom hero + tech badges + stats	Beautiful entry point

Installation

Option 1: Copy to your skills directory

mkdir -p ~/.claude/skills/generate-docs-site
cp SKILL.md ~/.claude/skills/generate-docs-site/

Option 2: Clone the whole repo

git clone https://github.com/AbdElrahmaN31/generate-docs-site.git ~/.claude/skills/generate-docs-site

Option 3: Direct download

mkdir -p ~/.claude/skills/generate-docs-site
curl -o ~/.claude/skills/generate-docs-site/SKILL.md https://raw.githubusercontent.com/AbdElrahmaN31/generate-docs-site/main/SKILL.md

Usage

Once installed, just tell Claude Code:

"Generate a docs site for this repo"
"Create documentation for my project"
"Build a Docusaurus site from this codebase"

The skill will be automatically loaded and Claude Code will follow the proven process.

Requirements

• Claude Code CLI (or compatible agent with skill support)
• Node.js 20+ and npm (for Docusaurus)
• The target repository should be on your local machine

Example Output

A typical generated docs site looks like:

docs-site/
├── docs/
│   ├── intro.md                  # Project overview
│   ├── architecture.md           # System design with Mermaid diagrams
│   ├── data-models.md            # Entity relationships
│   ├── api-reference.md          # REST endpoint reference
│   ├── deployment.md             # Setup and deployment
│   ├── testing.md                # Test strategy
│   ├── modules/
│   │   ├── backend/              # 7 pages: models, services, routers...
│   │   └── frontend/             # 5 pages: pages, components, state...
│   └── guides/
│       └── development.md        # Developer setup guide
├── src/pages/index.tsx           # Custom landing page
├── docusaurus.config.ts
├── sidebars.ts
└── package.json

20 pages, 35+ Mermaid diagrams, zero external dependencies for dev.

How It Works

graph LR
    A[Local Repo] --> B[Claude Code explores]
    B --> C[Scaffold Docusaurus]
    C --> D[Generate docs from source]
    D --> E[Build landing page]
    E --> F[Build & verify]
    F --> G[docs-site/ ready]

Loading

Key Features

• 🔍 AI-analyzed content — reads your actual source code, not just file names
• 🏗️ Mermaid diagrams — architecture, ER diagrams, state machines, sequence flows
• 📐 Smart sidebar — explicit navigation structure, not autogenerated
• 🎨 Custom landing page — tech badges, project stats, quick links
• 🔄 Reusable — works for any repo, any language, any framework
• ⚡ Parallel generation — 3 agents generate docs simultaneously

Contributing

Contributions welcome! This is a process skill, so improvements should:

1. Come from real experience (not theoretical)
2. Document specific failure modes and fixes
3. Follow the skill structure in SKILL.md

License

MIT — see LICENSE

Related

• Claude Code — The AI agent this skill runs on
• Docusaurus — The docs framework it generates
• agentskills.io — Skill specification