Skip to content
Get packs

Fire and Smoke VFX

Makes an agent build realistic, stylised fire, smoke and ember effects in Three.js for game skills

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
9 files

What it does

This is a set of written instructions that teaches an AI agent how to build the visual effects for a fire-based game ability in Three.js, a web 3D library. Once installed, the agent knows the look and structure the author wants: flames that rise and accelerate like real fire rather than scrolling textures, smoke lit only by the fire, embers that cool and fall as ash, and heat haze. It also points the agent to a reusable effects module (assets/fire-fx.mjs) and a demo page with a burned-ground floor.

Great for

  • Game developers building fire, fireball, or flamethrower abilities for web-based 3D games
  • Technical artists who want a consistent, reusable fire and smoke effect language in Three.js
  • Developers studying how to structure ray-marched shader effects with a shared light and composite pipeline

Skip it if

  • Projects not using Three.js or WebGL, since the effect code and guidance target that stack and will not transfer directly
  • Someone expecting a ready-made asset pack or a plug-and-play particle library; the value is in the shader approach and code, which needs integration work
  • Lightning, energy orbs or general gameplay telegraph design, where sibling skills in the same repo are the better fit

Try asking

  • “Build a flamethrower effect in Three.js with flames that rise and stretch as they climb”
  • “Create a fire tornado whirl with smoke and embers for my web game's fire ability”
  • “Add a burning ground effect with a heat map that makes the ground smoulder”
  • “Set up a fireball with a white-hot core, orange body and embers that fall as ash”
Step-by-step guide: how to use Fire and Smoke VFXInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 9 original files, the MIT licence and an attribution note.

    fire-smoke-skill-vfx.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip fire-smoke-skill-vfx.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip fire-smoke-skill-vfx.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Ask the agent to start from the demo page and the reusable module rather than writing shaders from scratch, so the existing lighting and bloom stay consistent
  • Test with the demo's failure-mode switches (for example Scrolled versus Rising, Over versus Additive) to see the difference the skill is meant to make
  • Keep the flash limiter on for gameplay, since the skill caps impact flashes at three per second for comfort

What's inside

  • agents/openai.yaml
  • demo/build.mjs
  • demo/PROMPT.md
  • demo/src/stage.js
  • demo/src/ui.css
  • demo/src/ui.html
  • demo/src/ui.js
  • references/scorecard.md
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.