Menu

#255 by GitHub stars

zarazhangrui/codebase-to-course

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 'tu

Education

History

Review weekly changes to SKILL.md before updating. Dates mark the weeks in which we observed each version; checks apply to the recorded commits.

View weekly changes

SKILL.md

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Network or broad shell

First observation → ff8837ecf8e9

No earlier version was observed for comparison.

Compare on GitHub

View on GitHubAdd to my skills

Verified commit ff8837ecf8e9f6ce9874ffa42e42633394a52a00

5.8kGitHub stars
30stars in 7 days
1skill in this repository
0commits in 30 days

Heat

5.0
  • Star growth, last 7 daysAhead of 73% of tracked repositories
  • Star growth, last 24 hoursAhead of 69% of tracked repositories
  • Rank movement, last 7 daysAhead of 52% of tracked repositories
  • Commits, last 30 daysAhead of 0% of tracked repositories
  • Accounts asking about it through MCP, last 7 daysNot available
  • Hot votes this weekAhead of 0% of tracked repositories

Heat never changes the order by stars, and sponsorship never touches it. How heat works

Stars over time

Aug 2, 2026Nov 6, 20265,775

Individual skills in this repository

How it works

codebase-to-course

When your agent uses it

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.

What it loads into context

Frontmatter

145 tokens

Always available to the agent

SKILL.md

3,882 tokens

When the skill is activated

Reference documents

16,737 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

  1. First-Run Welcome
  2. Who This Is For
  3. Why This Approach Works
  4. The Process
  5. Design Identity
  6. Reference Files

Scripts executed separately

  • references/build.sh
  • references/main.js

Files

  • .gitignoreasset18 bytes
  • README.mddoc4,333 bytes
  • SKILL.mdcore17,701 bytes
  • SKILL.mdcore17,701 bytes
  • SKILL.mdcore17,701 bytes
  • SKILL.mdcore17,701 bytes
  • SKILL.mdcore17,701 bytes
  • SKILL.mdcore17,701 bytes
  • references/_base.htmlasset2,238 bytes
  • references/_footer.htmlasset27 bytes
  • references/build.shruns210 bytes
  • references/content-philosophy.mddoc9,047 bytes
  • references/design-system.mddoc12,661 bytes
  • references/gotchas.mddoc3,052 bytes
  • references/interactive-elements.mddoc32,424 bytes
  • references/main.jsruns19,539 bytes
  • references/module-brief-template.mddoc2,580 bytes
  • references/styles.cssasset34,781 bytes

No excerpt is shown for this license. Read the source on GitHub.

View the complete source on GitHub

Skills included

  • codebase-to-course

Repository facts

License
No license detected
Created
Mar 22, 2026
Last pushed
Mar 30, 2026
Forks
580
Open issues
7
Project activity
Slowing

Rank over the last 12 weeks

Now #255 · best #195 · down 25 in 30 days

  1. #251 from Oct 31 to Nov 1
  2. #252 on Nov 2
  3. #254 on Nov 3
  4. #253 on Nov 4
  5. #254 on Nov 5
  6. #255 since Nov 6
70 earlier periods
  1. #184 on Aug 2
  2. #186 on Aug 7
  3. #185 from Aug 8 to Aug 9
  4. #188 on Aug 10
  5. #191 from Aug 11 to Aug 12
  6. #194 from Aug 13 to Aug 14
  7. #195 from Aug 15 to Aug 16
  8. #196 on Aug 17
  9. #198 on Aug 18
  10. #199 on Aug 19
  11. #197 on Aug 20
  12. #199 on Aug 21
  13. #196 on Aug 22
  14. #202 on Aug 23
  15. #200 from Aug 24 to Aug 25
  16. #202 on Aug 26
  17. #204 on Aug 27
  18. #202 on Aug 28
  19. #203 on Aug 29
  20. #202 on Aug 30
  21. #201 on Aug 31
  22. #206 on Sep 1
  23. #201 on Sep 2
  24. #207 on Sep 3
  25. #204 on Sep 4
  26. #206 on Sep 5
  27. #204 on Sep 6
  28. #207 on Sep 7
  29. #208 on Sep 8
  30. #210 on Sep 9
  31. #209 on Sep 10
  32. #211 on Sep 11
  33. #213 on Sep 12
  34. #215 from Sep 13 to Sep 14
  35. #216 from Sep 15 to Sep 16
  36. #217 on Sep 17
  37. #220 on Sep 18
  38. #218 on Sep 19
  39. #221 on Sep 20
  40. #222 from Sep 21 to Sep 22
  41. #224 on Sep 23
  42. #223 on Sep 24
  43. #222 on Sep 25
  44. #223 on Sep 26
  45. #225 on Sep 27
  46. #228 from Sep 28 to Sep 29
  47. #225 on Sep 30
  48. #228 on Oct 1
  49. #229 on Oct 2
  50. #224 on Oct 3
  51. #223 on Oct 4
  52. #224 on Oct 5
  53. #226 on Oct 6
  54. #230 on Oct 7
  55. #229 on Oct 8
  56. #232 on Oct 9
  57. #231 from Oct 10 to Oct 11
  58. #234 on Oct 12
  59. #235 on Oct 13
  60. #233 on Oct 14
  61. #234 on Oct 15
  62. #232 on Oct 16
  63. #234 on Oct 17
  64. #235 from Oct 18 to Oct 20
  65. #236 from Oct 21 to Oct 22
  66. #235 from Oct 23 to Oct 24
  67. #237 on Oct 25
  68. #242 on Oct 28
  69. #247 on Oct 29
  70. #249 on Oct 30

Before you install

Network or broad shell

Automated signals, not a guarantee

Checked Nov 2, 2026

Not fully analyzed: some files were too long, unreadable or missing. This never lowers the level.

