by alexgreensh
Hand-drawn art and animation, written as code. Illustrations, loops, stickers and scored films in nine styles, identical on every render.
# Add to your Claude Code skills
git clone https://github.com/alexgreensh/anidoodleSee how anidoodle compares with popular alternatives.
anidoodle is an open-source ai agents skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by alexgreensh. Hand-drawn art and animation, written as code. Illustrations, loops, stickers and scored films in nine styles, identical on every render. It has 52 GitHub stars.
anidoodle's catalog security scan is still queued. You can run an instant dependency and prompt-injection check now with the "Scan for vulnerabilities" button above.
Clone the repository with "git clone https://github.com/alexgreensh/anidoodle" and add it to your Claude Code skills directory (see the Installation section above). anidoodle ships a SKILL.md manifest, so compatible agents can discover and load it automatically.
anidoodle is primarily written in TypeScript. It is open-source under alexgreensh on GitHub, so you can review or fork the full source.
Yes. SkillsLLM lists many other AI Agents skills you can browse and compare side by side. Open the AI Agents category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh anidoodle against similar tools.
No comments yet. Be the first to share your thoughts!
⚠️ Third-Party Software Notice
This skill is third-party open-source software developed and hosted independently on GitHub. SkillsLLM is an informational directory and does not control or maintain the underlying repository.
Any security checks, ratings, or warnings displayed by SkillsLLM are automated and limited in scope. They do not constitute a security certification or guarantee that the software is safe, error-free, or free from malicious code, vulnerabilities, compromised dependencies, or prompt-injection risks.
Review the source code, permissions, dependencies, and configuration before installing or running any third-party skill. Use is at your own risk. To the maximum extent permitted by applicable law, SkillsLLM is not liable for losses arising from third-party software.
The deep catalog scan for this skill is still queued. Run an instant dependency check now instead.
Pictures, loops and films drawn entirely in code. One pure function, renderFrame(film, ctx, frame, env), paints every frame; a second pure function writes every audio sample. A still is
that function called once. Nothing downloaded, nothing sampled, nothing random, so the source
rebuilds the same pixels on any machine, at any size, for as long as the file exists.
The engine is the easy half. Pieces get thrown away because they had no point, because the subject looked like a road-sign icon of itself, because the style was a palette swap, because the music sounded like a ghost crying, or because the client's patience went on approving fragments. This skill carries the craft that prevents each of those.
| Making | Scaffold | Workflow | Read |
|---|---|---|---|
| A still: hero art, spot, cover, social card, diagram, a series | --still <name> |
Still, below | styles.md, formats.md |
| Motion without a story: loop, sticker, animated logo, ambient header | --film <name> |
Loop, below | formats.md, styles.md |
| A film: 30 to 90 s, a transformation, a score | --film <name> |
Film, below | all of references/ |
Ask for the size, the style (or pick one from references/styles.md and say why) and where it
will live, if the request leaves them open. Everything else has a default.
references/storytelling.mdreferences/realism-and-craft.mdreferences/styles.mdreferences/working-method.md(frame, env), rng(seed) only, no clock, no
ctx.filter, no assets. Texture is geometry and seeded tiles. → references/determinism-and-contract.mdreferences/music-recipe.mdreferences/working-method.mdStill. (1) Say the idea in one sentence and name the focal subject and the light. (2) Open
real reference for anything that exists, and note which. (3) Pick the style and read its plate's
module first. (4) Draw: cast shadow, form, line, paper, in that medium's order. (5) Render with
still.mjs at full size, critique it in writing against the craft bar. ✋ One approval.
(6) Deliver at every size asked for from the same source, and say reproducible was printed.
Loop. As a still, plus: every motion is periodic over the loop (whole cycles only), the
subject never stops, something moves in every second. Check the seam (last frame against frame
0). Export GIF, WebM or APNG per references/formats.md. ✋ One approval, on the moving file.
Film.
Three approval gates at most. Approval is a budget; spend it where being wrong is expensive.
The test: would a proud human illustrator ship this, or is it mechanical shape-assembly?
| The tell | What passes |
|---|---|
| A subject built from ellipses and capsules | Hand-placed control points over real anatomy |
| One style recoloured to look like another | The mark, the edge and the order of marks all change |
| Flat colour fields | Wash, then pattern wet-on-damp, then line; one named light; cast shadows |
| Every stroke the same weight and speed | Long strokes fast, fiddly ones slow, thick-thin, tapered |
| Even scatter, one flower stamped 200 times | Hand-placed drifts with bare rests; 4-5 authored views per species |
| Gradient sky, disc sun, oval bokeh | Granulating wash, sun as paper left light, lost edges |
| Decoration | Every element has a one-line reason or it is not drawn |
| A row of style vignettes (film) | One arc. The medium changes only when the STORY changes state |
| Things fade or scale in | Marks are MADE, in the order a hand makes them |
| Both sides do the same thing at once | One side leads, by a few frames, never half a cycle |
| A hold | The camera may creep. The subject never stops |
No dead air in anything that moves: something visibly changes in every second, from frame 0. Check it with the tool AND by eye: a creeping camera changes every pixel and satisfies the tool while the eye sees a still.
engine/ is the portable art core plus the tooling. Nothing in engine/src/canvas-core knows
about React, Remotion, the DOM, or any backend; that separation is verified, not asserted.
node <skill>/engine/tools/scaffold.mjs ~/art --still hero --film intro # either or both
cd ~/art && npm install && npx playwright-core install chromium
node tools/still.mjs hero --out out/hero.png --scale 2 # a picture, with its reproducibility hash
node tools/render.mjs intro # the MP4; --out x.gif | x.webm | x.apng for loops
node tools/gate.mjs intro --mp4 out/intro.mp4 # determinism + contract + dead air
node tools/emit.mjs intro --out out/intro.html # one self-contained offline player
| Tool | What it does |
|---|---|
scaffold.mjs |
engine + a starter still and/or film (+ --example) into one working project |
still.mjs |
one frame, full size, drawn twice, with its hash; needs a browser only |
render.mjs |
MP4, GIF, WebM or APNG, then a determinism probe |
gate.mjs |
determinism, contract, dead air, any adapter; marks checks a piece has no use for as ---- |
emit.mjs |
one offline HTML file that redraws the piece, then verifies the file it wrote |
snap.mjs / deadair.mjs |
contact sheets; per-frame changed-pixel fraction |
verify-frame-adapter.mjs |
holds a page-side seek adapter to its contract |
Four backends, one art core: playwright, html-player, remotion, hyperframes. Each is
roughly 100 lines and none is visible from the core. → references/backends-and-adapters.md
engine/src/canvas-core/ (ranunculus, koi, pocketWatch,
balloon, wren, moonPhases, fox, lighthouse, mellan): one still each, the recipe in
the header. banner.ts is an ambient loop; mellanUnspool.ts a still that draws itself.example/: 1410 frames, 47 s, a clockwork butterfly that is
drawn, comes alive, and leaves its blueprint in the grass. Spec: example/butterfly-film-spec.md.
butterfly/alive/anatomy.ts is realism as code; butterfly/surface.ts is a cache key that
names everything its pixels depend on. node <skill>/engine/tools/scaffold.mjs ~/study --exampleStudy them. Do not copy them. Copying gets you somebody else's picture with your title on it, and the craft bar is not satisfied by inheritance.
You cannot hear the score and you cannot watch the film move. Every claim about either must come from a measurement or from a human. Say which. A green checkmark is a claim, not evidence, until you re-run it: on the worked film the dead-air gate passed while a second of near-stillness sat in the cut, and a cache key that was wrong in one frame order survived every eye that read the code. The machine found that one; no human was ever going to.
Each style is its own way of making a mark: the taper of a nib, the bleed of a wash, the scumble of chalk on slate, the torn edge of cut paper, the halftone of a risograph drum, one engraved line spiralling out to become a moon. The subject changes shape in each hand, the way it would for nine different illustrators. Pick one for your brand and every picture after it arrives in the same hand. Every plate above, and the contact sheet itself, is drawn by code in this repo.
| For | You get |
|---|---|
| Your website | A hero illustration, spot art for each feature, empty states and a 404, all in one hand. Transparent PNGs at any size from one source, so retina and print come free. |
| Explainers and reports | How-it-works diagrams, cutaways and animated infographics, labelled in drafted lettering. Chalkboard, blueprint and ballpoint suit the serious ones. |
| Your brand | A logo that draws itself on, a title sequence, a social card template that stays on brand for every post. |
| Social and chat | Endless loops, GIFs and transparent animated stickers, sized for the feed. |
| Decks and docs | A family of section illustrations from one program. A new seed gives a sister image in the same style. |
| Stories | Storyboards and animatics that grow into a finished short film with an original score. |
Ask in plain words, "a risograph lighthouse for our careers page, 1600×900" or "a chalkboard explainer of how our pricing tiers stack up", and anidoodle routes it to the right workflow and style recipe, asking only for what the request leaves open.
The engine is the easy half. The craft is the part anidoodle carries for you, six lessons, each one earned by getting a piece wrong first and written down so you start where the last project ended:
storytelling.mdrealism-and-craft.mdstyles.mdmusic-recipe.mddeterminism-and-contract.mdworking-method.mdEvery format ships from the same source: PNG, MP4 with its score, GIF, WebM and animated PNG with transparency, and one self-contained HTML file. → formats.md
▶ The full 47-second film, sound on. 1080×1080 with an original score, every frame and sample generated in code:
https://github.com/user-attachments/assets/019d46d3-536a-4843-9f68-8e8f5f5c3401
One pure function paints each frame, so a finished illustration is that function called once, a sticker is the same function on a loop, and a film is it with a story and a score. The same guarantees hold for all three.
A picture model spends tokens and compute on every frame of every render, and it draws something new each time. Code spends them once. The 47-second film is a single program: written one time, it renders all 1,410 frames and a full stereo score, at any size, on any machine, free every time it runs. That works out to about sixty tokens of code per frame on the first pass, and zero on every pass after. A still is a few hundred lines. A whole family of images is a list of seeds.
anidoodle is an agent skill: one folder with a SKILL.md at the top. For Claude Code, clone it into your skills folder:
git clone https://github.com/alexgreensh/anidoodle ~/.claude/skills/anidoodle
Then ask for what you want: "draw a pencil & watercolour pear for our recipes page". To drive the engine yourself:
node ~/.claude/skills/anidoodle/engine/tools/scaffold.mjs ~/art --still hero --film intro
cd ~/art && npm install && npx playwright-core install chromium
node tools/still.mjs hero --out out/hero.png --scale 2 # a finished illustration, print size
node tools/render.mjs intro --out out/intro.gif # a loop; also .mp4 with score, .webm with alpha
node tools/emit.mjs intro --out out/intro.html # the whole piece as one offline file
node tools/gate.mjs hero # determinism, contract and dead air in one pass
Node 20 or newer. Stills need only the browser above; anything that moves also uses ffmpeg.
emit writes one HTML file, around 100 KB, that plays the piece with sound on a double-click, offline. It carries the recipe and draws everything again from scratch every time you open it. Attach it to an email and you have shipped a studio.
Four backends share one art core, and the core stays blissfully unaware of which one is drawing: playwright, html-player, remotion, hyperframes.
example/ holds Mechanical Lepidoptera: 1,410 frames, 47 seconds, a clockwork butterfly that drafts itself, comes alive in watercolour, and leaves its blueprint in the grass. It is the whole engine in one piece: control points placed by hand over real anatomy, a cache key that names every input a pixel depends on, a score built from the recipe, and one unbroken move from built to alive. The nine style plates sit beside the engine in engine/src/canvas-core/, each with its recipe written at the top. Open any of them, change a number, and watch what moves.
Sound and motion earn their claims. Every statement about the score or the movement carries a measurement or a human's eye behind it, and a green checkmark counts once it has been re-run. That discipline is why the same piece comes back byte for byte, every time, on every machine.
Licensed under the Apache License 2.0. Copyright 2026 Alex Greenshpun.
Built with anidoodle, which learned everything it knows by drawing the butterfly a few honest times.