Skip to content
Get packs

Guide · Agent skill

How to use the Shaders Cursor Ripples agent skill

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

The shaders-cursor-ripples skill is an instruction package for an AI coding agent. Once it is installed, the agent knows how to add a water-ripple effect to an existing image on a web page, so the picture distorts where the mouse moves, using the Shaders library and WebGPU. This guide explains what the skill does, how to install it, how to ask for it, and what to check before you ship the result.

Shaders Cursor RipplesMengTo/Skills · MIT

Quick start

  1. 1Download and unzip the skill. Download the ZIP from this page and unzip it. Confirm that SKILL.md is present in the resulting shaders-cursor-ripples folder.
  2. 2Place the folder where your agent can read it. Move the folder into ~/.claude/skills/ to use it everywhere, or into a project's .claude/skills/ folder to use it in one project. In the Claude apps, you can upload it under Settings → Capabilities → Skills instead.
  3. 3Install the shaders package. In your React project, run npm install shaders. Check the Shaders license terms before any commercial release.
  4. 4Ask for the effect with specifics. Name the image or media panel, say what must stay unchanged, and mention any old spotlight or flashlight effect that should be removed.
  5. 5Test in a WebGPU browser. Open the page in a browser with WebGPU support and move the pointer across the image. Then check the static fallback with WebGPU unavailable and with reduced motion enabled.

What the skill makes the agent do

The skill covers one job: adding an interactive, cursor-following fluid distortion over an image that already exists on a page. It is aimed at hero images, gallery items and media panels that need a water-ripple mouse effect, and at cases where an older CSS spotlight or flashlight hover reveal should be replaced.

The skill tells the agent to keep the existing page intact. The copy, brand, image, and layout stay as they are, and the agent should keep a normal static image as a fallback for browsers without WebGPU and for users who prefer reduced motion. It also tells the agent to remove the older spotlight or flashlight code it replaces, so two effects do not run at once.

  • Renders the source image through the Shaders library's ImageTexture component.
  • Adds the CursorRipples component after it so the ripple post-processes that image.
  • Keeps one real image underneath as the accessible fallback.
  • Removes custom pointer coordinates, radial masks, duplicated reveal images and pointer animation loops from the old effect.

How to install the skill

The skill is a folder with a SKILL.md file and supporting files. The package contains agents/openai.yaml, assets/react/cursor-ripple-media.css, REFERENCES.md and SKILL.md. Download the ZIP from this page and unzip it into one of these locations:

You can install it for yourself across projects by unzipping it into ~/.claude/skills/. You can also install it for a single project by unzipping it into that project's .claude/skills/ folder. In the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.

  • Personal: ~/.claude/skills/ (available to every project)
  • Project: .claude/skills/ inside the project folder (available only there)
  • Claude apps: Settings → Capabilities → Skills, then upload the skill

What you need before you start

The skill depends on a few things outside itself. Check them before asking the agent to make changes, because the effect will not appear without them.

The skill's own asset is written for React. Vue, Svelte and Solid import paths are also mentioned in the skill, but the React asset is the one provided. The package file list does not include the React component file that SKILL.md refers to, so the agent will need to write that component itself.

  • Node.js and npm, used to install the shaders package with npm install shaders.
  • A React project, since the provided asset is React.
  • The shaders npm package. Its license terms should be checked before a commercial release.
  • A browser with WebGPU support for the effect to appear. Other browsers show the static image.
npm install shaders

How to trigger the skill with natural requests

You do not need special syntax. Describe the effect and the place it should go, and mention the existing element you want to keep. The skill's description names the situations it fits: a hero, gallery or media panel that needs a water-ripple mouse effect, a drifting CSS spotlight or flashlight reveal that should be replaced, or a request to borrow only the shader interaction from a Shaders.com reference.

Good requests name the component on the page, the image, and what must stay the same. Vague requests are more likely to produce extra artwork or layout changes.

  • Add a water-ripple cursor effect over the hero image on the homepage. Keep the headline, copy and layout unchanged.
  • Replace the flashlight reveal on the gallery cards with a WebGPU ripple. Remove the old spotlight code.
  • Use only the shader interaction from this Shaders.com reference on our product image. Do not copy its artwork, colors or text.
  • Add a cursor ripple to the media panel with a normal image fallback for browsers without WebGPU and for reduced motion.

