{"id":47577378,"url":"https://github.com/zarazhangrui/codebase-to-course","last_synced_at":"2026-04-01T00:00:53.511Z","repository":{"id":346631922,"uuid":"1188997672","full_name":"zarazhangrui/codebase-to-course","owner":"zarazhangrui","description":"A Claude Code skill that turns any codebase into a beautiful, interactive single-page HTML course for non-technical vibe coders.","archived":false,"fork":false,"pushed_at":"2026-03-24T17:58:07.000Z","size":51,"stargazers_count":1471,"open_issues_count":3,"forks_count":137,"subscribers_count":6,"default_branch":"main","last_synced_at":"2026-03-25T22:59:44.940Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zarazhangrui.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-03-22T21:25:01.000Z","updated_at":"2026-03-25T22:58:21.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/zarazhangrui/codebase-to-course","commit_stats":null,"previous_names":["zarazhangrui/codebase-to-course"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/zarazhangrui/codebase-to-course","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zarazhangrui%2Fcodebase-to-course","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zarazhangrui%2Fcodebase-to-course/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zarazhangrui%2Fcodebase-to-course/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zarazhangrui%2Fcodebase-to-course/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zarazhangrui","download_url":"https://codeload.github.com/zarazhangrui/codebase-to-course/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zarazhangrui%2Fcodebase-to-course/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31259003,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-31T18:32:52.363Z","status":"ssl_error","status_checked_at":"2026-03-31T18:32:51.507Z","response_time":111,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-03-31T06:00:20.564Z","updated_at":"2026-04-01T00:00:53.471Z","avatar_url":"https://github.com/zarazhangrui.png","language":null,"funding_links":[],"categories":["Agent Skills 🤖","⭐ 明星单项 Skills (Featured Standalone Skills)","CSS","Marketing \u0026 Content","Other","🧠 Agent Skills"],"sub_categories":["General","架构演进：代码优先 (Code-First)","Compliance \u0026 Auditing"],"readme":"# Codebase to Course\n\nA Claude Code skill that turns any codebase into a beautiful, interactive single-page HTML course.\n\nPoint 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.\n\n## Who is this for?\n\n**\"Vibe coders\"** — people who build software by instructing AI coding tools in natural language, without a traditional CS education.\n\nYou'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.\n\n**Your goals are practical, not academic:**\n- Steer AI coding tools better (make smarter architectural decisions)\n- Detect when AI is wrong (spot hallucinations, catch bad patterns)\n- Debug when AI gets stuck (break out of bug loops)\n- Talk to engineers without feeling lost\n\nYou're not trying to become a software engineer. You want coding as a superpower.\n\n## What the course looks like\n\nThe output is a **single HTML file** — no dependencies, no setup, works offline. It includes:\n\n- **Scroll-based modules** with progress tracking and keyboard navigation\n- **Code ↔ Plain English translations** — real code on the left, what it means on the right\n\u003cimg width=\"720\" alt=\"Code translation block\" src=\"https://github.com/user-attachments/assets/fb9e7fac-05c1-4f98-b80c-46543ef81afc\" /\u003e\n\n- **Animated visualizations** — data flow animations, group chat between components, architecture diagrams\n\u003cimg width=\"720\" alt=\"Animated data flow\" src=\"https://github.com/user-attachments/assets/20fb403e-7dfd-4a47-989b-bbae86ca8041\" /\u003e\n\n- **Interactive quizzes** that test *application* not memorization (\"You want to add favorites — which files change?\")\n\u003cimg width=\"720\" alt=\"Interactive quiz\" src=\"https://github.com/user-attachments/assets/57706496-9fa8-457a-8450-3da22789951c\" /\u003e\n\n- **Glossary tooltips** — hover any technical term for a plain-English definition\n\u003cimg width=\"720\" alt=\"Glossary tooltip\" src=\"https://github.com/user-attachments/assets/ac2f160a-d73f-4779-97b2-a06fdb5f3227\" /\u003e\n\n  \n- **Warm, distinctive design** — not the typical purple-gradient AI look\n\n## How to use\n\n### As a Claude Code skill\n\n1. Copy the `codebase-to-course` folder into `~/.claude/skills/`\n2. Open any project in Claude Code\n3. Say: *\"Turn this codebase into an interactive course\"*\n\n### Trigger phrases\n\n- \"Turn this into a course\"\n- \"Explain this codebase interactively\"\n- \"Make a course from this project\"\n- \"Teach me how this code works\"\n- \"Interactive tutorial from this code\"\n\n## Design philosophy\n\n### Build first, understand later\n\nThis 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.**\n\n### Show, don't tell\n\nEvery 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.\n\n### Quizzes test doing, not knowing\n\nNo \"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.\n\n### No recycled metaphors\n\nEach 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.\n\n### Original code only\n\nCode 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.\n\n## Skill structure\n\n```\ncodebase-to-course/\n├── SKILL.md                          # Main skill instructions\n└── references/\n    ├── design-system.md              # CSS tokens, typography, colors, layout\n    └── interactive-elements.md       # Quiz, animation, and visualization patterns\n```\n\n\n---\n\nBuilt by [Zara](https://x.com/zarazhangrui) with Claude Code.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzarazhangrui%2Fcodebase-to-course","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzarazhangrui%2Fcodebase-to-course","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzarazhangrui%2Fcodebase-to-course/lists"}