#266 by GitHub stars

patch-gg/pixelfx

Make pixel art effects and sprite animations in code with the pixelfx library, which has 244 ready-made ones, acted out by a character who winds up, freezes on contact and recovers (fire, explosions, water, ice, lightning, sci-fi, melee, impacts, projectiles, spawn and death, arcane, holy, shadow, s

History

Review weekly changes to SKILL.md before updating. Dates mark the weeks in which we observed each version; checks apply to the recorded commits.

View weekly changes

skills/pixelfx/SKILL.md

Week of Nov 2, 2026 · +23 / −3 lines

Before Local scripts → After Local scripts

fe7103c36d94 → a84159688af3

- 3 description: Make pixel art effects and sprite animations in code with the pixelfx library, which has 232 ready-made ones (fire, explosions, water, ice, lightning, sci-fi, melee, impacts, projectiles, spawn and death, arcane, holy, shadow, status, nature, weather, UI, pickups, transitions, critters) to drop into a game, recolor, export as sprite sheets or remix, plus a draft, render, look, refine loop that makes new ones look hand-animated. Use when someone wants pixel art VFX, sprite animations or sprite sheets, game juice, a specific effect ("a frost nova for my mage", "a coin pickup sparkle"), wants to use or export a pixelfx effect in Godot, Unity, Phaser or a canvas game, or wants their pixel effects to look better.
+ 3 description: Make pixel art effects and sprite animations in code with the pixelfx library, which has 244 ready-made ones, acted out by a character who winds up, freezes on contact and recovers (fire, explosions, water, ice, lightning, sci-fi, melee, impacts, projectiles, spawn and death, arcane, holy, shadow, status, nature, weather, UI, pickups, transitions, critters) to drop into a game, recolor, export as sprite sheets or remix, plus a draft, render, look, refine loop that makes new ones look hand-animated. Use when someone wants pixel art VFX, sprite animations or sprite sheets, game juice, a specific effect ("a frost nova for my mage", "a coin pickup sparkle"), wants to use or export a pixelfx effect in Godot, Unity, Phaser or a canvas game, or wants their pixel effects to look better.
+ 76 **A hit needs a body behind it.** An effect alone looks like a sticker. Effects with a character carry an `act`: when the body winds
+ 77 up, when to freeze, how the target reacts. Use it whichever way the game is built:
+ 78 
+ 79 - With the stock character: `createAct(slash, { x, y })` instead of `createFx`. `act.update(dt)`, `act.draw(frame)`, and throw the
+ 80   picture by `act.shake`. It holds still by itself during a freeze. `node tools/act.mjs <id> --sheet` bakes the lot into a sprite sheet.
+ 81 - With the game's own character: read the timing, `slash.act` or `meta.pixelfx.act` in a sheet's JSON (`windup`, `recovery`, `hits`
+ 82   with `t` and `freeze`). Play the character's attack animation `windup` seconds before the effect, and at each hit stop updating
+ 83   everything, effect and characters both, for `freeze` seconds. Host-side hit-stop works on any effect, with or without an act.
+ 84 
+ 85 `src/fx/moves/` has whole attacks chained from the effects, wind-up to recovery: start there when someone asks for a move, not an effect.
+ 86 
- 97 5. **Check.** `node tools/check.mjs <id>` catches drawing outside the canvas, one-shots that don't end empty,
- 98    loop seams, unseeded randomness and slow frames. Fix until it passes clean. Delete the drafts you didn't keep.
+ 108 5. **Act it out** if a character is involved: add `export const act` (see "Acts" in `docs/AUTHORING.md`), with a wind-up before t = 0,
+ 109    a pose change on the release frame, a freeze on contact and a recovery. `node tools/act.mjs <id>` shows consecutive 12 fps steps:
+ 110    judge motion from those and from `--mp4`, not from a contact sheet's samples.
+ 111 6. **Check.** `node tools/check.mjs <id>` catches drawing outside the canvas, one-shots that don't end empty,
+ 112    loop seams, unseeded randomness and slow frames, and in an act: keys out of order, unknown pose fields and hands
+ 113    that teleport. Fix until it passes clean. Delete the drafts you didn't keep.
+ 129 | a great effect on a dead character | give it an act: wind-up, release pose, freeze on contact, a target that reacts, recovery |
+ 130 | the act feels weightless | a wind-up the opposite way to the blow, a longer freeze (up to 0.2 s), a bigger silhouette change, shake |
+ 131 | the hit lands out of sync | move the hit key to the effect's own constant, not to a time you eyeballed |
+ 132 | he holds the weapon badly | keep a bend in the elbow, shafts in front of the chest; on a swing the blade lags the hand; arms reach about 15 px and don't stretch, so step the body in |
+ 133 | his arms cross or the pose looks flat | he faces three-quarters towards us: for open arms the near hand goes left (`fx < 0`), far hand right, with `turn: 1`; `yaw` really turns him |

Compare on GitHub

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Local scripts

First observation → fe7103c36d94

No earlier version was observed for comparison.

Compare on GitHub

View on GitHubAdd to my skills

Verified commit a84159688af3ca37a4be05a0d422b94451b2e24e

git clone --filter=blob:none --no-checkout https://github.com/patch-gg/pixelfx.git .hotskills/patch-gg-pixelfx && git -C .hotskills/patch-gg-pixelfx checkout --detach a84159688af3ca37a4be05a0d422b94451b2e24e # Copy each selected skill directory from .hotskills/patch-gg-pixelfx into .claude/skills/<skill-name>/
5.5kGitHub stars
5.2kstars in 7 days
1skill in this repository
8commits in 30 days

Heat

8.1
  • Star growth, last 7 daysAhead of 100% of tracked repositories
  • Star growth, last 24 hoursAhead of 100% of tracked repositories
  • Rank movement, last 7 daysNot available
  • Commits, last 30 daysAhead of 75% of tracked repositories
  • Accounts asking about it through MCP, last 7 daysNot available
  • Hot votes this weekAhead of 0% of tracked repositories

Heat never changes the order by stars, and sponsorship never touches it. How heat works

Stars over time

Oct 30, 2026Nov 6, 20265,475

30-day change not yet available: not enough history.

Individual skills in this repository

How it works

pixelfx

When your agent uses it

Make pixel art effects and sprite animations in code with the pixelfx library, which has 244 ready-made ones, acted out by a character who winds up, freezes on contact and recovers (fire, explosions, water, ice, lightning, sci-fi, melee, impacts, projectiles, spawn and death, arcane, holy, shadow, status, nature, weather, UI, pickups, transitions, critters) to drop into a game, recolor, export as sprite sheets or remix, plus a draft, render, look, refine loop that makes new ones look hand-animated. Use when someone wants pixel art VFX, sprite animations or sprite sheets, game juice, a specific effect ("a frost nova for my mage", "a coin pickup sparkle"), wants to use or export a pixelfx effect in Godot, Unity, Phaser or a canvas game, or wants their pixel effects to look better.

What it loads into context

Frontmatter

219 tokens

Always available to the agent

SKILL.md

2,913 tokens

When the skill is activated

Reference documents

0 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

  1. Before anything
  2. 1. Look for an existing effect first
  3. 2. Put it in the game
  4. 3. Make a new one
  5. 4. Native code instead of JS

Scripts executed separately

  • ../../src/core/index.js
  • ../../src/core/rig.js
  • ../../tools/act.mjs
  • ../../tools/act.mjs
  • ../../tools/check.mjs
  • ../../tools/check.mjs
  • ../../tools/list.mjs
  • ../../tools/list.mjs
  • ../../tools/new.mjs
  • ../../tools/new.mjs
  • ../../tools/render.mjs
  • ../../tools/render.mjs

Files

  • ../../.claude-plugin/marketplace.jsonasset557 bytes
  • ../../.claude-plugin/plugin.jsonasset626 bytes
  • SKILL.mdcore11,249 bytes
  • ../../src/core/index.jsruns908 bytes
  • ../../src/core/rig.jsruns28,452 bytes
  • ../../tools/act.mjsruns3,099 bytes
  • ../../tools/act.mjsruns3,099 bytes
  • ../../tools/check.mjsruns12,504 bytes
  • ../../tools/check.mjsruns12,504 bytes
  • ../../tools/list.mjsruns783 bytes
  • ../../tools/list.mjsruns783 bytes
  • ../../tools/new.mjsruns2,482 bytes
  • ../../tools/new.mjsruns2,482 bytes
  • ../../tools/render.mjsruns2,927 bytes
  • ../../tools/render.mjsruns2,927 bytes
Read SKILL.md

# pixelfx

Pixel art effects as code. Each effect is one file, `src/fx/<category>/<name>.js`, that draws into two buffers:
**color** (pixels: opaque, dithered or truly translucent) and **light** (additive glow). No images, so an effect
can be played live, recolored, mirrored, reseeded and rendered to a sprite sheet for any engine.

The method is Hugo Duprez's ([How to make (good) pixel art effects with
Claude](https://www.spritefusion.com/blog/how-to-make-good-pixel-art-effects-with-claude)): code is clay, trust
your eyes, feed your references. One-shot prompts make mediocre effects. Drafts you render, look at and refine
make good ones.

## Before anything

1. Work in a pixelfx checkout. If the working directory has no `tools/render.mjs`, clone one next to the
View the complete source on GitHub

Skills included

  • pixelfx

Repository facts

License
MIT
Created
Oct 30, 2026
Last pushed
Oct 31, 2026
Forks
700
Open issues
4
Project activity
Active

Rank over the last 12 weeks

Now #266 · best #266

  1. #459 on Nov 1
  2. #353 on Nov 2
  3. #308 on Nov 3
  4. #287 on Nov 4
  5. #273 on Nov 5
  6. #266 since Nov 6
1 earlier period
  1. #681 on Oct 31

Before you install

Local scripts

Automated signals, not a guarantee

Checked Nov 6, 2026

Not fully analyzed: some files were too long, unreadable or missing. This never lowers the level.

Show 5 notes
  • tools/act.mjs:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
  • tools/check.mjs:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
  • tools/list.mjs:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
  • tools/new.mjs:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
  • tools/render.mjs:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
Show all 28 signals by file

.claude-plugin/marketplace.json

  • Network accessline 4
    "owner": {     "name": "Patch",     "url": "https://patch.gg"
  • Network accessline 5
    "name": "Patch",     "url": "https://patch.gg"   },
  • Network accessline 6
    "url": "https://patch.gg"

.claude-plugin/plugin.json

  • Network accessline 6
    "author": {     "name": "Patch",     "url": "https://patch.gg"
  • Network accessline 7
    "name": "Patch",     "url": "https://patch.gg"   },
  • Network accessline 8
    "url": "https://patch.gg"
  • Network accessline 9
    },   "homepage": "https://github.com/patch-gg/pixelfx",   "repository": "https://github.com/patch-gg/pixelfx",
  • Network accessline 10
    "homepage": "https://github.com/patch-gg/pixelfx",
  • Network accessline 11
    "repository": "https://github.com/patch-gg/pixelfx",

