Guide · Agent skill
How to use the Water and Crystal VFX agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The Water and Crystal VFX skill is an instruction set that gives an AI agent a detailed visual recipe for water and crystal game effects in Three.js. It is for developers and technical artists building water or ice-crystal skills, splashes, tide pools and crystal growth or shatter effects. After this guide you will know what the skill changes in the agent's output, how to install it, how to phrase a request so it triggers, and what the bundled module and demo need.
Water and Crystal VFXMengTo/Skills · MIT Download the skill Quick start
- 1Download the ZIP. Get the skill's ZIP from the page on this site. It contains SKILL.md at its root.
- 2Unzip into a skills folder. Unzip it into ~/.claude/skills/ for all projects, or into .claude/skills/ inside one project.
- 3Or upload it in the Claude apps. In the Claude apps, open Settings, go to Capabilities, then Skills, and upload the skill.
- 4Ask for a water or crystal effect. Describe the effect in Three.js terms, such as a water orb, a splash or crystal shatter, and mention the effect name.
- 5Check the result against the demo. Open the demo page built from demo/build.mjs and compare your effect with the five beats and the failure-mode switches.
What the skill makes the agent do
When a developer asks for water or crystal effects in Three.js, the agent follows the skill's rules so the water reads as clear water rather than a flat teal fill or a textured ball. The water orb refracts the frame behind it, has a silver rim and sharp highlights, and its surface swells and rings in place. Streams wound up from tide pools, a lash that whips into a pool, and a splash crown of aerated white water are all covered.
Crystals are traced against their own planes so back facets and total internal reflection show inside the stone. They grow out of the water, then shatter into shards that fall and rest on the ground. The skill also covers caustics on the pool floor and a moonlit wet-rock scene with a moon reflection.
- Water orb: ray-marched, refracting, with an inverted horizon and a silver rim
- Streams and splashes: beaded ropes, drips, a lash and a splash crown
- Crystals: growth, resonance glow, then shattering into Voronoi shards
- Night scene: rock banks, mirror pools, moon glitter and caustics
Install the skill in Claude
Download the ZIP from the skill's page on this site. Unzip it into your personal skills folder, ~/.claude/skills/, or into a project's .claude/skills/ folder if you want the skill to apply only to that project. The skill folder contains SKILL.md at its root, which is the file the agent reads.
You can also upload the skill in the Claude apps. Open Settings, go to Capabilities, then Skills, and add the skill from the ZIP there.
- Personal install: ~/.claude/skills/
- Project install: .claude/skills/ inside your project
- App install: Settings → Capabilities → Skills
Trigger the skill with natural requests
You do not need a special command. Describe the effect in plain terms and mention the element, the setting or a phrase from the skill's trigger list. The skill's description names water or ice-crystal skills, water orbs, water whips, splash impacts, tide pools, crystal growth, crystal shatter, caustics and moon reflections on water, among others.
Name the engine as well. The skill is written for Three.js with WebGL2, so a request that says so will match the skill's approach. If you only want the visual effect and not the caster's animation or scoring, say 'skill effects only'.
- Build a water orb for my water skill in Three.js that refracts the scene behind it.
- Add a splash crown where the water whip hits the pool, with drops breaking off the spikes.
- Make the crystals grow out of the pool, glow at the root, then shatter into shards.
- Add moon glitter and caustics to the tide pool scene. Skill effects only.
Use the reusable module
The skill includes a module, assets/tide-crystal.mjs. You pass in your own THREE, so the module does not load a second copy of Three.js. Your renderer, scene and camera are passed in when you create the effect. The skill's own example shows the core calls below.
Set the size again whenever the canvas resizes, and call warmup before the first cast so every effect compiles first. Shards and drops use fx.groundAt, so you can point them at your own terrain.
- Create the effect once, bake the noise texture, then call setSize on resize
- Call warmup() before the first cast
- Drive the orb, streams and crystals from your own beat timing each frame
import { createTideCrystal, ENV_GLSL, LIGHTS_GLSL, RIPPLE_GLSL, CAUSTIC_GLSL, TNOISE_GLSL, NOISE_GLSL, L_MIRROR } from './tide-crystal.mjs';
const fx = createTideCrystal(THREE, { renderer, scene, camera, seed: 23, moonDir });
fx.setSize(width * dpr, height * dpr, dpr);
fx.warmup();
fx.groundAt = (x, z) => myTerrainHeight(x, z);
const dt = fx.update(realDt);Run the demo and check the safety notes
The skill includes a five-beat demo on a scanned CC0 low-tide floor. Its demo/index.html is built by demo/build.mjs, which needs Node.js. The build inlines the module and embeds the floor textures as data URIs, so the page opens from disk. Regenerating demo/layout.bin needs Python 3 with numpy and Pillow, and you only need that if you change the layout.
The skill runs scripts and needs WebGL2 in the browser. It does not use the network, according to the requirements in its listing. The demo bundles its own copy of Three.js under the MIT licence.
The demo has failure-mode switches. The Sliding texture switch shows what happens when the orb's texture scrolls instead of deforming in place. The Painted glass switch shows a tinted crystal with only a reflection and no internal light paths. Use them to see what the skill is guarding against.
- Requires WebGL2 in the browser
- Node.js for rebuilding the demo with demo/build.mjs
- Python 3 with numpy and Pillow only for regenerating layout.bin
- Runs scripts: yes. Uses network: no
Tips for better results
Ask for the effect to be felt rather than thrown at the viewer. The module's options include shake and fisheye, and the skill's example sets them to moderate values. Keep requests specific about where the water comes from and where it lands, since the skill's terrain and pools depend on those positions.
If the agent's first output looks like a teal blob or a textured ball, point it back to the skill's rule that clear water has no colour of its own and takes its tint only from path length.
- Name the beat: gather, current, impact, growth or shatter
- Say where the water lands so the pool and ground line up
- Ask for the failure-mode check if the water looks like a flat fill
What people use it for
- A water skill whose orb refracts the scene behind it, with a silver rim and sharp highlights
- A water whip that unspools from an orb and pours into a pool with a splash crown of white water
- Crystals that grow out of a pool with a glowing root and then shatter into falling shards
- A moonlit tide pool scene with rain ripples, caustics on the floor and a moon glitter column
Frequently asked questions
How do I install the water and crystal VFX agent skill?
Download the ZIP from the skill's page and unzip it into ~/.claude/skills/ for personal use, or into .claude/skills/ inside a project. You can also upload it in the Claude apps under Settings, Capabilities, then Skills.
Is the water and crystal VFX skill free to use?
The skill is published under the MIT licence, as stated on its page. The demo bundles a copy of Three.js under the MIT licence as well.
What do I need to run the skill's effects?
You need a Three.js project and a browser with WebGL2 support. Node.js is needed to rebuild the demo, and Python 3 with numpy and Pillow is only needed to regenerate layout.bin.
Does the skill work outside Three.js?
No. The code and shader approach is written for Three.js and WebGL, so it will not transfer directly to other engines or to projects that do not use WebGL.
Why does my water look like a flat teal fill?
The skill says clear water has no colour of its own and is tinted only by its path length. Ask the agent to refract the frame behind the water, use Fresnel reflection and keep silver rims and highlights, as the skill's rules describe.
What are the alternatives to this skill?
For lightning and energy orbs, use lightning-energy-skill-vfx. For fire, smoke and heat haze, use fire-smoke-skill-vfx. For general readable game effects, use create-game-vfx.
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 water or ice-crystal skill effects in Three.js and want a clear-water look and a working module and demo to adapt. Pick something else if your project does not use Three.js or WebGL, or if you only need a quick 2D or generic particle effect, since this is a heavy shader pipeline that needs your renderer, scene and camera passed in.
Download the skill