VitePress Source Tutorial Generator

Generate VitePress documentation sites for source code learning and analysis.

Overview

This skill creates standalone VitePress tutorial sites that teach developers how a codebase works internally. Unlike user documentation that explains "how to use", these tutorials explain "how it's implemented".

Usage

/vitepress-tutorial [source-path] [output-path]

Examples:

• /vitepress-tutorial ./apps/runner ./tutorials/runner-guide
• /vitepress-tutorial ./pkg/sandbox

Workflow

Phase 1: Analysis

1. Explore the specified source directory
2. Identify key components, patterns, and architecture
3. Map dependencies and data flows
4. Output: Module inventory and architecture overview

User checkpoint: Confirm scope and focus areas

Phase 2: Planning

1. Generate tutorial outline based on analysis
2. Determine chapter structure and navigation
3. Identify code sections to highlight
4. Output: Tutorial structure document

User checkpoint: Approve outline before generation

Phase 3: Generation

1. Create VitePress project skeleton using @project-structure.md
2. Configure VitePress using @config-template.md
3. Generate tutorial content following @content-guidelines.md
4. Build and verify

Output Structure

{output-path}/
├── package.json
├── docs/
│   ├── .vitepress/
│   │   └── config.ts
│   ├── index.md              # Homepage
│   ├── introduction/
│   │   ├── overview.md       # Project overview
│   │   └── architecture.md   # Architecture diagram
│   └── {modules}/            # One directory per module
│       ├── index.md
│       └── {topics}.md
└── README.md

Features

• Source References: Auto-generate Source: path/to/file.go:123 annotations
• Mermaid Diagrams: Architecture, sequence, and flow diagrams
• Code Highlighting: Go, TypeScript, Python with line highlighting
• Chinese-first: Content in Chinese, code comments in English
• Standalone Deploy: Ready for Vercel, Netlify, or GitHub Pages

Configuration

The skill reads project context to customize output:

| Context | Effect | |---------|--------| | Go project | Uses Go code blocks, references .go files | | TypeScript | Uses TS blocks, references .ts/.tsx files | | Monorepo | Detects apps/, packages/ structure |

Instructions

When executing this skill:

1. Always explore first - Read source files before writing tutorials
2. Reference actual code - Include real code snippets with file paths
3. Use Mermaid for architecture - Visual diagrams aid understanding
4. Keep chapters focused - One concept per file, ~200-400 lines
5. Link between chapters - Use VitePress prev/next navigation
6. Include API tables - Summarize endpoints, functions, types