animated-sprite-generation — Claude Code skill for sprite animation
Guides you through building looping frame strips for isometric game objects. Use it for water, fire, smoke, windmills, or flags.
npx skills add 0xheycat/isometric-game-skills --skill animated-sprite-generation -a claude-codeWhat animated-sprite-generation does
The skill lays out a frame-based workflow: hold the seed steady, vary the motion from frame to frame, and keep lighting and silhouette consistent. Assemble the images into a horizontal sprite sheet, then check the transition from the final frame back to the first. The documented command is convert frame_*.png +append spritesheet.png.
For ambient motion, the guide recommends low-FPS playback. It warns against animating ground tiles because animating every tile hurts performance; animate overlay objects instead. That constraint affects which parts of a scene should become sprites.
What it helps with
- assemble animation frames into a horizontal sprite sheet
- make water motion loop without a visible jump
- animate fire, smoke, a windmill, or a flag
- keep lighting and silhouette consistent across frames
Example prompts for the agent
- Create a looping water animation for my isometric game and explain how to assemble its frames into a sprite sheet.
- Prepare flag animation frames; vary the motion while keeping the silhouette and lighting unchanged.
- Check whether the last and first frames of this fire animation transition smoothly.
How to install animated-sprite-generation
1Skills CLI (Vercel)
npx skills add 0xheycat/isometric-game-skills --skill animated-sprite-generation -a claude-code2Manually: put the files in place
~/.claude/skills/animated-sprite-generation/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/animated-sprite-generation/
1Skills CLI (Vercel)
npx skills add 0xheycat/isometric-game-skills --skill animated-sprite-generation -a codex2Manually: put the files in place
.agents/skills/animated-sprite-generation/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add 0xheycat/isometric-game-skills --skill animated-sprite-generation -a cursor2Manually: put the files in place
.cursor/skills/animated-sprite-generation/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install 0xheycat/isometric-game-skills animated-sprite-generation2Manually: put the files in place
.github/skills/animated-sprite-generation/SKILL.md1Skills CLI (Vercel)
npx skills add 0xheycat/isometric-game-skills --skill animated-sprite-generation -a gemini-cli2Platform CLI
gemini skills install https://github.com/0xheycat/isometric-game-skills --path skills/animated-sprite-generationManually: put the files in place
.devin/skills/animated-sprite-generation/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add 0xheycat/isometric-game-skills --skill animated-sprite-generation -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about animated-sprite-generation
How do I install animated-sprite-generation in Claude Code?
Run npx skills add 0xheycat/isometric-game-skills --skill animated-sprite-generation -a claude-code. The skill file is at ~/.claude/skills/animated-sprite-generation/SKILL.md.
What does animated-sprite-generation do?
It guides the creation of looping frame animations for isometric game objects and the assembly of those frames into a horizontal sprite sheet.
Should I animate ground tiles with this skill?
No. It recommends animating objects placed over the ground, since animating every ground tile hurts performance.
Source text
SKILL.md · MIT
--- name: animated-sprite-generation description: Use when creating looping animated isometric sprites (water, fire, windmills, flags) as frame strips that play back smoothly in-engine. license: MIT --- # Animated Sprite Generation  ## Overview Animation in 2D isometric games is frame-based, not skeletal. This skill produces short, seamless LOOPS as frame strips. Do NOT animate ground tiles - animate objects on top of them, or performance and visual noise explode. ## When to Use - You need animated water, fire, smoke, windmills, or flags. - You want idle/ambient motion without a 3D engine. - A sprite must loop seamlessly without a visible jump. ## Process 1. Decide frame count for a clean loop (4-8 frames is plenty for ambient motion). 2. Generate frames with a FIXED seed, varying only the motion phrase per frame (e.g. wave phase, blade angle). 3. Keep the silhouette and lighting identical - only the moving part changes. 4. Assemble frames into a horizontal strip / sprite sheet. 5. Confirm frame 1 and frame N loop seamlessly (last frame flows into first). 6. Play back in-engine at a low FPS (6-12) for ambient motion. 7. NEVER animate full ground tiles - animate overlay objects only. ```bash # assemble frames into a horizontal strip convert frame_*.png +append spritesheet.png ``` ## Rationalizations (Stop Lying to Yourself) | Excuse | Reality | |---|---| | "More frames = smoother = better" | More frames = more VRAM and bigger atlas for zero visible gain on ambient loops. | | "I will animate the water tiles directly" | Animating every ground tile tanks performance. Use an overlay object. | ## Red Flags - STOP if you catch yourself: - Animating ground tiles instead of overlay objects. - Loop visibly jumps between last and first frame. - Silhouette or light changes between frames. ## Verification You are NOT done until every box is checked: - [ ] The loop is seamless (last frame flows into first). - [ ] Only the intended part moves; silhouette/light stay fixed. - [ ] Ground tiles are NOT animated; only overlay objects are.
© 0xheycat · MIT · 0xheycat/isometric-game-skills