Skip to content
Get packs

Water and Crystal VFX

Makes an agent write Three.js visual effects for clear water orbs, streams, crystals and shattering

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

What it does

This skill gives an AI agent a detailed visual recipe for game effects: a water orb that refracts the scene behind it, water streams and splashes, crystals that grow and shatter, and a moonlit wet-rock scene. When a developer asks for these effects in Three.js, the agent follows the skill's rules so the water looks like clear water rather than a flat teal blob. It also ships a reusable JavaScript module and a standalone demo page.

Great for

  • Game developers building water or ice-crystal skill effects in Three.js
  • Technical artists who want clear-water and crystal looks without a post-processing library
  • Developers who want a working reference module and demo to adapt

Skip it if

  • Projects not using Three.js or WebGL: the code and shader approach will not transfer directly
  • Users who only want a quick 2D or generic particle effect, since this is a heavy shader-based pipeline
  • Anyone expecting it to change files on its own without a Three.js project: the module needs your renderer, scene and camera passed in

Try asking

  • “Build a water orb skill effect in Three.js that refracts the background and ripples when water joins it”
  • “Create crystal growth and shatter effects with Voronoi shards that fall onto my ground height”
  • “Add a tide pool scene with ripple rings, rain and caustics on the floor using this skill's module”
  • “Show the demo's failure-mode switches so I can compare living water against a sliding texture”
Step-by-step guide: how to use Water and Crystal VFXInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

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

    water-crystal-skill-vfx.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip water-crystal-skill-vfx.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip water-crystal-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

  • Pass your own THREE instance into createTideCrystal rather than importing a second copy, as the SKILL.md instructs
  • Set fx.groundAt to your terrain so shards and drops land on the surface you actually draw
  • Open demo/index.html from disk to see the effects; it makes no network requests

What's inside

  • agents/openai.yaml
  • demo/build.mjs
  • demo/layout/cams.json
  • demo/layout/layout.py
  • demo/PROMPT.md
  • 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.