skill
learn
Claude Code plugin: type /learn after you build something and get a visual lesson in your browser - architecture, flows, design patterns, DB and cache, quiz.
Set up
Skills are installed by placing their folder where your agent loads skills.
The download comes from github.com/talayash/learn itself, not from our server, so what you get is exactly what its author published.
Install instructions come from the README
README
synced Oct 22, 2026learn
Type /learn after you build something, and get a visual lesson about what you just did.
A plugin for Claude Code and Codex. It reads your session and your git diff, then opens a page in your browser that explains your work: the architecture, how a request moves through it, the design patterns you used (with links to the exact lines), your database and cache choices, the words you should know, and a short quiz.
Why
You shipped a feature with an AI pair. It works. Could you explain it in a standup, defend it in a design review, or answer "what happens if Redis is down?" in an interview?
/learn turns the work you just did into the lesson you would have gotten from a senior engineer walking you through it.
Install
Claude Code
/plugin marketplace add talayash/learn
/plugin install learn@learn
Codex
codex plugin marketplace add talayash/learn
codex plugin add learn@learn
Or run /plugins inside Codex and install Learn from there. Start a new session afterwards.
Requires Node 18 or newer.
Copy the skill into your personal skills folder:
git clone https://github.com/talayash/learn
cp -r learn/skills/learn ~/.claude/skills/learn # Claude Code
cp -r learn/skills/learn ~/.agents/skills/learn # Codex
Use
In Codex, type $learn instead of /learn (same arguments), or pick Learn from /skills.
| Command | What it explains |
|---|---|
/learn | What you built in this session (falls back to uncommitted changes, then your branch) |
/learn last-commit | The last commit |
/learn main..HEAD | Any git range |
/learn src/payments | A file or folder as it is now |
/learn challenge | Hands-on exercises based on this session, with progressive hints and solutions |
/learn challenge last-commit | Exercises scoped to the last commit; also accepts a path or git range |
/learn --level senior | Same, but focused on trade-offs and failure modes. Also junior and mid (default). |
Each lesson is saved to .learn/<date>-<topic>.html in your repo, and .learn/index.html lists every lesson you have generated. Add .learn/ to .gitignore if you do not want to commit them.
What a lesson contains
Lessons are short on purpose: about 5 minutes of reading. Sections only appear when they apply, so a CSS refactor will not get a database section.
- Takeaways: three numbered lines, a 30-second explanation in your own voice, and the files that matter (collapsed)
- How it fits together: a diagram of the components and how they connect
- How a request moves: sequence diagrams with a plain-language walkthrough
- Key code: short, exact source excerpts with file links, line ranges, and explanations
- Patterns: cards with the idea, how your code uses it, clickable
file:linelinks (they open in VS Code), and trade-offs on demand - Data and cache: ER diagram, why each table exists, cache keys, TTLs and strategy
- Key terms, Quick check (quiz), Try it yourself (a task with hints revealed one at a time and a separate solution), Senior questions, Go deeper (curated links)
Sticky section bar with reading progress, light and dark themes, set in Atkinson Hyperlegible for easy reading. Works on phones and prints cleanly.
render.mjs warns when a lesson runs over its length budget (for example more than 3 patterns or 1,100 words of prose), and the skill trims it before you see it.
How it works
/learn -> the agent (Claude Code or Codex) reads the session + git diff
-> writes lesson.json (a fixed schema)
-> render.mjs injects it into template.html
-> .learn/2026-10-20-checkout-api.html opens in your browser
The agent only writes data. The page design lives in one template, so every lesson looks the same and costs fewer tokens than generating HTML each time. Diagrams are Mermaid, rendered in the browser.
Privacy: nothing about your code leaves your machine beyond what your agent (Claude Code or Codex) already sends. The generated page loads Mermaid and two Google Fonts from public CDNs; everything else is inline.
Repository layout
.claude-plugin/ Claude Code plugin and marketplace manifests (Codex reads the marketplace too)
.codex-plugin/ Codex plugin manifest
commands/learn.md the /learn slash command (Claude Code)
skills/learn/
SKILL.md analysis steps and the lesson JSON schema
template.html the page: design, diagrams, quiz
render.mjs JSON -> HTML, history index, opens the browser
validate.mjs nested lesson schema validation
agents/openai.yaml Codex display metadata for the skill
examples/ a sample lesson
tests/ renderer tests
Try the renderer without an agent
node skills/learn/render.mjs examples/checkout-api.json
Try the challenges and embedded source excerpts:
node skills/learn/render.mjs examples/renderer-challenge.json
Contributing
Design changes go in skills/learn/template.html. Changes to what the agent analyzes go in skills/learn/SKILL.md. If you add a field to the schema, update both, plus examples/checkout-api.json.
npm install
npm test
Lesson text is always inserted with textContent, and the JSON is escaped so it cannot close its <script> tag. Please keep it that way; the tests check it.
Releasing
Releases are automatic. Bump the version in one PR:
npm run bump -- 0.2.0
This sets the same version in package.json, .claude-plugin/plugin.json, .claude-plugin/marketplace.json and .codex-plugin/plugin.json (a test fails if they ever disagree). When the PR is merged and the tests pass on main, the Release workflow tags v0.2.0 and publishes a GitHub Release with notes generated from the merged PRs. Pushes that do not change the version release nothing.
License
MIT