{"id":"65f95461-563e-4118-9314-5079691e3ad3","shortId":"h2QBn5","kind":"skill","title":"explain-code","tagline":"Explains code with visual diagrams and analogies. Use when explaining how code works, teaching about a codebase, or when the user asks \"how does this work?\" Don't use for modifying code, fixing bugs, or generating new implementations.","description":"When explaining code, always include:\n\n1. **Start with an analogy**: Compare the code to something from everyday life\n2. **Draw a diagram**: Use ASCII art to show the flow, structure, or relationships\n3. **Walk through the code**: Explain step-by-step what happens\n4. **Highlight a gotcha**: What's a common mistake or misconception?\n\nKeep explanations conversational. For complex concepts, use multiple analogies.\n\n## Diagram Types\n\n**Flow / Control flow:**\n```\nInput -> [Validate] -> [Process] -> [Save] -> Output\n                          |\n                       [Error] -> Return 400\n```\n\n**Call stack / Sequence:**\n```\nClient          API           DB\n  |--request-->  |             |\n  |              |--query----> |\n  |              |<--result--- |\n  |<-response--  |             |\n```\n\n**Tree / Hierarchy:**\n```\nApp\n+-- Header\n|   +-- Nav\n+-- Main\n|   +-- Sidebar\n|   +-- Content\n+-- Footer\n```\n\n**State machine:**\n```\n[Idle] --submit--> [Loading] --success--> [Done]\n                       |\n                    error|\n                   [Failed] --retry--> [Loading]\n```\n\n**Data structure:**\n```\nUser {\n  id: string\n  profile: Profile --> { name, avatar, bio }\n  posts: Post[]    --> [{ id, title, body }]\n}\n```\n\n**Before / After:**\n```\nBefore:               After:\nfn()                  fn()\n  doA()                 doA()\n  doB()                 doB()\n  doC()     ->          helpers()\n  doD()                   doC()\n  doE()                   doD()\n                          doE()\n```\n\n## Error Handling\n\n- Code references external files/modules -- read them before explaining\n- Diagram too complex -- split into multiple focused diagrams, each covering one concept","tags":["explain","code","agent","skills","helderberto","agent-skills","ai-tools","antigravity","claude-code","cursor","developer-tools","gemini-cli"],"capabilities":["skill","source-helderberto","skill-explain-code","topic-agent-skills","topic-ai-tools","topic-antigravity","topic-claude-code","topic-cursor","topic-developer-tools","topic-gemini-cli","topic-markdown","topic-plugin","topic-sdlc","topic-skills","topic-tracer-bullet"],"categories":["agent-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/helderberto/agent-skills/explain-code","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add helderberto/agent-skills","source_repo":"https://github.com/helderberto/agent-skills","install_from":"skills.sh"}},"qualityScore":"0.454","qualityRationale":"deterministic score 0.45 from registry signals: · indexed on github topic:agent-skills · 8 github stars · SKILL.md body (1,678 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:09:13.314Z","embedding":null,"createdAt":"2026-05-18T13:14:53.375Z","updatedAt":"2026-05-18T19:09:13.314Z","lastSeenAt":"2026-05-18T19:09:13.314Z","tsv":"'1':47 '2':60 '3':74 '4':86 '400':118 'alway':45 'analog':10,51,105 'api':123 'app':131 'art':66 'ascii':65 'ask':25 'avatar':157 'bio':158 'bodi':163 'bug':37 'call':119 'client':122 'code':3,5,15,35,44,54,78,183 'codebas':20 'common':93 'compar':52 'complex':101,193 'concept':102,202 'content':136 'control':109 'convers':99 'cover':200 'data':149 'db':124 'diagram':8,63,106,191,198 'doa':170,171 'dob':172,173 'doc':174,177 'dod':176,179 'doe':178,180 'done':144 'draw':61 'error':116,145,181 'everyday':58 'explain':2,4,13,43,79,190 'explain-cod':1 'explan':98 'extern':185 'fail':146 'files/modules':186 'fix':36 'flow':70,108,110 'fn':168,169 'focus':197 'footer':137 'generat':39 'gotcha':89 'handl':182 'happen':85 'header':132 'helper':175 'hierarchi':130 'highlight':87 'id':152,161 'idl':140 'implement':41 'includ':46 'input':111 'keep':97 'life':59 'load':142,148 'machin':139 'main':134 'misconcept':96 'mistak':94 'modifi':34 'multipl':104,196 'name':156 'nav':133 'new':40 'one':201 'output':115 'post':159,160 'process':113 'profil':154,155 'queri':126 'read':187 'refer':184 'relationship':73 'request':125 'respons':128 'result':127 'retri':147 'return':117 'save':114 'sequenc':121 'show':68 'sidebar':135 'skill' 'skill-explain-code' 'someth':56 'source-helderberto' 'split':194 'stack':120 'start':48 'state':138 'step':81,83 'step-by-step':80 'string':153 'structur':71,150 'submit':141 'success':143 'teach':17 'titl':162 'topic-agent-skills' 'topic-ai-tools' 'topic-antigravity' 'topic-claude-code' 'topic-cursor' 'topic-developer-tools' 'topic-gemini-cli' 'topic-markdown' 'topic-plugin' 'topic-sdlc' 'topic-skills' 'topic-tracer-bullet' 'tree':129 'type':107 'use':11,32,64,103 'user':24,151 'valid':112 'visual':7 'walk':75 'work':16,29","prices":[{"id":"59be8f4f-460c-44c9-a47c-ae18843c10b4","listingId":"65f95461-563e-4118-9314-5079691e3ad3","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"helderberto","category":"agent-skills","install_from":"skills.sh"},"createdAt":"2026-05-18T13:14:53.375Z"}],"sources":[{"listingId":"65f95461-563e-4118-9314-5079691e3ad3","source":"github","sourceId":"helderberto/agent-skills/explain-code","sourceUrl":"https://github.com/helderberto/agent-skills/tree/main/skills/explain-code","isPrimary":false,"firstSeenAt":"2026-05-18T13:14:53.375Z","lastSeenAt":"2026-05-18T19:09:13.314Z"}],"details":{"listingId":"65f95461-563e-4118-9314-5079691e3ad3","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"helderberto","slug":"explain-code","github":{"repo":"helderberto/agent-skills","stars":8,"topics":["agent-skills","ai","ai-tools","antigravity","claude-code","cursor","developer-tools","gemini-cli","markdown","plugin","sdlc","skills","tracer-bullet"],"license":"mit","html_url":"https://github.com/helderberto/agent-skills","pushed_at":"2026-05-14T11:37:47Z","description":"My personal SDLC toolbelt for AI coding agents — PRD to ship.","skill_md_sha":"dc212d84aac7bcb39cffea7d3dac21a49076fc4e","skill_md_path":"skills/explain-code/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/helderberto/agent-skills/tree/main/skills/explain-code"},"layout":"multi","source":"github","category":"agent-skills","frontmatter":{"name":"explain-code","description":"Explains code with visual diagrams and analogies. Use when explaining how code works, teaching about a codebase, or when the user asks \"how does this work?\" Don't use for modifying code, fixing bugs, or generating new implementations."},"skills_sh_url":"https://skills.sh/helderberto/agent-skills/explain-code"},"updatedAt":"2026-05-18T19:09:13.314Z"}}