luisfer-cli/pixel-art-pix-skill

Pixel Art with pix

Use this skill when the user asks for pixel art, sprites, icons, logos, game assets, animation frames, spritesheets, GIFs, or .pix files.

Non-negotiable principles

• Prefer readability over detail.
• Work at native resolution; never design high-resolution art and mentally shrink it.
• Use hard edges, integer coordinates, and no antialiasing.
• Use a limited palette with explicit outline, shadow, base, highlight, and accent roles.
• Build intentional color clusters instead of scattered pixels.
• Keep one consistent light direction across the asset and all animation frames.
• Do not claim completion after syntax validation alone. Render and visually inspect the result.

Anti-noise rule

Do not add floating stars, sparkles, dust, particles, corner accents, or isolated decorative pixels unless the user explicitly requests them.

For logos, icons, UI assets, and transparent-background sprites:

• default to zero disconnected decorative components;
• keep a clean safety margin around the subject;
• prefer one compact primary silhouette;
• do not use empty canvas space as an invitation to add decoration;
• do not add a group named sparkles, stars, dust, particles, or similar unless it is requested or essential to the subject.

Every visible cluster must serve at least one clear purpose:

1. silhouette or structure;
2. form, lighting, or material;
3. an identifying feature;
4. requested environmental decoration.

If a cluster cannot be justified in one short sentence, remove it. Single pixels are acceptable only when they are functional, such as a pupil, a specular highlight, the end of a diagonal, or a necessary facial feature.

Required workflow

1. Clarify the brief. Establish canvas size, subject, asset type, style, palette constraints, background, and exports. If decoration was not requested, assume none.
2. Set acceptance criteria. Choose the relevant rules from Asset-specific criteria.
3. Plan before drawing. Define the silhouette, major shapes, palette roles, light direction, focal point, and animation key poses.
4. Create or edit the .pix source. Name groups by semantic function. Keep optional atmosphere separate from the subject.
5. Validate the source. Run pix check.
6. Render at native scale. Native output is the authoritative visual check.
7. Render an enlarged preview. Use nearest-neighbor integer scaling, normally --scale 8.
8. Inspect visually. Check both native and enlarged renders against transparent, light, and dark backgrounds when the asset may appear on varied surfaces.
9. Run the cleanup pass. Classify every disconnected component and suspicious tiny color cluster. Delete anything unintentional.
10. Audit when possible. Run scripts/audit_png.py on the native PNG. Treat warnings as review prompts, not automatic proof of an error.
11. Revise and render again. Complete at least one deliberate cleanup iteration before finalizing new artwork.
12. Export final deliverables. Generate requested PNGs, animation frames, GIFs, spritesheets, and metadata.

Core commands

Validate and render:

pix check asset.pix
pix render asset.pix -o asset-1x.png
pix render asset.pix -o asset-8x.png --scale 8

Render a named frame:

pix render asset.pix --frame frame-name -o frame-1x.png
pix render asset.pix --frame frame-name -o frame-8x.png --scale 8

Audit a native PNG from the skill repository root:

python3 skills/pixel-art-pix/scripts/audit_png.py asset-1x.png

Export animation deliverables:

pix anim asset.pix -a animation-name --out-dir frames/
pix sheet asset.pix -a animation-name -o sheet.png --json sheet.json
pix gif asset.pix -a animation-name -o animation.gif

Asset-specific criteria

Logos and icons

• Use one dominant silhouette and strong negative space.
• Default to zero floating components and zero ambient particles.
• Avoid one-pixel corner accents unless they clarify the mark at 1x.
• Test on transparent, light, and dark backgrounds.
• Confirm recognition at native size and at the intended UI display size.

Character and object sprites

• The black-filled silhouette must remain recognizable.
• Eyes, weapons, limbs, and other identifiers must read at 1x.
• Avoid texture that competes with the focal feature.
• Keep contact shadows attached to or clearly aligned with the subject unless a detached shadow is intentional.

Scenes and backgrounds

• Establish foreground, midground, and background hierarchy.
• Ambient particles are allowed only when they support setting, depth, or motion.
• Use repeated texture patterns intentionally; avoid uniform random speckling.

Animation

• Use distinct key poses rather than tiny arbitrary pixel changes.
• Keep palette, lighting, and volumes consistent across frames.
• Check the loop transition and inspect every frame individually.
• Ensure decorative particles do not flicker accidentally between frames.

Mandatory cleanup checklist

Do not mark the work complete until every answer is satisfactory:

• Is the subject recognizable at 1x?
• Does the silhouette communicate the subject without interior detail?
• Does every disconnected component have an explicit purpose?
• Are all single-pixel marks functional rather than filler?
• Were unrequested sparkles, stars, dust, and corner accents omitted?
• Are highlights grouped and aligned with one light source?
• Are shadows and contact points intentional?
• Is the palette limited and role-based?
• Does the asset have clean margins without accidental clipping?
• Was it inspected at 1x and enlarged scale?
• Was it checked on appropriate background colors?
• Was at least one cleanup revision completed after the first render?
• For animation, are key poses readable and loops clean?
• For spritesheets, are frames ordered and named clearly?

Visual review report

When reporting completion, briefly state:

• native canvas size;
• exports generated;
• visual checks performed;
• whether detached components or tiny color clusters remain and why;
• any intentionally requested decoration.

Do not describe pix check as visual validation. It validates the source, while rendering and inspection validate the artwork.

References

Read when deeper guidance is useful:

• Pixel art concepts
• Visual QA and anti-noise
• pix DSL reference

Example assets

• Clean animated slime
• Noisy badge anti-pattern
• Clean badge correction