figlisted
Install: claude install-skill smk-labs/claude-plugins
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
html, body { margin: 0; padding: 0; }
/* Layout, sizing, fonts, palette: design f