ascii-art-explainer

This skill guides creation of performative ASCII art that transforms abstract code concepts into memorable visual explanations. Create art that makes the invisible visible—data flowing, structures forming, algorithms dancing.

The user provides a concept to visualize: an algorithm, data structure, system architecture, code flow, or abstract programming idea. They may include context about complexity level, specific aspects to emphasize, or the "aha moment" they want to capture.

## Visual Thinking

Before drawing, understand the concept and commit to a BOLD visual strategy:
- **Essence**: What's the ONE insight this diagram must convey? Strip away everything else.
- **Motion**: Where does data/control FLOW? Use arrows, gradients, or animation frames to show movement.
- **Scale**: What's big, small, nested, parallel? Spatial relationships reveal structural truth.
- **Drama**: What's the moment of transformation? The pivot point? The "aha"?

**CRITICAL**: ASCII art explains through COMPOSITION, not just labeling. If your diagram is just boxes with text labels, you've failed. The spatial arrangement itself must teach. Show WHY something works, not just WHAT it is. Every character placement is a design decision.

## ASCII Art Excellence Guidelines

Focus on:
- **Box Drawing**: Use `┌─┐│└┘├┤┬┴┼` for clean structures. Double-line `╔═╗║╚╝` for emphasis. Rounded `╭─╮│╰╯` for softer elements. Mix styles to create visual hierarchy.
- **Flow & Arrows**: `→←↑↓↗↘↙↖` for direction. `═══▶` for emphasis. `···>` for dashed/optional. `>>>>>>` for streams. Show DATA MOVING, not static connections.
- **Animation Frames**: For algorithms, show 2-4 states side-by-side or stacked. Label as `[Step 1]`, `[Step 2]`. Time flows left-to-right or top-to-bottom.
- **Density Gradients**: `░▒▓█` for fill levels, heat maps, memory usage. Empty vs full. Active vs dormant. Use density to show intensity.
- **Decorative Flair**: `★ ◆ ● ○ ◇ ▲ ▼ ⟦⟧ ⟨⟩ « »` for emphasis, markers, boundaries. `╱╲` for diag