Show 5 notes
  • SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
  • SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
  • SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
  • SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
  • SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
Show all 24 signals by file

README.md

  • Network accessline 25
    - **Scroll-based modules** with progress tracking and keyboard navigation - **Code ↔ Plain English translations** — real code on the left, what it means on the right <img width="720" alt="Code translation block" src="https://github.com/user
  • Network accessline 27
    <img width="720" alt="Code translation block" src="https://github.com/user-attachments/assets/fb9e7fac-05c1-4f98-b80c-46543ef81afc" />
  • Network accessline 29
    - **Animated visualizations** — data flow animations, group chat between components, architecture diagrams <img width="720" alt="Animated data flow" src="https://github.com/user-attachments/assets/20fb403e-7dfd-4a47-989b-bbae86ca8041" />
  • Network accessline 30
    <img width="720" alt="Animated data flow" src="https://github.com/user-attachments/assets/20fb403e-7dfd-4a47-989b-bbae86ca8041" />
  • Network accessline 32
    - **Interactive quizzes** that test *application* not memorization ("You want to add favorites — which files change?") <img width="720" alt="Interactive quiz" src="https://github.com/user-attachments/assets/57706496-9fa8-457a-8450-3da227899
  • Network accessline 33
    <img width="720" alt="Interactive quiz" src="https://github.com/user-attachments/assets/57706496-9fa8-457a-8450-3da22789951c" />
  • Network accessline 35
    - **Glossary tooltips** — hover any technical term for a plain-English definition <img width="720" alt="Glossary tooltip" src="https://github.com/user-attachments/assets/ac2f160a-d73f-4779-97b2-a06fdb5f3227" />
  • Network accessline 36
    <img width="720" alt="Glossary tooltip" src="https://github.com/user-attachments/assets/ac2f160a-d73f-4779-97b2-a06fdb5f3227" />
  • Network accessline 92
    Built by [Zara](https://x.com/zarazhangrui) with Claude Code.

SKILL.md

  • Network accessline 16
    > Just point me at a project: > - **A local folder** — e.g., "turn ./my-project into a course" > - **A GitHub link** — e.g., "make a course from https://github.com/user/repo"
  • Network accessline 17
    > - **A local folder** — e.g., "turn ./my-project into a course" > - **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 cours
  • Network accessline 18
    > - **A GitHub link** — e.g., "make a course from https://github.com/user/repo"

references/_base.html

  • Network accessline 8
    <!-- Google Fonts: Bricolage Grotesque · DM Sans · JetBrains Mono -->   <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 9
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 10
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 11
    <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400;1,9..40,500

references/build.sh

  • Executable scriptline 1
    #!/bin/bash

references/design-system.md

  • Network accessline 102
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 103
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 104
    <link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400;1,9..40,500

references/interactive-elements.md

  • Network accessline 463
    <div class="bug-line bug-target" data-line="3" onclick="checkBugLine(this, true)">       <span class="line-num">3</span>       <code>    fetch(url).then(r => r.json()).then(data => sendResponse(data));</code>
  • Network accessline 464
    <span class="line-num">3</span>       <code>    fetch(url).then(r => r.json()).then(data => sendResponse(data));</code>     </div>
  • Network accessline 465
    <code>    fetch(url).then(r => r.json()).then(data => sendResponse(data));</code>

references/main.js

  • Executable scriptline 1
    Executable file

How the signals fit together

Facts from a static read of the files at the pinned commit. They describe what the code does, not why.

Some files could not be read; the facts below still hold.

Signal confidence: 20 facts

Works with

Agent compatibility, from the files in this repository
AgentStatusEvidenceInstall to
Claude CodeCompatibleStandard SKILL.md SKILL.md.claude/skills/<skill-name>/
CodexCompatibleStandard SKILL.md SKILL.md.agents/skills/<skill-name>/
CursorCompatibleStandard SKILL.md SKILL.md.cursor/skills/<skill-name>/
Gemini CLICompatibleStandard SKILL.md SKILL.md.gemini/skills/<skill-name>/
GitHub CopilotCompatibleStandard SKILL.md SKILL.md.github/skills/<skill-name>/
OpenCodeCompatibleStandard SKILL.md SKILL.md.opencode/skills/<skill-name>/
  • Native The repository ships a manifest, folder or frontmatter field for this agent.
  • Compatible A standard SKILL.md that this agent can read.
  • Unknown No evidence either way.

Derived automatically from paths, manifests and frontmatter. Not tested on each agent.

You might also use

luongnv89/claude-howto

A visual, example-driven guide to Claude Code — from basic concepts to advanced agents, with copy-paste templates that bring immediate value.

46.7kGitHub stars

obra/superpowers

An agentic skills framework & software development methodology that works.

313.4kGitHub stars

affaan-m/ECC

The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.

298.3kGitHub stars

multica-ai/andrej-karpathy-skills

Behavioral guidelines to reduce common LLM coding mistakes. Use when writing, reviewing, or refactoring code to avoid overcomplication, make surgical changes, surface assumptions,…

230.1kGitHub stars

anthropics/skills

Public repository for Agent Skills

188.1kGitHub stars

garrytan/gstack

Use Garry Tan's exact Claude Code setup: 23 opinionated tools that serve as CEO, Designer, Eng Manager, Release Manager, Doc Engineer, and QA

140.3kGitHub stars

Explore alternatives and comparisons

Add this badge to your README

It updates every night and links to this page.

zarazhangrui/codebase-to-course: #255 on hotskills, 5.8k stars

[![zarazhangrui/codebase-to-course on hotskills](https://hotskills.dev/badge/zarazhangrui-codebase-to-course.svg)](https://hotskills.dev/skill/zarazhangrui-codebase-to-course/)