explain-code
Explains code with visual diagrams and analogies. Use when explaining how code works, walking through a codebase area, or when the user asks "how does this work?" Don't use for modifying code, fixing bugs, generating new implementations, or multi-session concept learning (use /teach).
- Installs
- 60
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/helderberto/agent-skills --skill explain-code- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads explain-code automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
When explaining code, always include:
- Start with an analogy: Compare the code to something from everyday life
- Draw a diagram: Use ASCII art to show the flow, structure, or relationships
- Walk through the code: Explain step-by-step what happens
- Highlight a gotcha: What's a common mistake or misconception?
Keep explanations conversational. For complex concepts, use multiple analogies.
Diagram Types
Flow / Control flow:
Input -> [Validate] -> [Process] -> [Save] -> Output
|
[Error] -> Return 400
Call stack / Sequence:
Client API DB
|--request--> | |
| |--query----> |
| |<--result--- |
|<-response-- | |
Tree / Hierarchy:
App
+-- Header
| +-- Nav
+-- Main
| +-- Sidebar
| +-- Content
+-- Footer
State machine:
[Idle] --submit--> [Loading] --success--> [Done]
|
error|
[Failed] --retry--> [Loading]
Data structure:
User {
id: string
profile: Profile --> { name, avatar, bio }
posts: Post[] --> [{ id, title, body }]
}
Before / After:
Before: After:
fn() fn()
doA() doA()
doB() doB()
doC() -> helpers()
doD() doC()
doE() doD()
doE()
Error Handling
- Code references external files/modules -- read them before explaining
- Diagram too complex -- split into multiple focused diagrams, each covering one concept
FAQ
What does the explain-code skill do?
Explains code with visual diagrams and analogies. Use when explaining how code works, walking through a codebase area, or when the user asks "how does this work?" Don't use for modifying code, fixing bugs, generating new implementations, or multi-session concept learning (use /teach).
How do I install explain-code?
Run npx skills add https://github.com/helderberto/agent-skills --skill explain-code in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/explain-code/ (personal) or .claude/skills/explain-code/ (project).
Which AI agents can use explain-code?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is explain-code safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains explain-code?
It is published by helderberto in helderberto/agent-skills. It has 60 recorded installs.
More from helderberto/agent-skills
code-review
helderberto/agent-skills
Correctness lens for a PR or diff, used by build and review — bugs, security, performance, and code quality. Use when asked to review a PR or give pull request feedback, even when the diff is pasted inline. Don't use for local uncommitted changes, creating PRs, or merging.
commit
helderberto/agent-skills
Group unstaged changes into atomic commits by concern, matching repository style. Use when asked to "commit", "create a commit", or "commit changes". Don't use for pushing or pull requests (/to-pr).
lint
helderberto/agent-skills
Open the skill to read its SKILL.md instructions.
refactor-plan
helderberto/agent-skills
Open the skill to read its SKILL.md instructions.
Popular education & science skills
teach
mattpocock/skills
Teach the user a new skill or concept, within this workspace.
scaffold-exercises
mattpocock/skills
Create exercise directory structures with sections, problems, solutions, and explainers that pass linting. Use when user wants to scaffold exercises, create exercise stubs, or set up a new course section.
paper-context-resolver
lllllllama/rigorpilot-skills
Rigor Paper Context helper for README-first deep learning repo reproduction. Use only when the README and repository files leave a narrow reproduction-critical gap and the task is to resolve a specific paper detail such as dataset split, preprocessing, evaluation protocol, checkpoint mapping, or runtime assumption from primary paper sources while recording conflicts. Do not use for general paper summary, repo scanning, environment setup, command execution, title-only paper lookup, or replacing README guidance by default.
caveman-learn
juliusbrussee/caveman
Act on a Caveman learn report - review the ranked token sinks, apply cost-lowering fixes with per-edit consent, and report what those fixes returned. Use when asked to lower an agent's token cost, what caveman has saved, to trim a heavy CLAUDE.md, or to offload re-pasted context into cavemem.
gsap-plugins
greensock/gsap-skills
Official GSAP skill for GSAP plugins — registration, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG and physics plugins, CustomEase, EasePack, CustomWiggle, CustomBounce, GSDevTools. Use when the user asks about a GSAP plugin, scroll-to, flip animations, draggable, SVG drawing, or plugin registration.
teach-impeccable
pbakaus/impeccable
DEPRECATED: Use /impeccable teach instead. This command has been folded into the impeccable skill.