# Zoom Out

> Explain code with visual diagrams and analogies.

Explain code with visual diagrams and analogies. Use when explaining how code works, walking through a codebase area, or the user asks "how does this work?" Don't use for modifying code, fixing bugs, or multi-session learning (/teach).

- Page: https://ss33.ai/skills/helderberto/zoom-out-35614862396
- Publisher: helderberto
- Category: [Software Development](https://ss33.ai/skills/category/software-development-t44z8z) › [Developer docs & tooling](https://ss33.ai/skills/category/software-development-t44z8z/developer-docs-and-tooling-nich6w)
- License: MIT
- Source: https://github.com/helderberto/agent-skills/blob/445681fd215e649201f91d65492025f0803efc0a/skills/zoom-out/SKILL.md

## Skill

SKILL.md: https://ss33.ai/api/v1/ss33/download/helderberto/zoom-out-35614862396

Read the code and anything it depends on before explaining. Then, always:

1. **Start with an analogy** from everyday life.
2. **Draw an ASCII diagram** matching the shape of the thing: flow, sequence between actors, tree/hierarchy, state machine, data structure, or before/after. One concept per diagram — split rather than cram.
3. **Walk through the code** step by step.
4. **Highlight a gotcha**: a common mistake or misconception.

Conversational tone. Complex concepts get more than one analogy.