A Claude Code skill that transforms any documentation into a beautiful, interactive single-page HTML training course.
Point it at documentation — an RFC, an API reference, an architecture doc, a wiki, a whitepaper, a runbook — and it generates a self-contained HTML file that teaches the material through:
- Scroll-based modules with keyboard navigation and progress tracking
- Spec ↔ plain English translations — verbatim spec language on the left, what it actually means on the right
- Concept flow animations — step-by-step visualizations of protocols, data flows, and decision trees
- Scenario quizzes — test application of knowledge, not memorization
- Glossary tooltips — every technical term defined in context, on hover
- Architecture diagrams — clickable component maps with descriptions
The output is a single .html file with no external dependencies (except Google Fonts). No server, no build step, works offline.
| Input | How it works |
|---|---|
| Documentation website URL | Phase 0 uses Firecrawl MCP — maps the site, filters to doc pages, batch-fetches clean markdown. Handles JS-rendered sites (Docusaurus, Mintlify, Nextra, GitBook). Requires Firecrawl MCP. |
| Markdown files / local folder | Read directly — no Firecrawl needed |
GitHub repo (/docs, wiki) |
Cloned and read as local files — no Firecrawl needed |
| Single URL | Fetched with firecrawl_scrape — Firecrawl preferred, WebFetch fallback |
| RFC (by number or URL) | Fetched from ietf.org |
Use the pdf skill to extract text first, then hand to this skill |
When you provide a URL, Firecrawl:
- Maps the site with
firecrawl_map— discovers all indexed URLs in one call, robots.txt handled automatically - Filters to documentation-relevant pages (drops blog, changelog, legal, assets) and caps at 50 URLs
- Batch-fetches all pages with
firecrawl_batch_scrape— returns clean markdown withonlyMainContent: truestripping nav, footer, and sidebars automatically
This works on JS-rendered sites (Docusaurus, Mintlify, Nextra, hosted GitBook) that return empty shells to plain HTTP fetches.
Firecrawl MCP is required for crawling documentation websites. Without it, the skill still works for local files and GitHub repos, but URL inputs will not work.
- Get an API key at firecrawl.dev — free tier includes 500 credits (~9 full course crawls)
- Add to Claude Code:
claude mcp add firecrawl -e FIRECRAWL_API_KEY=fc-your-key-here -- npx -y firecrawl-mcp/install-skill IngmarVG-IB/trainingskillOnce installed, trigger the skill naturally:
make a course from https://docs.example.com
turn ./docs into a course
make training from RFC 9460
create an interactive course from this architecture doc
turn this API reference into onboarding material
codebase-to-course traces what happens when a user interacts with an app and teaches the code behind it. This skill starts from written documentation and teaches the concepts, tradeoffs, and vocabulary — no code required. The primary translation element is spec language ↔ plain English rather than code ↔ English.
Key adaptations:
- Audience calibration: reads the doc to understand who it was written for, then pitches the course one step back (slightly less assumed knowledge, much more "why")
- Concept-first curriculum: teaches the mental model before the structure, not section-by-section
- Spec translation blocks: verbatim excerpts from the document with three-part plain-English annotation (what it means, why it matters, watch out for)
- Document-type awareness: different analysis focus for RFCs vs. API docs vs. ADRs vs. runbooks
trainingskill/
├── SKILL.md # Skill definition (loaded by Claude Code)
├── README.md # This file
└── references/
├── design-system.md # CSS design tokens and layout system
└── interactive-elements.md # HTML/CSS/JS patterns for every element type
Design system and interactive element patterns adapted from codebase-to-course by @zarazhangrui.
MIT