Use when understanding complex algorithms, data structures, or code flows - creates animated visualizations and step-by-step interactive explanations
Build animated visualizations to understand complex algorithms and code.
Inspired by: Simon Willison's pattern of generating interactive explanations with animations and step-by-step controls to truly understand how code works.
| Visualization Type | Best Tool |
|---|---|
| Algorithm animation | HTML + Canvas/SVG + JS |
| State machine | Mermaid diagram |
| Data flow | ASCII art or Mermaid |
| Tree/graph traversal | Interactive HTML |
| Sorting/searching | Animated bars |
"I want to understand how [algorithm/structure] handles [operation]"
Examples:
- "How does a red-black tree rebalance after insertion?"
- "What happens during merge sort on this array?"
- "How does the A* pathfinding algorithm explore nodes?"
Prompt pattern:
Create an interactive HTML visualization that explains [algorithm].
Include:
- Step-by-step controls (next/prev/play/pause)
- Visual state display at each step
- Annotations explaining what's happening
- Edge case demonstrations
Make it self-contained (single HTML file with inline CSS/JS).
After first version:
Create an interactive visualization of quicksort with:
- Array shown as colored bars
- Pivot highlighted in red
- Current comparison in yellow
- Step-by-step mode with explanation text
- Random array generator
- Edge case buttons (sorted, reverse, duplicates)
Self-contained, runs in browser, shareable:
<!DOCTYPE html>
<html>
<head>
<title>Algorithm Visualization</title>
<style>/* inline styles */</style>
</head>
<body>
<div id="canvas"></div>
<div id="controls">
<button onclick="step()">Step</button>
<button onclick="play()">Play</button>
</div>
<script>/* visualization logic */</script>
</body>
</html>
For state machines and flowcharts:
stateDiagram-v2
[*] --> Idle
Idle --> Processing: submit
Processing --> Success: complete
Processing --> Error: fail
Success --> [*]
Error --> Idle: retry
For terminal/text contexts:
Step 1: [5] [3] [8] [1] [9]
^pivot
Step 2: [3] [1] | [5] | [8] [9]
< pivot ^ > pivot
Save useful visualizations to Basic Memory:
write_note_basic - memory(
title="Red-Black Tree Insertion Visualization",
content="[HTML content or link]",
directory="knowledge/visualizations",
tags=["visualization", "algorithm", "tree", "interactive"],
)
Combine with linear-walkthrough skill:
| Tool | Use Case |
|---|---|
| HTML Canvas | Pixel-based animations |
| SVG | Scalable graphics, DOM manipulation |
| D3.js | Complex data visualizations |
| Mermaid | Diagrams in markdown |
| ASCII | Terminal-friendly, universal |
linear-walkthrough - Code understanding without visualizationdeep-dive - Thorough investigation with questioningcode-recipes - Extract patterns after understanding