SkillFoxx

Codixel skill

Claude Code skill for pixel art: sprites, animations and effects built from a reference and checked frame by frame

  • 167 ★ on the repository
  • Last commit
  • MIT
Skill

Minimal access

Why this level

  • The skill holds instructions for the agent and runs nothing itself.
All reasons and checks

mankidev/codixelAuthor:mankidev

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add skills/codixel

Detects the agents on your machine, shows the access level and pins the version.

Other ways to install

Access and checks

How we review

Minimal accessThe tool runs nothing and makes no network calls.

  • The skill holds instructions for the agent and runs nothing itself.

This is third-party code. Review the repository files before installing.

What it does

Codixel teaches Claude Code to make pixel art for games: character sprites, animations and effects such as fire, smoke and beams. The starting idea is simple: the agent writes code and cannot draw from scratch, so work starts from a real reference. The skill sets the order of steps. First find real pictures of the object, then the agent assembles an image from them in code and asks for bones so parts can move. After that it converts the result to pixels in a stated style, for example realistic, reviews animation frames one by one and places the sprite in the scene next to everything else. Separate techniques cover dithering, hue shifting in a palette and outlines with rim light.

Who it is for. Indie game developers and artists who build 2D sprites with Claude Code and want predictable results.

Good fit when

  • An animated creature sprite with bones and a spine-driven walk is needed.
  • A pixel fire or smoke effect should look alive next to the rest of the scene.
  • A sky or ball gradient should use bands with dithering only where colors meet.
  • A palette is built with hue shifting and an outline taken from the sprite's own colors.

Not a fit when

  • You need vector or photorealistic artwork.
  • You need finished sound design: the skill advises finding sounds online rather than generating them.
  • The task is a single static icon without animation.

Example request

Make an animated gold dragon sprite from this reference and show the frames one by one.

Limitations

The skill supplies a workflow and techniques, but the agent writes the pixelation and animation code itself. Results depend on reference quality: the author advises using your own images or ones whose license allows it. The README makes clear that every step should be checked by eye, and a bare «do this» command without review gives a weak result. The skill does not create sounds and sends you to find them online. There is no installer; the skill is connected by copying it into the Claude Code skills folder.

How to disable. Delete the `~/.claude/skills/codixel` folder. The sprites and scripts it produced stay in your project.

FAQ

How do I install Codixel?

Run `git clone https://github.com/mankidev/codixel ~/.claude/skills/codixel`. Claude Code loads the skill on its next start.

Why is a reference needed?

Claude Code writes code and cannot paint from scratch. A real picture gives it a shape that it turns into pixels and moves.

What does the skill say about dithering?

Use dithering only where two color bands meet. Dither everywhere looks grainy and a smooth gradient looks like a blurry photo.

Can the skill make sounds?

No. The author advises finding sounds online because AI-made sounds are easy to spot.

Which animations does it suit?

The examples include a dragon, a god figure and a leopard whose body and legs are built on a spine and move like the real animal.

Discussion

No questions or reviews yet.

Skills

A library of 244 pixel art effects written as code, plus a Claude Code skill that finds, recolors and makes new ones

SkillExtended access7.1K

A Claude Code skill for hand-painted animation and lyric videos: frames drawn in code with p5.js, no image models

PluginExtended access223

A Claude Code skill for code-made video: it splits a clip into scenes and picks an engine for each, from Paper.js to Manim.

SkillExtended access115

Codex skill for Pikatang-inspired pixel art: characters, pets, houses, interiors and icons from a brief or a reference.

SkillExtended access95

A skill with 341 ready styles that Claude Code and Codex pick by code to turn an idea into code-driven animation and video

SkillExtended access1K

A skill that makes Claude a pixel artist: every pixel is placed in Pillow code and every render is checked against a checklist.

SkillExtended access113

README in short

The repository explains an AI pixel art workflow: reference, bones, pixelation, frame review. Examples show how output with the skill differs from output without it.

README badge

Original SKILL.md

---
name: codixel
description: Changes how pixel art is made with AI. Instead of drawing from imagination, ask the user for a reference image, pixelate it, rig it, animate it, and check every step with the user. Use whenever the user asks for pixel art of any kind (sprites, characters, creatures, effects, scenes, props, tiles, gems).
license: MIT
---

# Codixel

You are not a painter. You write code. When you draw something complex from imagination (a dragon, an angel, a character, an animal), the result looks bad. When you start from a real image and turn it into pixels, the result looks good. This skill makes you work the second way and keeps the user in control of every step.

## Showing an image

The terminal cannot show pictures. Every time this skill says "show", do this:

1. Save the result as a PNG with `P.save` (and a GIF with `P.gif` when it moves) in the user's project, or in a folder the user named.
2. Open the PNG yourself with the Read tool and look at it.
3. Give the user the full path of each file.

Read shows only the first frame of a GIF, so check motion on a numbered frame sheet, not on the GIF.

Keep one preview image per piece of work. Put everything you want to show (frames, the last frame next to the first, the reference) on one sheet with `P.sheet`, not in separate files, and save each new version over the same file. The same goes for the GIF.

## Use the core, do not start from scratch

This skill comes with `core/pixel.js`, next to this file. Use it instead of writing image code or effects yourself. In Node: `const P = require("<skill folder>/core/pixel.js")`. In a browser, load it with a script tag and use the global `P`; draw a buffer on a canvas with `P.blit(buf, ctx, x, y)`. Loading and saving files only works in Node; in a browser `P.gif` returns a `Uint8Array`.

**Buffers.** `new P.Buf(w, h)` holds the pixels. `ox`, `oy` set the world offset: every drawing method takes world coordinates, so with `b.ox = -120; b.oy = -120` the point (0, 0) is 120 pixels in from the left and top. Methods: `pset`, `get`, `rect`, `line`, `poly`, `blob` (soft dithered circle), `ring`, `sprite`, `field(fn, palette)` (one value per pixel turned into a palette color with dither), `dither`, `scaled(n)`, `clear`.

**Images.** These work on whole buffers and return a new one:

- `P.load(file)` reads a PNG, `P.save(buf, file)` writes one. Other formats, and interlaced PNGs, must be converted to a plain PNG first with any tool you have (ImageMagick, ffmpeg, Python PIL).
- `P.removeBg(buf, { tol, color, seeds, flood, erode })` removes a plain background. It finds the background color from the image edges and fills inward from them. `tol` (default 48) is how far a color may be from the background and still count as background. `flood: false` also removes background color inside the subject (holes between legs). Soft edges leave a light or dark ring around the subject; `erode: 1` or `2` cuts that many pixels off the outer edge (also `P.erode(buf, n)`).
- `P.trim(buf, pad)`, `P.crop(buf, x, y, w, h)`, `P.bounds(buf)`.
- `P.resize(buf, w, h, { mode })` averages the pixels. Leave out `h` to keep the shape (`P.resize(buf, w, { mode: true })` works

Report a problem