# Fig
> Make a fig. A single looping animated SVG, one self-contained HTML file you can drop in an email or a slide. Use it when an idea moves (flows, loops, retries, queues, fan-outs). Faster than a paragraph, livelier than a static diagram. No player, no deck.
- Skill: `smkeramati/fig` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add smkeramati/fig`
- Raw SKILL.md: https://api.skillmd.com/api/skills/smkeramati/fig/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: smkeramati (https://skillmd.com/u/smkeramati)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/smkeramati/fig
---
Some ideas are explained better by a 5-second looping animation than by 100 lines of text.
Sketch the figure in ASCII first: static layout, labelled motion, loop length. Get a yes before writing JSX.
After building, look at the rendered file as a stranger would and refine once before handing back. ASCII covers structure; visual issues (collisions, weak contrast, orphan elements, dated chrome, loose components that should be grouped) only appear on screen.
## Guidelines
- **Subject fit.** Invent a visual metaphor for this specific idea. The same concept can be drawn many ways (a flow as a path, ripples, falling sand, expanding rings; a network as nodes, a constellation, a colony of pulses). Reach past the obvious shape.
- **One accent.** One thing moves meaningfully, in one accent colour. Show direction through motion, not a second hue.
- **Loop cleanly.** End frame equals start frame, or fade-pause-fade. No jerk at the seam.
- **Caption economy.** One short title plus a 5-word caption at most. The figure carries it.
- **Calm by default.** 5 to 10 second loops, `easeInOutCubic` or `easeInOutSine`. Bounce and elastic read as toy.
Pick fonts, palette, background, canvas, and layout for the subject. Nothing below is a default.
## Stack
Single HTML, React 18 + Babel via CDN. No npm, no sidecars.
```html
```
## GIF (only if the user asks)
A fig is HTML. If the user wants a GIF (for email clients that strip JS, slack previews, slide screenshots), use the bundled converter:
`bash scripts/html2gif.sh `
It needs Playwright and ffmpeg installed locally. If either is missing, the script will tell the user how to install it. Do not install dependencies yourself, just relay what the script reports. The `loop_seconds` argument must match the figure's actual loop, otherwise the GIF jumps at the seam.
## Never
No play/pause, no scrub, no multi-scene. Those belong to `web-animation-engine`. The recipient opens the file and the idea plays itself.