Our review
Generates a VitePress tutorial site that explains the internal implementation of a source codebase, including architecture diagrams and code references.
Strengths
- Automates creation of structured educational documentation from source code.
- Uses Mermaid diagrams for visual architecture.
- Generates standalone deployable VitePress sites.
- Supports multiple languages (Go, TypeScript, Python).
Limitations
- Requires careful manual review of generated content for accuracy.
- Only generates Chinese-first content (may need adaptation for other languages).
- Depends on the quality of source code structure and comments.
Use when you need to create an in-depth educational tutorial for developers to understand the internal architecture and implementation details of a codebase.
Do not use for user-facing 'how to use' documentation or for very small codebases that are trivial to understand without a tutorial.
Security analysis
SafeThe skill only reads source files and generates static documentation (Markdown, config files). It does not execute any code, run shell commands, access the network, or modify files outside the specified output directory. There is no instruction to handle secrets or perform destructive actions.
No concerns found
Examples
/vitepress-tutorial ./apps/runner ./tutorials/runner-guide/vitepress-tutorial ./pkg/sandboxVitePress 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
- Explore the specified source directory
- Identify key components, patterns, and architecture
- Map dependencies and data flows
- Output: Module inventory and architecture overview
User checkpoint: Confirm scope and focus areas
Phase 2: Planning
- Generate tutorial outline based on analysis
- Determine chapter structure and navigation
- Identify code sections to highlight
- Output: Tutorial structure document
User checkpoint: Approve outline before generation
Phase 3: Generation
- Create VitePress project skeleton using @project-structure.md
- Configure VitePress using @config-template.md
- Generate tutorial content following @content-guidelines.md
- 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:123annotations - 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:
- Always explore first - Read source files before writing tutorials
- Reference actual code - Include real code snippets with file paths
- Use Mermaid for architecture - Visual diagrams aid understanding
- Keep chapters focused - One concept per file, ~200-400 lines
- Link between chapters - Use VitePress prev/next navigation
- Include API tables - Summarize endpoints, functions, types
API Documentation Generator
Documentation
Automatically generates OpenAPI/Swagger API documentation.
Technical Writer
Documentation
Writes clear technical documentation following top style guides.
Typed Documentation Forms System
Documentation
Add typed comments, documentation, todos, and metadata to Scheme code using `(doc ...)` forms. Doc annotations are authoritative for type inference, extracted by search commands (lf-todo, lf-types), and integrated with the type checker and LSP. Useful for annotating functions, marking deprecations, or tracking localized improvements alongside the code.