home / skills / dkyazzentwatwa / chatgpt-skills / sprite-sheet-generator

sprite-sheet-generator skill

safe

This skill generates optimized sprite sheets from multiple images, supports grid layouts, smart packing, and automatic CSS sprite maps.

npx playbooks add skill dkyazzentwatwa/chatgpt-skills --skill sprite-sheet-generator

Review the files below or copy the command above to add this skill to your agents.

Files (3)

SKILL.md

1019 B

---
name: sprite-sheet-generator
description: Combine multiple images into sprite sheets with customizable grid layouts and generate CSS sprite maps for web development.
---

# Sprite Sheet Generator

Combine multiple images into optimized sprite sheets with CSS generation.

## Features

- **Grid Layouts**: Auto or custom grid arrangements
- **Smart Packing**: Optimize sprite placement
- **CSS Generation**: Auto-generate sprite CSS classes
- **Transparent Backgrounds**: Preserve alpha channels
- **Padding/Margins**: Control spacing between sprites
- **Batch Processing**: Process multiple sprite sets

## Quick Start

```python
from sprite_sheet_generator import SpriteSheetGenerator

gen = SpriteSheetGenerator()
gen.add_images_from_dir('icons/')
gen.generate(output='sprites.png', grid=(4, 4))
gen.generate_css('sprites.css', class_prefix='icon')
```

## CLI Usage

```bash
python sprite_sheet_generator.py --input icons/ --output sprites.png --grid 4x4 --css sprites.css
```

## Dependencies

- pillow>=10.0.0

Overview

This skill combines multiple images into optimized sprite sheets and produces ready-to-use CSS sprite maps for web projects. It supports auto or custom grid layouts, smart packing, transparent backgrounds, padding control, and batch processing. The tool is implemented in Python and integrates easily into build scripts or CLIs for asset pipeline automation.

How this skill works

You feed the generator a directory or list of image files; it arranges them into a single sprite sheet using either a fixed grid or a packing algorithm to minimize wasted space. The generator preserves alpha channels, applies optional padding/margins, and outputs a PNG sprite sheet. It can also emit CSS classes (with a configurable class prefix) that map each sprite to its background-position and size.

When to use it

When you need to reduce HTTP requests by combining many small icons or images into one file.
When building a sprite-based UI component library for web projects.
When automating asset generation in a frontend build or CI pipeline.
When you want predictable, grid-aligned sprite sheets for animation frames.
When you need CSS-ready output to integrate quickly with existing stylesheets.

Best practices

Group related images into one input directory per sprite sheet to keep CSS names consistent.
Choose a grid layout for evenly sized frames (e.g., CSS sprites for spritesheets or animations).
Use smart packing for varied-size images to reduce sheet dimensions and file size.
Add consistent padding to avoid texture bleeding when using scaling or transforms.
Commit generated CSS and sprite assets to your build artifacts or CI output, not to source images.

Example use cases

Combine dozens of UI icons into a single sprites.png and generate .icon-<name> CSS classes for a web app.
Create an animation sprite sheet from frame images arranged in a 4x4 grid for canvas or CSS keyframe animation.
Batch-process multiple theme folders to produce separate sprite sheets and CSS files for each theme.
Integrate into a build script to regenerate sprites and CSS whenever the icon set changes.
Use smart packing to shrink the total asset size for mobile web performance improvements.

FAQ

What image formats are supported?

Input images should be standard raster formats supported by Pillow (PNG, JPEG, GIF). Transparent PNGs are preserved.

Can I control spacing between sprites?

Yes — padding and margin options let you add spacing to avoid bleeding and support scaled rendering.