Draw your own figure

Skill/mimoAny agent

mimo is a skill for coding agents. Give it an idea and it designs, draws and checks a new animated figure, to the same rules and on the same engine as every figure on this site.

Install
1 command
npx skills add
Checks
11
run on every figure
Rules
10
a figure must keep
Rounds
2 to 4
before most figures pass

Install

$npx skills add piyush-rj/mimo

What you install is one folder of small text files: the instructions, the rules, the engine and three example figures. Node runs the checks, and Chrome (or Playwright's Chromium) takes the contact sheet. Without a browser it still works; it just tells you the visual check was skipped.

To install by hand, clone the repository and link the folder into your skills directory:

bash
git clone https://github.com/piyush-rj/mimo
ln -s "$PWD/mimo/skills/mimo" ~/.claude/skills/mimo

How to use it

›/mimo a coffee mug for our contact page

Give it an idea, the more concrete the better. If you already know the object and the motion, say so and it skips straight to drawing. It runs on any agent that reads skills: Claude Code, Cursor, Codex and others.

Out comes <name>.html, one file that opens from disk and plays the figure, with a scrubber, light and dark stages, and downloads for the Lottie file and a still SVG. Next to it sits <name>.lottie.json.

How it works

  1. Step 01

    Concept

    It offers two or three concepts, one line each: the object, what happens to it, how it returns to rest. You pick one.

  2. Step 02

    Build

    It writes one small figure file against the engine. The engine and the page around it are never edited.

  3. Step 03

    Check

    A validator checks the loop closes, the figure stays in frame and nothing impure sneaks in. Then the agent reads a contact sheet of every pose, in light and dark.

  4. Step 04

    Hand over

    You get a page that plays it, a Lottie file, the beats of the loop and anything it could not check.

  5. Step 05

    Adjust

    Ask for changes while you look at it. It edits the figure and runs the checks again.

The check is the part that matters. An agent cannot watch an animation, so the skill shows it one: a contact sheet with the rest pose large, seven poses spread across the loop, every frame in order, the still at 24, 48 and 96 px, and the Lottie export played back. The agent answers eight questions about it and fixes what fails. Most figures take two to four rounds.

What it draws

Real prompts and the figures they produced. Hover one to play it.

/mimo a hero figure for a designer and developer: an idea becoming a product

A sketch slides into a little machine; gears turn, the gauge swings, a finished app window rolls out.

/mimo something for the About section

A nudge sends the needle spinning; it swings back and forth and settles on its heading.

/mimo a "let's grab a coffee" call to action

Three wisps of steam rise one after another from a warm mug.

/mimo a loading state about time

The sand runs out and the glass flips over with a squash, sand back on top.

The rules

Every figure is held to ten rules. A figure that breaks one is not finished.

  1. One idea: one object, one gesture, one return.
  2. Two colours: ink and one accent tint, plus paper to hide what is behind.
  3. The loop closes: the last pose is the first.
  4. Rest is the thumbnail: the still frame must say the idea at 48 px.
  5. Timing tells it: anticipate, act, overshoot, settle.
  6. The frame: big enough, centred, never cut off.
  7. Pure time: a pose depends on time and nothing else.
  8. A hand, not a machine: soft corners, small tilts, no perfect symmetry.
  9. Line economy: the fewest lines that still name the thing.
  10. No words inside the drawing.

The full rules, the engine's reference and the scripts are in the skill's folder on GitHub.