A skill for Claude Code
One sentence in. A looping 16-bit sprite out.
Describe a character and what it does, like “knight, sword slash, castle at dusk”. pixel-anims has Claude build it as a single HTML file: palette-locked, integer-scaled, running on a 60 Hz fixed step, and checked frame by frame before you see it.
/plugin marketplace add dris1153/pixel-animsthen /plugin install pixel-anims@pixel-anims
What it does
Ask Claude for a character doing something. You get one HTML file that plays it as a polished loop.
One file, nothing else
Vanilla JS and Canvas 2D. No assets, libraries or network requests. Open it anywhere or drop it into an iframe.
Real 16-bit rules
An indexed framebuffer, a fixed palette of about 24 colors and integer scaling. Poses are sampled at 10 fps over a 60 Hz fixed step, so motion reads as hand-animated, and nothing is allocated in the loop.
Any character, any action
An idle → build-up → strike → recover state machine with anticipation frames, springs for cloth and hair, pooled particles, rim light and a 1–2 px screen shake.
Claude checks its own work
It renders chosen ticks to PNG, reads them and fixes what it sees. The engine rejects broken setups and verifies that the loop seam is pixel-exact.
Install
- Add the marketplace inside Claude Code
/plugin marketplace add dris1153/pixel-anims - Install the plugin
/plugin install pixel-anims@pixel-anims
Invoke it with /pixel-anims:pixel-anims, or just describe the animation you want.
- Run in your project, or add
-gto install for every projectnpx skills add dris1153/pixel-anims
Invoke it with /pixel-anims, or just describe the animation you want.
- Clone the repo
git clone https://github.com/dris1153/pixel-anims - Copy the skill into your skills folder
mkdir -p ~/.claude/skills && cp -r pixel-anims/skills/pixel-anims ~/.claude/skills/ - Windows PowerShell: link it instead, so
git pullupdates itNew-Item -ItemType Directory -Force "$env:USERPROFILE\.claude\skills" | Out-Null; New-Item -ItemType Junction -Path "$env:USERPROFILE\.claude\skills\pixel-anims" -Target (Resolve-Path pixel-anims\skills\pixel-anims)
The QA step needs Node 18+ and Chrome, Edge or Chromium.
Use it
Write a brief
Name the character, the beats of its action and the scene. Resolution is optional: 128×96 by default, 160×90 for wide action.
Pixel art fox mage: idle tail swish, channel a green orb, fire it at a scarecrow, recover. Autumn field at sunset.
Pixel art robot: idle hum, charge the arm cannon, blast with recoil and smoke, cool down. Neon alley in the rain, 160×90.
Pixel art archer: idle, draw the bow, release an arrow across the screen, recover. Misty forest at dawn.
What you get
- A single
.htmlfile in your working directory. - A short design note: palette ramps, states and timings, the key event and its effects.
- QA snapshots of every state in
snapshots/next to the file.
Iterate
Keep talking to Claude: “make the slash snappier”, “switch to 160×90 and add rain”, “give the cape more follow-through”.
Where it fits
- Game prototypesPut a hero and an attack loop on screen in minutes, and feel the game juice before you commit to final art.
- Loading and 404 screensOne file to embed in an iframe, with nothing to bundle.
- Landing and portfolio heroesCrisp at any size thanks to integer scaling, and only about 30 KB.
- Stream overlays and postsLoops seamlessly, so it can run all night or be recorded into a clip.
- Sprite concepting and teachingA readable engine with springs, particles and palette ramps to study and remix.
Showcase
Every piece is a live, unedited HTML file. All but the engine reference were made by the skill. Open one to see the exact brief behind it.
How it works
- Design notePalette ramps, states with tick timings, pose params, the key event and its effects.
- Scaffold
new-scene.mjscopies the engine and empties every scene region. - Write the sceneBackdrop, actor, poses and particles. The engine owns the loop, scaling, outline and rim light.
- Snapshot QA
snapshot.mjsrenders chosen ticks to PNG, and Claude fixes what it sees, for up to 3 rounds. Exit codes flag page errors, loop-seam breaks and edited engine code. - DeliverThe file, its states and timings, and the ticks that were checked.