The component setup the skill uses

The skill sets a fixed component order and values as a baseline. The image comes first, and CursorRipples comes after it so it can distort that image. Tune intensity, chromaticSplit and edges only after this baseline works.

The skill says not to add other generators such as SolidColor, Blob, Form3D, GaborNoise or Glow unless the user explicitly asks for the reference's generated artwork. It also says not to substitute the Shaders Water component, because CursorRipples is the interactive image-displacement effect.

  • Keep toneMapping set to aces on the root Shader component.
  • Give ImageTexture the image URL and objectFit set to cover for full-bleed media.
  • Keep the fallback image beneath the canvas and load the shader lazily.
<Shader toneMapping="aces"> <ImageTexture url={imageUrl} objectFit="cover" /> <CursorRipples decay={7.3} radius={0.6} /> </Shader>

Fallbacks, reduced motion and safety notes

The skill asks the agent to mount the shader only after the browser confirms WebGPU and the user has not requested reduced motion. The semantic image stays in place as the fallback, and it is not hidden until the shader reports ready, so a failed WebGPU start still leaves the page readable. The shader layer is marked aria-hidden and is set to ignore pointer events, so links and buttons stay clickable.

On safety, the skill's metadata states that it runs no scripts and uses no network access. It does install the shaders npm package, so that package comes from npm and its license terms are yours to check. The skill says to verify the current Shaders license before a commercial release.

  • Runs scripts: no. Uses network: no (according to the skill's listing).
  • The shaders package is installed from npm and is governed by Shaders license terms.
  • Essential information must never sit inside the effect, because the effect is decorative.

Tips for a clean result

Check the media wrapper before the agent edits it. The wrapper needs a real rendered width and height, or the canvas can be blank. Ask the agent to confirm that the image URL can be read by the browser, meaning it is same-origin or CORS-readable.

After the change, test in a real browser. The skill lists checks: exactly one shader canvas should exist, the fallback image should still be present, the pointer should move the distortion along its path, and there should be no console errors. Test with WebGPU turned off and with reduced motion on.

  • Ask the agent to remove the old reveal code rather than hide it.
  • Check mobile and desktop crops after the canvas starts.
  • Keep one shader canvas per media panel.
  • Report which parts were verified locally and which are live on a deployed site.

What people use it for

  • Adding a water-ripple hover effect to a homepage hero image without changing its headline or layout.
  • Replacing a CSS flashlight reveal on a product gallery with a WebGPU ripple, while keeping a static image fallback.
  • Borrowing only the mouse interaction from a Shaders.com reference and applying it to your own brand photography.
  • Adding a cursor-following distortion to a media panel that already has parallax, while keeping that motion intact.

Frequently asked questions

How do I install the shaders-cursor-ripples agent skill?

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

What does the skill require to work?

It needs Node.js and npm to install the shaders package, a React project since the provided asset is React, and a browser with WebGPU support for the effect to show. Without WebGPU, the page shows the normal static image.

Is the shaders-cursor-ripples skill free to use?

The skill is listed under the MIT license. The shaders npm package has its own license terms, which the skill says to verify before a commercial release, so check those terms yourself.

Does the skill run scripts or access the network?

According to the skill's listing, it runs no scripts and uses no network access. It does tell you to install the shaders npm package, which is a separate download.

Why does the ripple not show up in my browser?

The most likely cause is a browser without WebGPU support, in which case the static image is shown by design. Other causes named in the skill are a media wrapper with zero width or height, or an image URL that the browser cannot read because of cross-origin rules.

How is this different from a CSS spotlight or flashlight effect?

A CSS spotlight usually uses a radial mask or a second image that follows the pointer. This skill uses the Shaders library and WebGPU to distort the existing image, and it tells the agent to remove the old spotlight code it replaces.

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 a front-end developer or designer who wants a water-ripple hover on an existing image in a React project and can rely on WebGPU with a static fallback. Pick something else if your project cannot depend on WebGPU or client-side JavaScript, or if the effect would need to carry essential content.

Download the skill