sprite-pipeline
Generate and normalize 2D sprite animations. Use when the user asks for full-strip generation from approved source frames, consistent anchor and scale normalization, or preview assets for browser-game animation.
- Installs
- 56
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/openai/plugins --skill sprite-pipeline- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads sprite-pipeline automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Sprite Pipeline
Overview
Use this skill for 2D sprite generation and normalization. This workflow is intentionally anchored around one approved frame and a whole-strip generation pass because frame-by-frame generation drifts too easily.
This skill is 2D-specific. If the request is for 3D characters, meshes, or materials, route back through ../game-studio/SKILL.md.
Core Workflow
- Start from an approved in-game seed frame.
- The seed frame should already reflect the right silhouette, palette, costume, and proportions.
- Build a larger transparent reference canvas around that frame.
- Use
../../scripts/build_sprite_edit_canvas.py.
- Use
- Ask for the full animation strip in one edit request.
- Do not generate each frame independently unless the user explicitly accepts lower consistency.
- Normalize the result into fixed-size game frames.
- Use
../../scripts/normalize_sprite_strip.py. - Use one shared scale across the whole strip.
- Align frames with one shared anchor, typically bottom-center.
- Use
- Optionally lock frame 01 back to the shipped seed frame.
- Do this when the animation should begin from the exact idle or base pose already in game.
- Render a preview sheet and inspect the animation in-engine before approving it.
- Use
../../scripts/render_sprite_preview_sheet.py.
- Use
Prompting Rules
Always preserve these invariants in the prompt:
- same character
- same facing direction
- same palette family
- same silhouette family
- same readable face or key features
- same outfit proportions
- transparent background
- exact frame count and slot layout
Always ask for:
- one strip at once
- a transparent canvas
- no scenery, labels, or poster composition
- crisp pixel-art clusters for pixel work
- production asset tone, not concept art
Using Image Generation
For live asset generation or edits, use the installed imagegen skill in this workspace. This skill defines the game-specific process; imagegen handles the API-backed generation or edit execution.
Script Recipes
Create a reference canvas:
python3 scripts/build_sprite_edit_canvas.py \
--seed output/sprites/idle-01.png \
--out output/sprites/hurt-edit-canvas.png \
--frames 4 \
--slot-size 256 \
--canvas-size 1024
Normalize a raw strip:
python3 scripts/normalize_sprite_strip.py \
--input output/sprites/hurt-raw.png \
--out-dir output/sprites/hurt \
--frames 4 \
--frame-size 64 \
--anchor output/sprites/idle-01.png \
--lock-frame1
Render a preview sheet:
python3 scripts/render_sprite_preview_sheet.py \
--frames-dir output/sprites/hurt \
--out output/sprites/hurt-preview.png \
--columns 4
Quality Gates
- proportions stay stable across frames
- frame-to-frame size does not drift
- action reads clearly at game scale
- transparency is preserved
- frame 01 matches the shipped sprite when lockback is enabled
- preview looks correct before any in-engine asset index update
References
- Detailed workflow:
../../references/sprite-pipeline.md - Shared frontend context:
../game-ui-frontend/SKILL.md
FAQ
What does the sprite-pipeline skill do?
Generate and normalize 2D sprite animations. Use when the user asks for full-strip generation from approved source frames, consistent anchor and scale normalization, or preview assets for browser-game animation.
How do I install sprite-pipeline?
Run npx skills add https://github.com/openai/plugins --skill sprite-pipeline in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/sprite-pipeline/ (personal) or .claude/skills/sprite-pipeline/ (project).
Which AI agents can use sprite-pipeline?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is sprite-pipeline safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains sprite-pipeline?
It is published by openai in openai/plugins, and it is an official skill from the maker of the technology it covers. It has 56 recorded installs.
More from openai/plugins
ios-memgraph-leaks
openai/plugins
Capture and inspect iOS leaks and memgraphs. Use when debugging leaked objects, retain cycles, memory growth, or before/after leak evidence.
android-emulator-qa
openai/plugins
Use when validating Android feature flows in an emulator with adb-driven launch, input, UI-tree inspection, screenshots, and logcat capture.
plugin-creator
openai/plugins
Create and scaffold plugin directories for Codex with a required .codex-plugin/plugin.json, optional plugin folders/files, and baseline placeholders you can edit before publishing or testing. Use when Codex needs to create a new personal plugin, add optional plugin structure, or generate or update personal or repo-root .agents/plugins/marketplace.json entries for plugin ordering and availability metadata.
frontend-app-builder
openai/plugins
Use for new frontend applications, dashboards, games, creative websites, hero sections, and visually driven UI from scratch, or when the user explicitly asks for a redesign/restyle/modernization. Builds from clean, airy, high-taste, readable image-generated concept design with section-specific references, faithful implementation, and browser testing.
frontend-testing-debugging
openai/plugins
Use when testing, debugging, or making targeted improvements to rendered frontend apps through the Build Web Apps or web dev plugin: local dev servers, UI regressions, interaction bugs, console errors, responsive layout, and visual QA. Check whether the Browser plugin is available and use it first when it is; otherwise use regular Playwright with the recorded reason.
swiftui-liquid-glass
openai/plugins
Implement and review iOS 26+ SwiftUI Liquid Glass UI. Use when adopting Liquid Glass or checking its correctness, performance, and design fit.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.