pxl skill
A pixel art skill: the agent describes the art in code, and pxl builds PNGs, sprite sheets and GIFs and shows the painting live
- 591 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- Writes files only to the `out/` directory next to the art and starts a local viewer server on 127.0.0.1:4321
- The `.px.js` art file runs in a Node virtual machine sandbox
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/pxlDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- Writes files only to the `out/` directory next to the art and starts a local viewer server on 127.0.0.1:4321
- The `.px.js` art file runs in a Node virtual machine sandbox
This is third-party code. Review the repository files before installing.
What it does
pxl is a skill and Node.js command line tool where pixel art is described in code. The agent writes a compact `.px.js` file, and `node bin/pxl.js build art.px.js` turns it into PNGs, sprite sheets with TexturePacker-style JSON and animated GIFs. There are no runtime dependencies; Node 22.18 or newer is required. The description language removes repetition. A sprite is a text grid of palette characters that mirrors, outlines itself automatically and recolors with a swap in one line. It offers rectangles, lines, circles, polygons, gradients, dithering and noise, a built-in pixel font, tilemaps and scene layers with shadows. Animation is built from frame patches over a base sprite, and lighting with relief is added when needed. SKILL.md sets the agent's loop: write the file, build the assets in question, look at the enlarged `out/_preview/<name>.png` preview with a pixel grid, patch and rebuild. For exact fixes `pxl ascii` prints an asset as palette keys with coordinate rulers. `pxl serve art.px.js` opens a browser view that rebuilds on every save and replays the painting step by step.
Who it is for. Makers of 2D games and interfaces who need sprites, tiles and icons from Claude Code or Codex, and anyone who wants to watch the agent paint.
Good fit when
- A game needs a set of sprites on a shared palette, and the agent has to hand over a PNG sheet with JSON frame data
- A character is needed in several colors: a variant is one line, `sprite("slime_red", { base: "slime", swap: { g: "r" } })`
- A scene with shadows and lamp light is built in layers, and fixes go in as patches without redrawing everything
- You need an animated GIF of a character or an object, such as a cat or a clock
- You want to see the process: `pxl serve` shows in the browser how the chosen asset is painted
Not a fit when
- You need photorealistic graphics or a raster illustration: pxl draws pixel graphics only
- A designer works in an editor with brushes and layers and fixes every pixel by hand
- The environment has no Node 22.18 or newer and cannot be upgraded
- You need 3D models: pxl makes flat images, even if lit
Example request
Draw a 16 by 16 pixel slime in the sweetie16 palette with a wobble animation, and give me a sprite sheet and a GIFLimitations
- Node 22.18 or newer is required. TypeScript sources run directly only from a clone, while an installed package runs the built `dist/`.
- The skill is written for Claude Code. For Codex, Cursor and other agents the README says only to open `SKILL.md` and give the path to `bin/pxl.js`.
- Quality depends on the model that writes the grids: the author recommends checking the preview after each edit and fixing with patches.
- The repository's last commit is from October 2026, and it has no version tags.
How to disable. Delete the `~/.claude/skills/pxl-pixel-art` folder, or `.claude/skills/pxl-pixel-art` inside a project. The tool writes nothing outside that folder and the `out/` directory next to the art file.
FAQ
How do I install pxl in Claude Code?
Clone the repository into a skills folder: `git clone https://github.com/crsolver/claude-pxl.git ~/.claude/skills/pxl-pixel-art` for all projects or into `.claude/skills/pxl-pixel-art` for one. Then ask Claude to draw a sprite and the skill loads from its description.
Can I run pxl without cloning?
Yes, `npx github:crsolver/claude-pxl build art.px.js` builds the art without a clone. The live view starts the same way, `npx github:crsolver/claude-pxl serve art.px.js`, with the address printed in the terminal and port 4321 by default.
What do I get after a build?
The `out/` directory gets one-to-one PNG sprites, a sprite sheet with JSON, GIFs for animations and enlarged grid previews in `out/_preview`. The agent reads each preview as an image and corrects the art.
Does pxl work with Codex and Cursor?
Yes, manually. The README says to point the agent at `SKILL.md` and tell it the tool runs as `node <path to pxl>/bin/pxl.js`. There is no automatic install for them.
How do I fix a single pixel without redrawing the sprite?
Print the asset with `pxl ascii art.px.js <name>`, which shows palette keys with rulers. Then add a `grid(x, y, ...)` patch and rebuild only that asset with the `--only` flag.
Discussion
No questions or reviews yet.
Related
SkillsAseprite AI Artist: pixel art through an agent
Aseprite AI Artist
A plugin and MCP server that let an agent draw and animate in your open Aseprite window, with every action undone by one Ctrl+Z
A Claude Code plugin for pixel art in Aseprite: sprites, animation, retro palettes, dithering and export for Unity, Godot and Phaser
A skill that turns your photo or description into a hand-drawn character and uses it for diagrams, knowledge cards and slides
Ten SpriteCook skills teach an agent to make pixel art and game graphics, animate sprites and export them to Godot
A skill that takes an agent from a generated picture to a game asset: sprites, video-to-frames animation and pre-release checks
A library of 244 pixel art effects written as code, plus a Claude Code skill that finds, recolors and makes new ones
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| pxl (this card) | no | 591 | |
| Agent Sprite Forge | no | 5,306 | builds sprites and maps from a text prompt in Codex, while pxl describes the art in code and builds it deterministically |
| Sprite Gen | no | 3,764 | makes sprites from one base image and removes the background, while pxl paints from scratch from a palette and grids |
README in short
The README shows a gallery of scenes and animations, then a quick start with an `art.px.js` example and the output files. It goes on to the live viewer, the four commands `build`, `serve`, `ascii` and `list`, the language features and agent setup. The last section is for pxl's own developers.
README badge
Original SKILL.md
---
name: pxl-pixel-art
description: Create pixel art (game sprites, characters, items, tiles, tilesets, icons, scenes, sprite sheets) with pxl, a compact JavaScript DSL that renders PNGs and lets the user watch the painting live in a browser. Use when asked to draw, design or iterate on pixel art or game assets.
---
# pxl: pixel art as code
You write a small `.px.js` file; pxl renders PNGs and upscaled previews you can look at. The DSL
is built to avoid writing pixels twice: mirroring, auto-outline, palette-swap variants, reusable
parts, primitives, brushes and tilemaps. Needs Node ≥ 22.18. No install step.
`PXL` below means `node <this skill's directory>/bin/pxl.js`.
## Workflow
1. Write `art.px.js` (start from the template below; examples in `examples/`).
2. Build only what you're working on: `PXL build art.px.js --only slime,heart`
3. **Look at it**: read `out/_preview/<name>.png` (upscaled, checkerboard = transparent, grid every
pixel, darker every 8). For exact pixel fixes use `PXL ascii art.px.js <name>` (keys + x/y rulers);
it's cheaper than an image.
4. Fix with small edits (a `grid(x, y, ...)` patch, one op) and rebuild. Repeat.
5. If the user wants to watch: start `PXL serve art.px.js` in the background and give them the URL.
It rebuilds on every save and replays the edited asset's painting steps; it also writes the same
`out/` files, so keep reading previews as usual.
Errors name the file:line:col, the asset/layer/op path, and suggest fixes ("did you mean 'r'?").
One broken asset doesn't stop the others from building.
## Template
```js
pal({ k: "#1b1630", g: "#8ccf63", G: "#4c8a44", t: "#2a5560", w: "#fff6e0", r: "#e2585e", R: "#a63a4c" })
ramps("ktGg", "kRr") // dark -> light, drives shade()/light()
// Symmetric: write the left half, mirror it, outline it.
sprite("slime", { mx: true, outline: "k" }, `
....ggg
..ggGGg
.ggGwGg
gggkwgg
gggkkgg
tgggggg
.tttttt`)
sprite("slime_red", { base: "slime", swap: { g: "r", G: "R" } }) // variant: 1 line
sprite("_eye", "wk\nkk") // "_" = part, not exported
sprite("chest", { w: 16, h: 12, outline: "k" },
rect(0, 3, 16, 9, "R"), rect(0, 0, 16, 4, "r"), stamp("_eye", 7, 4), shade([0, 9, 16, 3]))
scene("meadow", { w: 160, h: 96, bg: "w" },
layer("ground", { y: 64 }, rect(0, 0, 160, 32, "G"), noise(0, 0, 160, 32, "g", 0.1, 3)),
layer("props", stamp("slime", 40, 54), stamp("slime_red", 70, 54, { flip: "x" })),
layer("shadow", { shade: true }, poly([38, 64, 88, 64, 92, 67, 34, 67], "k"))) // cast shadow
sheet("chars", ["slime*", "chest"], { pad: 1 })