A system to create and deploy website-based documentation tutorials for codebases.
Install
mkdir -p .claude/skills/tutorial-any-repo && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/11251" && unzip -o skill.zip -d .claude/skills/tutorial-any-repo && rm skill.zipInstalls to .claude/skills/tutorial-any-repo
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Automatically generate a file-by-file code tutorial website for any repository. Explores codebase structure, creates TODO tracking, launches parallel agent teams to write docs, self-reviews, and deploys to GitHub Pages. Use when user says "write a tutorial for this project", "explain this codebase", "generate code docs", etc.Key capabilities
- →Scans repository structure
- →Identifies project entry points
- →Generates file-by-file tutorial documentation
- →Deploys static website to GitHub Pages
- →Tracks progress with TODO lists
How it works
The tool explores the codebase, launches parallel agents to write documentation for each file, and builds a static site using MkDocs.
Inputs & outputs
When to use tutorial-any-repo
- →Generate codebase explanation tutorial
- →Create project documentation website
- →Explain project file-by-file
About this skill
Universal Repository Tutorial Generator
You are a professional code tutorial generation system. Your task is to generate file-by-file detailed code explanation tutorials for a given repository and deploy them as a static website.
Input Parameters
- Target directory:
$ARGUMENTS[0](defaults to current working directory) - Language:
$ARGUMENTS[1](defaults toEnglish)
If no arguments are provided, use the current working directory and English.
Execution Pipeline
Execute the following 6 phases strictly in order. After each phase, update progress via TaskUpdate.
Phase 1: Explore & Plan
-
Explore codebase structure: Launch an
Explore-type Agent to thoroughly scan all source files in the target directory (.py, .js, .ts, .go, .rs, .java, etc. — detect project language automatically). Output:- Complete file inventory, grouped by directory
- Module count and total file count
- Identification of main entry points and core modules
-
Create
tutorial/directory structure: Mirror the source code directory hierarchy under atutorial/directory at the project root. -
Create
tutorial/TODO.md: A detailed progress tracking document with the following format:# Code Tutorial - Progress Tracker > Total: N source files to document > Created: YYYY-MM-DD ## Progress Overview | Module | Files | Completed | Status | |--------|-------|-----------|--------| | module_a | X | 0 | ⏳ Pending | ... ## File List by Module ### module_a/ - [ ] `src/module_a/file1.py` → `tutorial/module_a/file1.md` ...Every source file MUST have a corresponding entry — no omissions allowed.
-
Create Task tracking: Use TaskCreate to create a Task for each major module to track progress.
Phase 2: Write Foundation Documents
Launch Agents in parallel to write:
-
Background Knowledge (
tutorial/00_background_knowledge.md):- Analyze the project's technical domain (e.g., RL, web framework, compiler, etc.)
- Write beginner-friendly introduction to the domain with core concept explanations
- Include ASCII diagrams showing system architecture
- Target audience: readers with zero domain knowledge
-
Reading Guide (
tutorial/00_reading_guide.md):- Three reading paths: Quick Start (~2 hours), Complete Learning, Topic-based
- Recommended module reading order with rationale
- Complete document index with links
Phase 3: Parallel Module Documentation
Core principle: maximize parallelism. Group modules by size and launch multiple Agents simultaneously:
- Small modules (<10 files): one Agent per module
- Medium modules (10-30 files): one Agent per module
- Large modules (>30 files): split across multiple Agents
Agent instruction template:
Write detailed code explanation docs for the [module_name] module of [project_name],
targeting readers with no prior knowledge. Write in [language].
First use Glob to find all source files under [module_path] (recursively),
then read each file and write a tutorial document.
Each source file gets a corresponding markdown tutorial doc, written to [tutorial_target_dir].
Each tutorial document format:
- Title: `filename.ext` — short description
- File Overview: what this file does and its role in the project
- Key Code Walkthrough: paste key code snippets and explain them step by step (use fenced code blocks)
- Core Classes/Functions: table listing each class/function and its purpose
- Relationship to Other Modules: how this file connects to the rest of the codebase
- Summary
Also write a module overview: [tutorial_target_dir]/index.md with an architecture diagram (ASCII art).
For __init__ or similar boilerplate files, keep the explanation brief.
Always Read source code first, then Write tutorial docs.
After each Agent completes, immediately update TaskUpdate and TODO.md progress.
Phase 4: Self-Review
Launch a Review Agent to check:
- Completeness: Glob all generated .md files, cross-reference with TODO.md to confirm no missing docs
- Quality spot-check: Sample 1-2 docs from each module (at least 10 total), verify:
- Has title, has code snippets, has class/function listing
- Content is in the target language, non-empty
- Content is coherent (no garbled or duplicated text)
- Fix: Repair any issues found, create any missing files
Phase 5: Build Website
-
Install dependencies:
pip install mkdocs mkdocs-material mkdocs-awesome-pages-plugin jieba -
Create
mkdocs.yml(project root):site_name: "[Project Name] Code Tutorial" docs_dir: "tutorial" site_dir: "site" theme: name: material language: en # adjust based on target language (zh for Chinese, etc.) palette: - scheme: default primary: indigo toggle: {icon: material/brightness-7, name: Switch to dark mode} - scheme: slate primary: indigo toggle: {icon: material/brightness-4, name: Switch to light mode} features: - navigation.instant - navigation.sections - navigation.expand - navigation.top - navigation.indexes - search.suggest - search.highlight - content.code.copy - toc.follow plugins: - search: lang: [en] # add 'zh' for Chinese, etc. separator: '[\s\u200b\-]' - awesome-pages markdown_extensions: - tables - pymdownx.highlight: {anchor_linenums: true} - pymdownx.superfences - pymdownx.arithmatex: {generic: true} - admonition - pymdownx.details - toc: {permalink: true} extra_javascript: - javascripts/mathjax.js - https://unpkg.com/mathjax@3/es5/tex-mml-chtml.jsFor Chinese language, add
jiebafor search segmentation and setlang: [zh, en]. -
Create
tutorial/index.mdhomepage with the following sections:- Project introduction
- Architecture overview diagram (ASCII art): Show the project's overall architecture — major components, their relationships, and data flow between them. This gives readers an immediate big-picture understanding.
- Main workflow/pipeline diagram (ASCII art): Show the primary execution flow step by step (e.g., for a training framework: data input → processing stages → output; for a web framework: request → middleware → handler → response). Number each step.
- Code-to-flow mapping table: A table mapping each workflow step to its corresponding source file and tutorial document, so readers can jump from the diagram directly to the relevant code.
- Module index table with doc counts and descriptions
- Quick start reading links
-
Create
tutorial/.pagesfor navigation ordering -
Create
tutorial/javascripts/mathjax.jsfor MathJax configuration:window.MathJax = { tex: { inlineMath: [["\\(", "\\)"]], displayMath: [["\\[", "\\]"]], processEscapes: true, processEnvironments: true }, options: { ignoreHtmlClass: ".*|", processHtmlClass: "arithmatex" } }; document$.subscribe(() => { MathJax.typesetPromise() }) -
Ensure every subdirectory has
index.md(rename from README.md if needed, fix internal links) -
Add
site/to.gitignore -
Local build test: Run
mkdocs buildand confirm no critical errors
Phase 6: Deploy to GitHub Pages
-
Detect GitHub info:
gh auth status git remote -v -
Ensure a pushable remote exists:
- If origin is the user's own repo: use origin directly
- If origin is someone else's repo: check for existing fork, or
gh repo fork - Add fork as remote (e.g.,
myfork)
-
Update
site_urlin mkdocs.yml to the actual deployment URL -
Deploy:
mkdocs gh-deploy --remote-name <remote> --force git push <remote> main -
Enable GitHub Pages:
gh api repos/<owner>/<repo>/pages -X PUT \ -f "build_type=legacy" -f "source[branch]=gh-pages" -f "source[path]=/" -
Create GitHub Actions workflow (
.github/workflows/tutorial-docs.yml) for automatic redeployment on push -
Output the final URL to the user
Core Principles
- Never stop early: Do not stop until every single source file has a corresponding tutorial document. If you stop before full coverage, the tutorial is incomplete and useless.
- Maximize parallelism: Launch as many background Agents as possible using
run_in_background: true. This is the key to finishing large codebases in reasonable time. - Transparent progress: Update TODO.md and Task status after each Agent completes, so the user always knows current progress.
- Incremental commits: Git commit after each major phase to save progress and allow recovery.
- Self-review: Always review your own output before declaring done. Check for missing files, empty docs, and quality issues.
- Consistent title format: All doc titles must follow
`filename.ext` — short descriptionformat for clean sidebar navigation. - LaTeX for math: If content involves mathematical formulas, use LaTeX rendering (
\(...\)inline,$$...$$display), never plain-text code blocks. - Architecture & flow diagrams on homepage: The tutorial homepage (
index.md) MUST include an architecture overview diagram and a main workflow diagram (both as ASCII art), plus a code-to-flow mapping table. Readers need to build a global mental model before diving into individual files.
When not to use it
- →Generating documentation for non-code projects
- →Manual documentation without automated deployment
Prerequisites
Limitations
- →Requires full repository access
- →Large repositories may require significant time
How it compares
It automates the entire documentation lifecycle from exploration to deployment, rather than requiring manual doc writing.
Compared to similar skills
tutorial-any-repo side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| tutorial-any-repo (this skill) | 0 | 5mo | Review | Intermediate |
| pr-demo | 1 | 5mo | Review | Intermediate |
| updating-changelog | 1 | 5mo | Review | Intermediate |
| releasenotes | 1 | 2mo | No flags | Beginner |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
pr-demo
mikeyobrien
Use when creating animated demos (GIFs) for pull requests or documentation. Covers terminal recording with asciinema and conversion to GIF/SVG for GitHub embedding.
updating-changelog
AztecProtocol
Updates changelog documentation for contract developers and node operators by analyzing branch changes relative to 'next'. Use when preparing a PR, updating migration notes, documenting breaking changes, or when asked to update changelog/release notes.
releasenotes
exceptionless
Generate formatted changelogs from git history since the last release tag. Use when preparing release notes that categorize changes into breaking changes, features, fixes, and other sections.
bd-to-br-migration
Dicklesworthstone
Migrate docs from bd (beads) to br (beads_rust). Use when updating AGENTS.md, converting bd commands, "bd sync" → "br sync --flush-only", or beads migration.
readme-sync
hiroshi0530
|
codex-cli-bridge
alirezarezvani
Bridge between Claude Code and OpenAI Codex CLI - generates AGENTS.md from CLAUDE.md, provides Codex CLI execution helpers, and enables seamless interoperability between both tools