create-game-vfx — Claude Code skill: Three.js game VFX
A skill that steers an AI agent through building Three.js visual effects: attacks, impacts, status effects, telegraphs. Useful when an effect has to read in combat and hold the frame rate.
npx skills add MengTo/Skills --skill create-game-vfx -a claude-codeWhat create-game-vfx does
The skill sets an order of work: gameplay meaning first, spectacle after. For every effect the agent is told to pin down a trigger, owner, duration, gameplay meaning, silhouette at camera distance, colour hierarchy, spawn cap, cleanup rule and a reduced-motion equivalent. Telegraph, contact, success, failure and lingering status visuals stay separate.
On the implementation side it asks for pooled short-lived objects, reused materials and geometry, capped particles and no per-frame allocation. Additive blending and transparency go in sparingly near important UI and targets. Cleanup has to be idempotent, otherwise reset, death and pause leak effects.
Verification covers overlaps, several targets at once, rapid repetition, pause and resume, the lowest quality tier, reduced motion and touch viewports. The skill advises sampling the live encounter for warnings, draw calls, frame time and readability. Worth installing if your project already runs on Three.js — on another renderer the material and pooling steps need rewriting.
What it helps with
- separate the attack telegraph from the contact frame
- keep an effect readable from a distant camera
- cap particles without dropping frames in combat
- make effect cleanup safe across pause and reset
- ship a reduced-motion variant of an effect
Example prompts for the agent
- build a Three.js hit VFX with pooled objects and a particle cap
- check the status effects for overlaps and rapid repetition, report frame time
- add an attack telegraph plus a separate reduced-motion variant
How to install create-game-vfx
1Skills CLI (Vercel)
npx skills add MengTo/Skills --skill create-game-vfx -a claude-code2Manually: put the files in place
~/.claude/skills/create-game-vfx/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/create-game-vfx/
1Skills CLI (Vercel)
npx skills add MengTo/Skills --skill create-game-vfx -a codex2Manually: put the files in place
.agents/skills/create-game-vfx/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add MengTo/Skills --skill create-game-vfx -a cursor2Manually: put the files in place
.cursor/skills/create-game-vfx/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install MengTo/Skills create-game-vfx2Manually: put the files in place
.github/skills/create-game-vfx/SKILL.md1Skills CLI (Vercel)
npx skills add MengTo/Skills --skill create-game-vfx -a gemini-cli2Platform CLI
gemini skills install https://github.com/MengTo/Skills --path agent-skills/game-development/create-game-vfxManually: put the files in place
.devin/skills/create-game-vfx/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add MengTo/Skills --skill create-game-vfx -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about create-game-vfx
How do I install create-game-vfx in Claude?
Run npx skills add MengTo/Skills --skill create-game-vfx -a claude-code. The skill file then sits at ~/.claude/skills/create-game-vfx/SKILL.md.
What does create-game-vfx do?
It guides an agent through designing and implementing Three.js game effects: attacks, impacts, damage feedback, status effects, spell trails, particles, shaders and telegraphs. It also requires a reduced-motion alternative.
What does the skill require for each effect?
A trigger, owner, duration, gameplay meaning, silhouette at camera distance, colour hierarchy, spawn cap, cleanup rule and a reduced-motion equivalent.
Source text
SKILL.md · MIT
--- name: create-game-vfx description: Create readable, performance-safe Three.js game visual effects. Use for attacks, impacts, damage feedback, status effects, spell trails, particles, shaders, telegraphs, quality tiers, and reduced-motion alternatives. --- # Create Game VFX Make the gameplay meaning visible before adding spectacle. ## Specify For every effect define trigger, owner, duration, gameplay meaning, camera-distance silhouette, color hierarchy, spawn cap, cleanup rule, and reduced-motion equivalent. Separate telegraph, contact, success, failure, and lingering status visuals. ## Implement safely Pool short-lived objects, reuse materials/geometry, cap particles, and avoid per-frame allocation. Use additive/transparency sparingly around important UI and targets. Make cleanup idempotent so reset, death, and pause cannot leak effects. ## Verify Test overlaps, multiple targets, rapid repetition, pause/resume, lowest quality, reduced motion, and touch viewports. Sample the live encounter for warnings, draw calls, frame time, and visual readability.
© MengTo · MIT · MengTo/Skills
