Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From hb
Explains code using visual diagrams, analogies, and step-by-step walkthroughs. Use when teaching a codebase or answering 'how does this work?'
npx claudepluginhub helderberto/agent-skills --plugin hbHow this skill is triggered — by the user, by Claude, or both
Slash command
/hb:explain-codeThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
When explaining code, always include:
Explains complex code, algorithms, and system architectures through clear narratives, diagrams, and step-by-step breakdowns for developers at all levels.
Explains complex code using narratives, Mermaid diagrams, and step-by-step breakdowns. Ideal for algorithms, design patterns, functions, and walkthroughs.
Explains code snippets: one-sentence summary and mental model by default; verbose adds ASCII diagram, key details, and modification guide.
Share bugs, ideas, or general feedback.
When explaining code, always include:
Keep explanations conversational. For complex concepts, use multiple analogies.
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()