Every step in detail: From your project directory to the finished HTML course structure with all levels and navigation links.
The first step is to tell the Learning Skill which project to analyze and transform into a course. There are three ways to do this:
Navigate to the project directory in your terminal and start Claude Code there. The skill detects the codebase automatically.
Provide a GitHub URL. Claude automatically clones the repository into a temporary directory and works with it.
If you're already working in a project, simply say "Create a course about this project".
For GitHub links, Claude clones the repository automatically. No manual git clone required. Private repositories work if Claude Code has access to your GitHub account.
After specifying the project, the Learning Skill asks two key questions to tailor the course to your needs.
Who is the course for? You can select multiple audiences simultaneously. Each audience gets dedicated pages with adapted language, depth, and focus:
No coding knowledge required. Explains features, workflows, and usage. Maximum 3 levels deep (L0-L2). Simple, clear language.
Technically detailed with code examples, architecture diagrams, and schema references. Up to 4 levels (L0-L3). Technical jargon welcome.
How should the course files be used?
Self-contained HTML files with complete inline CSS and JavaScript. Just open in a browser, no server needed. Perfect for sharing.
Adapted for integration into existing docs or wikis. Simplified styling, additional metadata for CMS systems.
Selecting multiple audiences multiplies the files: 2 audiences x 2 languages = 4 index files at L0. Each combination gets fully generated.
Now the Learning Skill takes over completely. It runs through a multi-stage pipeline that transforms your codebase into a structured course:
Claude scans all files in the project directory, detecting programming languages, frameworks, and project structure. Irrelevant files (node_modules, .git, binaries) are automatically excluded.
The detected files are analyzed for content: What dependencies exist? Which patterns are used? How do components relate? This creates an internal project model.
Each identified topic receives a Helpfulness ScoreA value from 1-10 that rates how helpful a topic is for the chosen audience. Topics scoring below 6 are not included in the course. (1-10). Only topics scoring 6+ make it into the course. Scores of 8+ trigger a deep-dive to the next level.
The overview page (index.html) is created first. It displays all L1 topics as cards with brief descriptions and serves as the launch pad for the entire course.
Level by level, the HTML files are created: L1 with 5 modules each, L2 with more detailed explanations, L3 with complete code walkthroughs. Navigation and linking are set automatically.
In the final step, all links are verified, missing cross-references are added, and a consistency check is performed. A depth map is then generated to visualize all pages and their connections.
Duration: Small projects (< 50 files) finish in 3-5 minutes. Medium projects (50-200 files) take 5-10 minutes. Large projects may require up to 15 minutes.
After generation completes, you'll find a clearly organized folder structure in your project. Here's what it looks like:
File names follow a consistent schema so you can immediately tell what a file contains:
Level 0 (index files) always resides in the root kurs/ directory. Deeper levels live in their respective subdirectories l1/, l2/, l3/. All links are relative — the course works anywhere.
The Learning Skill produces the best courses when you keep a few things in mind. Here are the key recommendations:
src/, tests/, docs/) help the skill understand the architecture better. Chaos in the root directory makes analysis harder.Large binary files in the project, missing README, too many nested subdirectories, or mixed projects without clear separation.
Clear folder structure, descriptive README, consistent naming, a defined tech stack, and fewer than 300 relevant files.
You've reached the maximum detail level for end users. This page (L2) is the deepest level for non-developers. Developers can dive even deeper into technical details on L3.