animated-spritesheet-pipeline

Normalize character frames and pack them into fixed-cell animated spritesheets.

Updated Jun 4, 2026
One-click install
npx skills add https://github.com/AhmedAbdelmoaty/frame-craft-35 --skill animated-spritesheet-pipeline
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: animated-spritesheet-pipeline
Source: https://github.com/AhmedAbdelmoaty/frame-craft-35/tree/main/.codex/skills/animated-spritesheet-pipeline
Command: npx skills add https://github.com/AhmedAbdelmoaty/frame-craft-35 --skill animated-spritesheet-pipeline

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps create, repair, and validate animated 2D spritesheets so character motion looks consistent and works correctly in-browser.

Core Features & Use Cases

  • Frame cleanup and recovery: Fix damaged, inconsistent, or partially missing animation frames.
  • Normalization for game use: Align canvas size, pivots, body position, and transparency across every frame.
  • Spritesheet QA: Catch issues like drift, cropping, bleeding, and incorrect slicing before the asset is used in-game.
  • Use case: Prepare an idle, walk, talk, or success animation from candidate frames and package it into a stable fixed-cell spritesheet.

Quick Start

Use the animated spritesheet pipeline to clean this character animation, normalize the frames, pack them into a fixed-cell spritesheet, and report the preview status.

Frequently Asked Questions about animated-spritesheet-pipeline

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix inconsistent or partially missing animation frames for a spritesheet?

Fix damaged animation frames by applying frame cleanup and recovery to repair partially missing or inconsistent character art before packing them into a stable spritesheet. This ensures reliable in-browser slicing and consistent motion.

What causes spritesheet drift and cropping issues in browser games?

Spritesheet drift and cropping issues occur when canvas size, pivots, and body positions lack normalization across frames. Running spritesheet QA catches these slicing and bleeding errors before in-game use, ensuring stable fixed-cell alignment.

Can I normalize canvas size and transparency across character frames automatically?

Normalize canvas size, transparency, and body positions across character frames during the asset pipeline. This normalization aligns every frame's pivot point to ensure the animation plays consistently when sliced in-browser.

How to pack character animation frames into a fixed-cell spritesheet for browser games?

Pack character frames into a fixed-cell spritesheet by curating the frames, normalizing the canvas and pivots, and validating the preview to ensure reliable in-game slicing. This handles idle, walk, talk, and other non-combat animations.

Does this spritesheet pipeline support combat animations like attacks or hits?

This spritesheet pipeline does not support combat animations. It is designed for non-combat animation tasks including idle, walk, talk, thinking, pointing, interacting, success, and failure sequences for browser-game character art.

What is the best way to validate spritesheet slicing before using it in-game?

Validate spritesheet slicing by running preview validation after packing frames into fixed cells. This QA step catches drift, cropping, and bleeding issues early, ensuring the character asset is reliable for browser-game use.