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:

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