AgentSkillsCN

docs-generate-site

从设计文档中生成三级文档（文档站点）。适用于为 RSPress 或 Docusaurus 站点构建功能丰富、交互性强的文档内容时使用。

SKILL.md
--- frontmatter
name: docs-generate-site
description: Generate Level 3 (documentation sites) from design docs. Use when
  creating feature-rich, interactive documentation for RSPress/Docusaurus sites.
allowed-tools: Read, Glob, Edit, Write
context: fork
agent: docs-gen-agent

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:

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

Include API docs integration:

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

Preview without writing:

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