Use when generating a square pixel-art sprite/icon/texture for a 2D game or app from a semantic JSON grid. Authors a shape grid (<shapes_dir>/<id>.json) plus color palettes and renders them to real PNGs via the bundled scripts/render_sprites.py -- no external image model. Triggers on requests like "generate the player-idle sprite", "make a 32x32 icon for X", "render the <id> sprite", "pixel art for X", or any ask pairing a sprite id with image/texture/icon generation in a project that uses pixel-sprite.config.json.
How this skill is triggered — by the user, by Claude, or both
Slash command
/pixel-sprite-generator:pixel-sprite-generatorThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
This skill produces real square RGBA PNG sprites through a deterministic, self-contained
This skill produces real square RGBA PNG sprites through a deterministic, self-contained pipeline -- there is NO external image model and NO manual downscale/chroma-key step:
you author converter renders
<shapes_dir>/<id>.json + scripts/render_sprites.py -> <out_dir>/<output>.png
(semantic char grid) (validates, maps chars->hex, (one PNG per `outputs`
<palettes_dir>/<name>.json writes strict NxN RGBA) entry)
(char -> hex color / gradient)
You author a JSON pixel-grid by hand; the Python converter turns it into the final PNG(s).
Every output is exactly size x size (a power of two from the project config; default 16) --
the converter hard-fails on anything else.
The script is bundled with this plugin. Invoke it from the project root as:
python "${CLAUDE_PLUGIN_ROOT}/scripts/render_sprites.py" [flags]
The renderer reads pixel-sprite.config.json from the project root:
{ "size": 16, "shapes_dir": "art/shapes", "palettes_dir": "art/palettes", "out_dir": "assets/sprites" }
size must be a power of two. CLI flags (--size, --shapes-dir, --palettes-dir,
--out-dir, --config) override the file per run. If a project has no config yet, run
/pixel-sprite-generator:init to scaffold the config, directories, and a worked example.
sprite_id and which palette(s)/variants to produce. If ambiguous,
ask once.<shapes_dir>/<sprite_id>.json: a size x size grid using
semantic chars (see the char convention). Set the outputs map: one entry per output PNG,
naming the palette for each.python "${CLAUDE_PLUGIN_ROOT}/scripts/render_sprites.py" --only <sprite_id>.--check only proves it is NxN with valid chars, NOT that it
reads as the subject). Upscale and view it, e.g.:
from PIL import Image
Image.open("<out_dir>/<id>.png").resize((256, 256), Image.NEAREST).save(".tmp_preview.png")
# then Read .tmp_preview.png
Confirm it reads as the intended subject and has NO detached/floating pixels. Revise and
re-render if it does not. Delete any .tmp_* preview files when done.Do NOT hand the user a prompt to paste elsewhere. Do NOT open an image editor. The deliverable is the committed shape JSON plus the rendered PNG(s).
<shapes_dir>/<id>.json){
"id": "gem",
"size": 16,
"outputs": { "gem": "example", "gem_rare": "example_rare" },
"rows": ["................", ".......oo.......", "...14 more rows..."]
}
id MUST equal the filename stem.size MUST equal the configured size.outputs maps each output PNG basename (no extension) to a palette name. One shape can
produce several PNGs (e.g. material/rarity variants) from one grid.rows MUST be exactly size strings of exactly size chars. . is transparent.The converter hard-fails (no silent fixes) on: wrong row count/length, a char not in the
resolved palette, a size mismatch, an id that does not match the filename, a missing
palette, or an extends cycle. Run render_sprites.py --check to validate without writing.
A char names a role, not a color -- the palette supplies the color per variant, so one grid
renders to every variant. This table is a sensible default for shaded objects; adopt, extend,
or replace it for your game's needs (just define every non-. char you use in each referenced
palette).
| char | role |
|---|---|
. | transparent |
B | primary highlight |
b | primary midtone |
s | primary shadow (lower-right edge) |
o | dark outline (object border) |
g | body gradient, diagonal (light top-left -> dark bottom-right) |
v | body gradient, vertical (light top -> dark bottom) |
a | accent / inlay |
Only . may appear without being defined in the palette.
<palettes_dir>/<name>.json){ "extends": null, "colors": { "B": "#9BE7FF", "b": "#4FB8E8", "a": "#FFD27D" } }
Colors are #RRGGBB / #RRGGBBAA (or null to force transparent). extends names a base
palette whose colors are inherited then overridden -- use it so a variant that changes one
accent does not duplicate a whole palette.
A char's value may be a gradient object instead of a flat hex; the converter interpolates a smooth ramp across that char's cells:
"g": { "from": "#9BE7FF", "to": "#2A6CA6", "axis": "diag" }
axis is one of: x (left->right), y (top->bottom), diag (top-left->bottom-right),
adiag (bottom-left->top-right). from/to are #RRGGBB / #RRGGBBAA (alpha interpolates;
null is not allowed inside a gradient -- use . for transparency).from, the farthest gets to, the rest interpolate. A single-line extent
resolves to from. Reach for gradients on wide forms; keep flat B/b/s on thin 2px shapes.--check passing means the grid is valid, not that it looks like the subject. After rendering,
LOOK at the upscaled PNG and apply these:
B highlight on the top/left edge of
a form, b for the body, s on the bottom/right. Stair-step diagonals one pixel at a time; no
smooth curves.For "all the gems" / "every rarity variant", author each shape file, then render all at once:
python "${CLAUDE_PLUGIN_ROOT}/scripts/render_sprites.py" (no --only). Each shape's outputs
produces its own PNG(s).
size rows x size chars; the converter hard-fails.. char must exist in the referenced palette(s).extends for single-
accent variants).--check passes off-model art happily. Render,
upscale, and view it before reporting.Provides behavioral guidelines to reduce common LLM coding mistakes, focusing on simplicity, surgical changes, assumption surfacing, and verifiable success criteria.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub mistervitopro/game-dev-2d --plugin pixel-sprite-generator