system-diagram-animation
Installation
SKILL.md
System Diagram Animation
One dark stage. A diagram assembles itself in the order the story is told: a box lands, an arrow draws to the next box, a glowing packet travels along it, and the caption names what just happened. It never needs to cut, and it feels fast because something new lands every 1–2 seconds.
Options
| Option | Default | Notes |
|---|---|---|
| format | vertical 1080×1920 | or landscape 1920×1080 (diagrams fit landscape more naturally) |
| duration | 20 s | 15–60 s; about 1 node per 1.5 s |
| tone | clean | clean (default), punchy (faster reveals, more packets, a shake on errors), calm (longer holds, no shake) |
| theme | dark | or light (paper white with navy lines) |
Brief (answer before planning)
- What system or flow, in one sentence?
- What is the one path to follow (request → … → response)? List the nodes in order (at most 8 on screen at once).
- Where is the interesting moment: a failure, a bottleneck, a cache hit, a retry?
- What should the viewer remember at the end (one line)?