Animated SVG Figure
Draws an animated diagram as one self-contained SVG for READMEs and posts.
Install
npx skills add vectorize-io/hindsight --skill figure -g -a claude-code -y- Repository
- vectorize-io/hindsight57.7k
- Category
- Design
- Updated
- 3d ago
- License
- MIT
- Context cost
- Mediumabout 1,827 tokens
- Runs scripts
- No, instructions only
What it does
Draw an animated figure (boxes, arrows, moving data) as one self-contained SVG for a GitHub README, PR, issue or blog post. Use when a change or an explanation needs a diagram, how a request flows, what a background job does, what a feature changed, or when the user asks for a diagram, figure, animation or "show it visually". The docs site's own pages use the interactive player instead (see step 4).
Figure
One animated SVG, no scripts, no upload: it renders and plays anywhere markdown does, GitHub README, PR and issue comments, blog posts, Notion. Sharp at any size, and it follows the reader's light or dark theme.
Figures are Giotto diagrams: one JSON document, the same
format the docs site's interactive figures use (hindsight-docs/figures/*.json).
You write the diagram JSON, never SVG. One command renders it. No build, no browser.
1. Write the diagram
Do not save it as a file in the repo. It is an input, not a deliverable, pipe it in (step 2), and the rendered SVG keeps a copy of it for you.
