Generate Documentation Site

Generates Level 3 documentation site content from design docs with framework-specific features.

Overview

This skill transforms design documentation into interactive documentation site content by:

1. Analyzing design docs for the module
2. Creating landing page with hero and features
3. Generating getting started guide
4. Creating concept documentation
5. Generating how-to guides
6. Integrating with API docs
7. Following framework-specific template (RSPress, Docusaurus, VitePress)

Quick Start

Generate RSPress site docs:

/docs-generate-site effect-type-registry --framework=rspress

Include API docs integration:

/docs-generate-site rspress-plugin-api-extractor --framework=rspress \
  --api-docs=./docs/en/api

Preview without writing:

/docs-generate-site website --framework=rspress --dry-run

How It Works

1. Parse Parameters

• module

  : Module to document [REQUIRED]

• --framework

  : Documentation framework (rspress, docusaurus, vitepress)

• --api-docs

  : Path to auto-generated API docs to integrate

• --dry-run

  : Preview structure without writing

2. Load Configuration

Read

.claude/design/design.config.json

for:

• Module configuration
• Site docs settings (Level 3)
• Framework configuration
• Output directory

3. Analyze Design Documentation

Extract content for different doc types:

• Landing page - Overview, value propositions, key features
• Getting started - Installation, first example, next steps
• Concepts - Architecture, design decisions, how it works
• Guides - Task-oriented how-tos
• Examples - Real-world use cases

4. Generate Landing Page

Create

index.mdx

with framework-specific features:

• Hero section with description
• Feature highlights
• Quick start preview
• Links to guides

RSPress-specific:

• Use frontmatter for hero configuration
• Add feature cards
• Include navigation

5. Generate Getting Started Guide

Create progressive learning path:

1. Installation (detailed)
2. First working example
3. Understanding the basics
4. Common patterns
5. Next steps

6. Generate Concept Documentation

Transform architecture design docs into user-friendly concepts:

• Break down into digestible topics
• Add diagrams and visualizations
• Progressive disclosure (beginner → advanced)
• Use framework components (tabs, callouts)

7. Generate How-To Guides

Create task-oriented guides:

• Specific problems and solutions
• Complete working examples
• Step-by-step instructions
• Troubleshooting tips

8. Apply Framework Features

RSPress features:

• Tabs for multiple approaches
• Callouts (tip, warning, note)
• Code blocks with copy button
• Mermaid diagrams

Docusaurus features:

• Admonitions
• Code blocks with highlighting
• Tabs
• MDX components

9. Create Navigation Structure

Generate navigation metadata:

• Sidebar configuration
• Category organization
• Progressive navigation flow

10. Validate Output

Check generated site docs:

• Framework-specific frontmatter valid
• MDX syntax correct
• Interactive elements work
• Cross-references valid

Supporting Documentation

Load these files when needed:

• instructions.md

  - Step-by-step implementation

• examples.md

  - Example site documentation

• framework-features.md

  - Framework-specific component usage

Success Criteria

Generated site documentation is successful when:

• ✅ Engaging landing page with clear value proposition
• ✅ Progressive getting started guide
• ✅ Concept docs broken into digestible topics
• ✅ Task-oriented how-to guides
• ✅ Interactive elements (tabs, callouts, code blocks)
• ✅ Clear navigation structure
• ✅ API docs integrated (if available)
• ✅ Mobile responsive
• ✅ Valid framework-specific syntax

Integration Points

• Uses

  .claude/design/design.config.json

  for configuration
• Uses

  .claude/skills/docs-generate-site/templates/site-doc.template.mdx

  for structure
• Reads design docs from module's

  designDocsPath

• Writes to module's

  userDocs.siteDocs

  path
• Validates against

  quality.userDocs.level3

  standards

Related Skills

• /docs-generate-readme

  - Generate Level 1 README

• /docs-generate-repo

  - Generate Level 2 repository docs

• /rspress-page

  - Create individual RSPress pages

• /docs-sync

  - Sync docs with changes