vitepress_skill

Overview

This skill generates standalone VitePress tutorial sites that teach developers how a codebase is implemented internally. It focuses on deep analysis and reproducible tutorial content instead of user-facing how-to guides. The output is a ready-to-run VitePress site with Mermaid diagrams, source-file references, and i18n support for up to two languages.

How this skill works

First, the skill analyzes the project to detect language, framework, and repository layout. It then asks you to confirm the output location and content language(s) before creating a project skeleton, installing dependencies, and exploring source files. After building a mental model of components, it generates focused documentation files, architecture diagrams, and source references, then verifies the site builds and runs.

When to use it

• You need tutorial-style documentation that explains how a codebase works internally (implementation-level).
• Onboarding new engineers who must understand module interactions and data flows.
• Creating educational material for open-source projects, libraries, or internal platforms.
• Preparing architecture reviews or post-mortem explanations that reference actual code lines.
• When you want a reproducible VitePress site with Mermaid diagrams and i18n support.

Best practices

• Always confirm output path and the content language(s) before generation; the skill will prompt for both.
• Limit language selection to at most two per run; generate additional locales in separate runs if needed.
• Allow the skill to fully explore source files first — content is grounded on real code references and file:line annotations.
• Keep each chapter focused (one concept per file) and include Mermaid diagrams for architecture and flows.
• Use the provided package.json and .vitepress/config.ts templates to avoid common Mermaid/Vite issues and ensure a smooth dev server.

Example use cases

• Generate a tutorial site that explains the internal agent system and shows key files with line references.
• Create multi-language implementation guides (e.g., English + Chinese) for a microservices repository.
• Produce an educational site mapping function call graphs and data flows with Mermaid diagrams.
• Build an isolated tutorial folder inside a larger monorepo so the site installs and runs independently.