diff --git a/README.md b/README.md index acc3149..f214c4c 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,8 @@ # Codebase to Course -A Claude Code skill that turns any codebase into a beautiful, interactive single-page HTML course. +A Claude Code skill that turns any codebase into a beautiful, interactive browser-ready course. -Point it at a repo. Get back a stunning, self-contained course that teaches how the code works — with scroll-based navigation, animated visualizations, embedded quizzes, and code-with-plain-English side-by-side translations. +Point it at a repo. Get back a stunning course directory that teaches how the code works — with scroll-based navigation, animated visualizations, embedded quizzes, and code-with-plain-English side-by-side translations. ## Who is this for? @@ -20,7 +20,7 @@ You're not trying to become a software engineer. You want coding as a superpower ## What the course looks like -The output is a **single HTML file** — no dependencies, no setup, works offline. It includes: +The output is a **course directory** with prebuilt assets and an assembled `index.html` — no app setup required, opens directly in the browser. It includes: - **Scroll-based modules** with progress tracking and keyboard navigation - **Code ↔ Plain English translations** — real code on the left, what it means on the right @@ -82,8 +82,16 @@ Code snippets are exact copies from the real codebase — never modified or simp codebase-to-course/ ├── SKILL.md # Main skill instructions └── references/ + ├── _base.html # Base HTML shell with course placeholders + ├── _footer.html # HTML footer used by the build step + ├── build.sh # Assembles modules into index.html + ├── content-philosophy.md # Writing rules and teaching approach ├── design-system.md # CSS tokens, typography, colors, layout - └── interactive-elements.md # Quiz, animation, and visualization patterns + ├── gotchas.md # Common failure checklist + ├── interactive-elements.md # Quiz, animation, and visualization patterns + ├── main.js # Shared interactivity engine + ├── module-brief-template.md # Brief template for parallel module writing + └── styles.css # Shared course stylesheet ``` diff --git a/SKILL.md b/SKILL.md index aedeb5b..de72b47 100644 --- a/SKILL.md +++ b/SKILL.md @@ -1,6 +1,6 @@ --- name: codebase-to-course -description: "Turn any codebase into a beautiful, interactive single-page HTML course that teaches how the code works to non-technical people. Use this skill whenever someone wants to create an interactive course, tutorial, or educational walkthrough from a codebase or project. Also trigger when users mention 'turn this into a course,' 'explain this codebase interactively,' 'teach this code,' 'interactive tutorial from code,' 'codebase walkthrough,' 'learn from this codebase,' or 'make a course from this project.' This skill produces a stunning, self-contained HTML file with scroll-based navigation, animated visualizations, embedded quizzes, and code-with-plain-English side-by-side translations." +description: "Turn any codebase into a beautiful, interactive course that teaches how the code works to non-technical people. Use this skill whenever someone wants to create an interactive course, tutorial, or educational walkthrough from a codebase or project. Also trigger when users mention 'turn this into a course,' 'explain this codebase interactively,' 'teach this code,' 'interactive tutorial from code,' 'codebase walkthrough,' 'learn from this codebase,' or 'make a course from this project.' This skill produces a stunning browser-ready course directory with scroll-based navigation, animated visualizations, embedded quizzes, and code-with-plain-English side-by-side translations." --- # Codebase-to-Course @@ -18,7 +18,7 @@ When the skill is first triggered and the user hasn't specified a codebase yet, > - **A GitHub link** — e.g., "make a course from https://github.com/user/repo" > - **The current project** — if you're already in a codebase, just say "turn this into a course" > -> I'll read through the code, figure out how everything fits together, and generate a beautiful single-page HTML course with animated diagrams, plain-English code explanations, and interactive quizzes. The whole thing runs in your browser — no setup needed. +> I'll read through the code, figure out how everything fits together, and generate a browser-ready interactive course with animated diagrams, plain-English code explanations, and interactive quizzes. The assembled course opens directly in your browser - no setup needed. If the user provides a GitHub link, clone the repo first (`git clone /tmp/`) before starting the analysis. If they say "this codebase" or similar, use the current working directory.