Guide · Agent skill
How to use the Lightning Energy Skill VFX agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
Lightning Energy Skill VFX is an agent skill for building the visual effects of a close-combat energy attack in Three.js, a JavaScript 3D graphics library. It is aimed at game developers and technical artists making anime or dark-fantasy skill effects on the web. After this guide you will know how to install the skill, how to ask an agent for these effects, and what the bundled module and demo contain.
Lightning Energy Skill VFXMengTo/Skills · MIT Download the skill Quick start
- 1Download and unzip. Download the ZIP from this directory's page and unzip it. You will get the lightning-energy-skill-vfx folder.
- 2Place the folder. Move it into ~/.claude/skills/ for personal use, or into your project's .claude/skills/ folder.
- 3Check the requirements. Confirm your project uses Three.js r170 and a WebGL2-capable browser.
- 4Ask for the effect. Describe the effect in plain words, for example a lightning punch with a storm orb in Three.js.
- 5Wire up the module. Import the module, call createStormEnergy with your THREE object, set the size and warm up the effects.
- 6Trigger on hits. Call fx.blast, fx.burst or fx.impact from your hit logic and advance the clock with fx.update each frame.
- 7Open the demo. Open the demo page to compare your result with the five-beat demo and its failure-mode switches.
What is an agent skill?
An agent skill is a folder of instructions and files that an AI agent loads when your request matches the skill's description. This one is defined in a SKILL.md file. Once installed, the agent knows the specific look and structure this skill describes, so you do not have to explain the technique from scratch each time.
What does the skill make the agent do?
The skill covers the effect half of a skill: what the fist throws, what the air does and what the hit leaves. It describes lightning built as trees of strips with a white core in a violet-blue glow, where each channel grows out as a stepped leader, flares as it connects, holds its shape and fades through an afterglow.
It also covers a storm-cloud orb with plasma-globe arcs, a torn black shadow that follows the orb, ground strikes that crawl along cracks, air bursts felt as refraction, orange sparks, floating or falling rocks, and impact frames that hold, invert and shake the lens, limited to three flashes a second.
- Lightning with a leader, flash on connection and afterglow
- Storm orb with a black shadow and plasma-globe arcs
- Ground strikes, air bursts, sparks and fractured rocks
- Impact frames: hold, two-tone ink inversion, screen shake
How do you install the skill?
Download the ZIP from the skill's page on this directory and unzip it. For a personal install, place the folder in ~/.claude/skills/. For a single project, place it in the project's .claude/skills/ folder.
In the Claude apps you can instead upload the ZIP under Settings, then Capabilities, then Skills.
- Personal: ~/.claude/skills/lightning-energy-skill-vfx
- Project: .claude/skills/lightning-energy-skill-vfx
How do you trigger it with a natural request?
You do not need a special command. Describe the effect you want in plain words, and mention Three.js or WebGL so the agent uses the right stack. The skill's description lists trigger phrases such as lightning or thunder fists, plasma or energy balls, charge-ups, ground strikes, hit-stop, impact frames, screen shake, black lightning and afterimage.
A minimal request, taken from the skill's demo prompt, looks like this:
- Use the lightning-energy-skill-vfx skill to give this character's lightning punch its effects in Three.js.
- Add a storm orb to the fist socket with a black shadow that streams behind it.
- Add a three-flash-per-second impact frame with screen shake on a heavy hit.
How do you use the reusable module?
The skill ships assets/storm-energy.mjs. You pass in your own THREE object, and the module does not import a second copy. The core pattern is to create the effects, set the size, warm them up, create an orb, and call update and render each frame.
Blasts, bursts and impacts are then triggered from your hit logic. The bundled demo runs the same module and is a good place to see each call working before you adapt it.
- createStormEnergy(THREE, { renderer, scene, camera }) sets up the effects
- fx.createOrb({ radius }) creates the storm orb
- fx.blast, fx.burst and fx.impact fire on a hit
const fx = createStormEnergy(THREE, { renderer, scene, camera });
fx.setSize(width * dpr, height * dpr, dpr);
fx.warmup();
const orb = fx.createOrb({ radius: 0.4 });What do you need before you start?
The skill requires Three.js r170, and the demo ships a copy in demo/assets. You also need a browser with WebGL2 support. Node.js is only needed if you rebuild the demo with demo/build.mjs.
The skill runs scripts and does not use the network. Review the scripts before running them, especially demo/build.mjs, since it runs scripts on your machine.
- Three.js r170
- A WebGL2-capable browser
- Node.js, only to rebuild the demo with demo/build.mjs
What are the safety notes and tips?
The package runs scripts, so read demo/build.mjs before running it. The skill's floor texture is Poly Haven's Dry Ground 01 by Rob Tuytel under CC0, included in demo/assets/ground/. The demo page is built so it still opens from disk.
For tuning, the module exposes a time ramp, a hold on the effect clock, and a crackPath option for ground arcs that follow your own cracks. The skill's reference notes that the demo was judged against AAA reference games and did not reach its target score, so treat it as a strong starting point rather than a finished production asset.
- Read demo/build.mjs before running scripts
- Use fx.impact with a short hold for hit-stop
- Set options.crackPath to match your ground geometry
- Expect to tune colours and timing for your own game
What people use it for
- A lightning or thunder fist punch with branching strikes on contact
- A storm orb charge-up held in front of a character's fist with a shadow trail
- Ground strikes that crack and flash along stone in a dark-fantasy arena
- Ultimate attacks using screen shake and a short impact-frame hold
- A storm domain ring with floating rocks and a vortex effect
Frequently asked questions
Is the lightning-energy-skill-vfx skill free to use?
The skill is released under the MIT licence, as listed on this page. The demo's floor texture is CC0 from Poly Haven. Check the licence file in the downloaded ZIP before using it in a commercial project.
What are the requirements for the lightning energy skill?
It requires Three.js r170, a WebGL2-capable browser, and Node.js only if you rebuild the demo with demo/build.mjs. The skill runs scripts and does not use the network.
Where do I install the agent skill?
Put the folder in ~/.claude/skills/ for personal use or in a project's .claude/skills/ folder. In the Claude apps you can upload the ZIP under Settings, then Capabilities, then Skills.
Does this skill work with Unity or Unreal?
No. The module and shaders are specific to Three.js and WebGL, so projects on other engines are not a fit for this skill.
What is the difference between this skill and create-game-vfx?
This skill focuses on the specific dark-fantasy energy look and its module. The create-game-vfx skill covers readable, budgeted gameplay effects in general, and its readability rules still apply here.
Why does my effect look different from the demo?
The effects depend on your Three.js setup, your ground and crack geometry, and your timing. Tune the colours, hold times and ramp values, and provide a crackPath that matches your own ground.
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 anime or dark-fantasy energy attacks in Three.js or WebGL and want a working lightning, orb and impact-frame module to start from. Pick something else if your project uses another engine, or if you only need generic game VFX guidance, where create-game-vfx is the better fit.
Download the skill