skills/pixelfx/SKILL.md

  • Network accessline 14
    The method is Hugo Duprez's ([How to make (good) pixel art effects with Claude](https://www.spritefusion.com/blog/how-to-make-good-pixel-art-effects-with-claude)): code is clay, trust
  • Network accessline 15
    Claude](https://www.spritefusion.com/blog/how-to-make-good-pixel-art-effects-with-claude)): code is clay, trust
  • Network accessline 21
    1. Work in a pixelfx checkout. If the working directory has no `tools/render.mjs`, clone one next to the    project: `git clone https://github.com/patch-gg/pixelfx`. No install step: the tools use only Node.
  • Network accessline 22
    project: `git clone https://github.com/patch-gg/pixelfx`. No install step: the tools use only Node.
  • Network accessline 97
    files and borrow their techniques (`Particles` and `Bits` in `src/core/sim.js` for sparks, smoke and debris,    `p.disc` for translucent volumes, `cycle` for seamless particles, `tileFbm` scrolls for flames and water). Look at    the closes
  • Network accessline 98
    `p.disc` for translucent volumes, `cycle` for seamless particles, `tileFbm` scrolls for flames and water). Look at    the closest of [Hugo Duprez's effects](https://www.spritefusion.com/pixel-art-vfx) too: they are the quality bar.    If hi
  • Network accessline 99
    the closest of [Hugo Duprez's effects](https://www.spritefusion.com/pixel-art-vfx) too: they are the quality bar.

src/core/index.js

  • Executable scriptline 1
    Executable file

src/core/rig.js

  • Executable scriptline 1
    Executable file

tools/act.mjs

  • Executable scriptline 1
    #!/usr/bin/env node
  • Executable scriptline 1
    Executable file; content unavailable

tools/check.mjs

  • Executable scriptline 1
    #!/usr/bin/env node
  • Executable scriptline 1
    Executable file; content unavailable

tools/list.mjs

  • Executable scriptline 1
    #!/usr/bin/env node
  • Executable scriptline 1
    Executable file; content unavailable

tools/new.mjs

  • Executable scriptline 1
    #!/usr/bin/env node
  • Executable scriptline 1
    Executable file; content unavailable

tools/render.mjs

  • Executable scriptline 1
    #!/usr/bin/env node
  • Executable scriptline 1
    Executable file; content unavailable

How the signals fit together

Facts from a static read of the files at the pinned commit. They describe what the code does, not why.

Some files could not be read; the facts below still hold.

Signal confidence: 19 facts

Works with

Agent compatibility, from the files in this repository
AgentStatusEvidenceInstall to
Claude CodeNativeManifest .claude-plugin/marketplace.json.claude/skills/<skill-name>/
CodexCompatibleStandard SKILL.md skills/pixelfx/SKILL.md.agents/skills/<skill-name>/
CursorCompatibleStandard SKILL.md skills/pixelfx/SKILL.md.cursor/skills/<skill-name>/
Gemini CLICompatibleStandard SKILL.md skills/pixelfx/SKILL.md.gemini/skills/<skill-name>/
GitHub CopilotCompatibleStandard SKILL.md skills/pixelfx/SKILL.md.github/skills/<skill-name>/
OpenCodeCompatibleStandard SKILL.md skills/pixelfx/SKILL.md.opencode/skills/<skill-name>/
  • Native The repository ships a manifest, folder or frontmatter field for this agent.
  • Compatible A standard SKILL.md that this agent can read.
  • Unknown No evidence either way.

Derived automatically from paths, manifests and frontmatter. Not tested on each agent.

Explore alternatives and comparisons

Add this badge to your README

It updates every night and links to this page.

patch-gg/pixelfx: #266 on hotskills, 5.5k stars

[![patch-gg/pixelfx on hotskills](https://hotskills.dev/badge/patch-gg-pixelfx.svg)](https://hotskills.dev/skill/patch-gg-pixelfx/)