Guide · Agent skill

How to use the Fire and Smoke VFX agent skill

Updated 2026-11-02 · written with AI from the project's own documentation and checked against our catalogue data

The fire-smoke-skill-vfx agent skill is a set of written instructions and code that teaches an AI coding agent how to build the visual effects for a fire-based game ability in Three.js, a web 3D library. It is for game developers and technical artists who want fire, smoke and embers that look consistent with each other. After this guide you will know how to install the skill, ask for it in plain language, and find the reusable fire-fx module and demo it points to.

Fire and Smoke VFXMengTo/Skills · MIT Download the skill

Quick start

1Download and unzip. Download the skill ZIP from the directory page and unzip the fire-smoke-skill-vfx folder.
2Place the folder. Put it in ~/.claude/skills/ for personal use or in your project's .claude/skills/ folder.
3Or upload in the apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the skill.
4Make a natural request. Describe the fire effect you need, such as a fireball, flamethrower or burning field, in Three.js.
5Use fire-fx.mjs. Import the module, pass in your THREE object, create the effect and call warmup before the first hit.
6Test in the demo. Open demo/index.html in a WebGL2 browser and compare the failure-mode switches.

What the skill makes the agent do

Once installed, the agent follows the look and structure described in SKILL.md. Flames are ray-marched volumes whose turbulence rises with buoyancy: slow at the root, then accelerating and stretching as it climbs. The skill explicitly avoids scrolling textures, which the author says slide over the flame.

Smoke is drawn premultiplied over the frame and lit only by the fire. Embers cool from white through orange to red and fall as ash. Heat haze is rendered as refraction, and a world-space heat map makes the ground smoulder.

Flames: a white-hot core, yellow and orange through to deep red tips, and walls of fire broken into separate tongues.
Fire whirls: helical sheets with a waist and a blue root.
Smoke: cauliflower billows for a burst, a thin streaked curtain off a grass-fire front, and fibrous wisps off small fires.
Impact frames: gentle ink flashes, limited to three a second.

Install the skill from the ZIP

Download the ZIP of agent-skills/game-combat/fire-smoke-skill-vfx from the directory page and unzip it. For a personal setup, place the folder in ~/.claude/skills/. For a single project, place it in that project's .claude/skills/ folder.

In the Claude apps you can instead upload the skill under Settings → Capabilities → Skills.

Personal: ~/.claude/skills/fire-smoke-skill-vfx
Project: .claude/skills/fire-smoke-skill-vfx

Trigger the skill with natural requests

You do not need to type a command. Describe the effect you want and mention fire, flames or smoke. The skill's description lists trigger phrases such as fire skill, fireball, fire wave, rings of fire, fire tornado, burning ground, wildfire front, smoke column, embers, realistic fire, flame thrower and inferno.

For demo prompts, the repo's demo/PROMPT.md includes a minimal prompt that starts with the skill name. Adding that name to your request makes the intent explicit.

Example: Give my fire skill a fireball with embers and charcoal smoke in Three.js.
Example: Build a flamethrower cone that rises and stretches, with haze over the ground.
Example: Add a burning field with smouldering ground and ash-falling embers after the blast.

Use the reusable fire-fx module

The skill includes assets/fire-fx.mjs. You pass in your own THREE object, so the module does not load a second copy of Three.js. The source shows the call pattern: create the effect with createFireFX, set the size on resize, warm up shaders before the first hit, then update and render every frame.

Flames are created with fx.flame for a plume, ball or whirl, and fx.flameArc for a wall of fire. Flashes, rings, sparks and impact frames are triggered with separate calls.

Initialise with createFireFX(THREE, { renderer, scene, camera, seed }).
Call fx.warmup() before the first hit so shaders compile in advance.
Call fx.update(realDt) then fx.render() each frame.

import { createFireFX, FIRE_LIGHTS_GLSL, GROUND_HEAT_GLSL, TNOISE_GLSL } from './fire-fx.mjs';
const fx = createFireFX(THREE, { renderer, scene, camera, seed: 23 });
fx.setSize(width * dpr, height * dpr, dpr);
fx.warmup();

Run and rebuild the demo

The demo is a five-beat scene on a scanned CC0 burned-ground floor from Poly Haven's Burned Ground 01 by Rob Tuytel. Its textures are embedded by demo/build.mjs as data URIs, so demo/index.html can open from disk. The demo includes failure-mode switches, such as Scrolled, which turns on the texture-sliding behaviour so you can compare it with the buoyancy approach.

Requirements are Three.js r170 (the demo uses a bundled copy), a WebGL2-capable browser, and Node.js if you want to rebuild the demo page by running demo/build.mjs.

Open demo/index.html in a WebGL2 browser to view it.
Run demo/build.mjs with Node.js to rebuild the page.

Check safety notes before you run it

The skill runs scripts: yes, because demo/build.mjs is a Node script. It uses network: no, according to the skill's listing. Read demo/build.mjs before running it, since it is the only script in the file list.

The skill's own scorecard reports that the demo's target match was not reached. The score went from 4.63 to 5.50 over two rounds, and the loop stopped there at the user's request. Treat the demo as a working reference, not a finished benchmark.

Scripts: yes (demo/build.mjs).
Network: no.
Review scripts before running them in your own environment.

What people use it for

A fireball ability for a web-based 3D game, with embers and charcoal smoke trailing behind.
A flamethrower that rises and stretches, with heat haze distorting the air above the ground.
A burning field after a spell, where the ground's cracks smoulder and ash falls from the embers.
A fire whirl or tornado for a boss attack, built from helical sheets with a blue root.

Frequently asked questions

How do I install the fire-smoke-skill-vfx skill?

Download the ZIP of the skill from the directory page and unzip it into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder. In the Claude apps, you can instead upload it under Settings → Capabilities → Skills.

What do I need to run it?

The skill targets Three.js r170, which the demo bundles, and a WebGL2-capable browser. Node.js is needed only if you want to rebuild the demo page with demo/build.mjs.

Is the fire-smoke-skill-vfx skill free to use?

The source lists the licence as MIT. Check the LICENSE terms in the repository for the full wording before you ship it in a product.

Does it work with engines other than Three.js?

No. The effect code and guidance target Three.js and WebGL, so they will not transfer directly to other stacks without integration work.

Does the skill use the network or run scripts?

It runs scripts, specifically demo/build.mjs, and it does not use the network according to its listing. Review the script before running it.

Why does my flame look like scrolling fog?

The skill's flames use buoyancy rather than scrolling. If you enable the Scrolled switch in the demo, the texture slides over the flame on purpose, so turn that switch off to compare the intended look.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use this skill if you are building fire, fireball or flamethrower abilities in Three.js and want a consistent set of fire, smoke and ember effects with a reusable module and a demo to learn from. Pick something else if you do not use Three.js or WebGL, want a ready-made asset pack or plug-and-play particle library, or need lightning, energy orbs or gameplay telegraphs, where sibling skills in the same repo fit better.

Download the skill