AI Slop Inside Forked from zarazhangrui/codebase-to-course by @zarazhangrui.

A Codex skill that turns any codebase into a beautiful, interactive single-page HTML 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.

Codex should do the work directly: inspect the repo, infer what the product does, and write a finished single-file HTML course into the workspace.

"Vibe coders" — people who build software by instructing AI coding tools in natural language, without a traditional CS education.

You've built something (or found something cool on GitHub). It works. But you don't really understand how it works under the hood. This skill generates a course that teaches you — not by lecturing, but by tracing what happens when you actually use the app.

Your goals are practical, not academic:

• Steer AI coding tools better (make smarter architectural decisions)
• Detect when AI is wrong (spot hallucinations, catch bad patterns)
• Debug when AI gets stuck (break out of bug loops)
• Talk to engineers without feeling lost

You're not trying to become a software engineer. You want coding as a superpower.

The output is a single HTML file — no dependencies, no setup, works offline. 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 Code translation block

• Animated visualizations — data flow animations, group chat between components, architecture diagrams Animated data flow

• Interactive quizzes that test application not memorization ("You want to add favorites — which files change?") Interactive quiz

• Glossary tooltips — hover any technical term for a plain-English definition Glossary tooltip

• Warm, distinctive design — not the typical purple-gradient AI look

User-installed Codex skills typically live in ~/.agents/skills/ even though bundled skills may also appear under ~/.codex/skills/.

1. Copy the codebase-to-course folder into ~/.agents/skills/
2. Open any project in Codex
3. Mention $codebase-to-course or say: "Turn this codebase into an interactive course"

Example install:

mkdir -p ~/.agents/skills
cp -R /path/to/codebase-to-course ~/.agents/skills/codebase-to-course

If you're already inside this repo:

mkdir -p ~/.agents/skills/codebase-to-course
cp SKILL.md README.md ~/.agents/skills/codebase-to-course/
cp -R references ~/.agents/skills/codebase-to-course/

• "Turn this into a course"
• "Explain this codebase interactively"
• "Make a course from this project"
• "Teach me how this code works"
• "Interactive tutorial from this code"

This inverts traditional CS education. The old way: memorize concepts for years → eventually build something → finally see the point (most people quit before step 3). This way: build something → experience it working → now understand how it works.

Every screen is at least 50% visual. Max 2-3 sentences per text block. If something can be a diagram, animation, or interactive element — it shouldn't be a paragraph.

No "What does API stand for?" Instead: "A user reports stale data after switching pages. Where would you look first?" Quizzes test whether you can use what you learned to solve a new problem.

Each concept gets a metaphor that fits that specific idea. A database is a library with a card catalog. Auth is a bouncer checking IDs. API rate limiting is a nightclub with a capacity limit. Never the same metaphor twice.

Code snippets are exact copies from the real codebase — never modified or simplified. The learner should be able to open the actual file and see the same code they learned from.

codebase-to-course/
├── SKILL.md # Main skill instructions
└── references/
 ├── design-system.md # CSS tokens, typography, colors, layout
 └── interactive-elements.md # Quiz, animation, and visualization patterns

Originally created by Zara Zhangrui. Forked and adapted for Codex by TMFNK.