[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-75047":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":9,"rankLanguage":9,"license":9,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":21,"hasPages":21,"topics":23,"createdAt":9,"pushedAt":9,"updatedAt":24,"readmeContent":25,"aiSummary":26,"trendingCount":15,"starSnapshotCount":15,"syncStatus":27,"lastSyncTime":28,"discoverSource":29},75047,"codebase-to-course","zarazhangrui\u002Fcodebase-to-course","zarazhangrui","A Claude Code skill that turns any codebase into a beautiful, interactive single-page HTML course for non-technical vibe coders.",null,"CSS",4604,481,22,4,0,36,92,278,108,30.05,false,"main",[],"2026-06-12 02:03:31","# 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:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Ffb9e7fac-05c1-4f98-b80c-46543ef81afc\" \u002F>\n\n- **Animated visualizations** — data flow animations, group chat between components, architecture diagrams\n\u003Cimg width=\"720\" alt=\"Animated data flow\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F20fb403e-7dfd-4a47-989b-bbae86ca8041\" \u002F>\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:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F57706496-9fa8-457a-8450-3da22789951c\" \u002F>\n\n- **Glossary tooltips** — hover any technical term for a plain-English definition\n\u003Cimg width=\"720\" alt=\"Glossary tooltip\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fac2f160a-d73f-4779-97b2-a06fdb5f3227\" \u002F>\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 `~\u002F.claude\u002Fskills\u002F`\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\u002F\n├── SKILL.md                          # Main skill instructions\n└── references\u002F\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:\u002F\u002Fx.com\u002Fzarazhangrui) with Claude Code.\n","该项目能够将任意代码库转换为美观且交互式的单页HTML课程，特别适合没有传统计算机科学背景的“氛围型”编程者。其核心功能包括基于滚动的导航、动画可视化、嵌入式测验以及代码与通俗英语并排翻译等，帮助用户理解代码的实际工作原理。技术特点上，输出的是一个完全自包含的HTML文件，无需额外依赖或设置，支持离线使用。适用于希望通过自然语言指导AI编码工具来构建软件的人士，旨在提高他们对AI生成代码的理解和调试能力，而不仅仅是为了学术目的学习编程。",2,"2026-06-11 03:52:04","high_star"]