Skip to content

docs: align output descriptions with directory-based build #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
820239854 wants to merge 1 commit into
base: main
Choose a base branch
from
+14 −6
Open

docs: align output descriptions with directory-based build #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 12 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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?

Expand All @@ -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
Expand Down Expand Up @@ -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
```


Expand Down
4 changes: 2 additions & 2 deletions SKILL.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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 <url> /tmp/<repo-name>`) before starting the analysis. If they say "this codebase" or similar, use the current working directory.

Expand Down