How to use the Shader Cursor Trail agent skill

What the skill makes the agent do

An agent skill is a folder of instructions (a SKILL.md file plus reference files, assets and optional scripts) that an AI agent loads when your request matches the skill's description. This one tells the agent how to build the exact Shaders WebGPU effect used on the Tidal Commons hero: a halftone dot trail, driven by the cursor, with chromatic ripples and film grain.

The skill treats the effect as progressive enhancement. The agent is told to keep the page's existing content, imagery and controls, and to keep the static first frame so the page still works without the effect.

• Adds a full-bleed, aria-hidden shader layer behind the section content, with links and controls kept above it.
• Shows the effect only on capable desktop browsers where motion is allowed and WebGPU is available.
• Falls back to the original image or dark background for static, touch, reduced-motion, reduced-transparency, unsupported-browser and forced-colors visitors.
• Unmounts the shader when the section leaves the screen so GPU work stops.
• Tells the agent not to change the graph into other effects, add WebGL or Three.js, or hotlink Shaders preview assets.

Install the skill (ZIP download or Claude apps upload)

Download the add-shader-cursor-trail ZIP from this page. There are two ways to make it available to your agent.

For Claude Code, unzip the folder into ~/.claude/skills/ to make it available for all of your projects, or into a project's .claude/skills/ folder to make it available only in that project. For the Claude apps, upload the ZIP under Settings → Capabilities → Skills.

• Personal install: unzip into ~/.claude/skills/
• Project install: unzip into .claude/skills/ inside your project
• Claude apps: Settings → Capabilities → Skills, then upload the ZIP

Ask for the effect with a natural request

You do not need to type the skill name. The skill is triggered when your request matches its description, so describe what you want in plain words. The source lists these trigger phrases: asking for this shader mouse effect, a halftone cursor trail, an interactive WebGPU hero or contact background, or a reusable cursor-following shader layer.

Name your framework and project type in the request so the agent can pick the right subpath. The skill covers React, Next.js, Vue, Svelte, Solid and plain web projects.

• Add the Tidal-style halftone cursor trail to the hero section of my Next.js site.
• Make a reusable cursor-following WebGPU shader layer for my Vue landing page.
• Add an interactive WebGPU background to the contact section of this Svelte project.

What the project needs before you start

The skill assumes a working front-end project and a few tools. It does not install Node.js or your browser for you.

The shaders npm package is required, along with its React, Vue, Svelte or Solid subpath (for example shaders/react). The agent installs it with your project's existing package manager. For Vite projects, the reference file says not to add shaders to optimizeDeps.exclude, because its dependencies need normal pre-bundling. Framework documentation is linked from the skill at shaders.com/docs/guide.

• Node.js and your project's existing package manager
• The shaders package and its framework subpath
• A WebGPU-capable browser to see the effect (other browsers show the static fallback)
• Node.js to run the included verification script

Check the result with the verification script

For React implementations, the skill includes scripts/verify-cursor-trail.mjs. It checks the generated React code for the required shader structure. Run it with Node.js, passing the paths to the generated shader component, the gate component and the CSS file. Replace the placeholder path with the real location of the skill folder.

The skill also asks the agent to run your project's lint, typecheck or tests and a production build. Browser checks are listed too: static content with JavaScript off, keyboard access above the layer, touch, reduced motion, unsupported WebGPU, and no runtime requests to previews.shaders.com or data.shaders.com.

• Run the lint, typecheck or test scripts that your project already has
• Run a production build
• Check keyboard focus, reduced motion and the no-WebGPU fallback in a browser
• Confirm there are no runtime requests to previews.shaders.com or data.shaders.com

Safety notes: scripts and network use

This skill runs scripts and uses the network. The verification script is a Node.js file that reads the files you pass to it. Read it before running it on a project you care about.

The effect itself depends on the external shaders npm package and its hosted assets, so the project must be able to install that package. The skill tells the agent not to hotlink Shaders preview assets, and the checks look for runtime requests to two Shaders hosts. Note that the skill's own verification confirms this only for the checks it lists; review your deployed site as well.

• The verification script runs locally with Node.js.
• The shaders package is an external dependency.
• Projects that cannot install that package or accept its hosted assets should not use this skill.

Tips for good results

Keep your request specific about the section you want the effect in. The skill is built around one hero or contact-style section with content above a full-bleed layer.

Expect the agent to keep the exact graph. If you want different colours, a different pattern or a generic cursor effect, this skill is the wrong tool, because it asks the agent to keep the graph rather than customise it. The skill allows adjusting presentation values such as opacity and blend mode.

Report-back matters. The skill asks the agent to report the chosen blend mode, fallback, capability gates, production-build result and any browser limitation. Do not accept a claim of visual WebGPU verification unless someone actually ran it in a compatible browser.

• Name the section and framework in your request.
• Accept opacity and blend-mode tweaks; ask for a different graph only if you want a different design.
• Ask the agent for its verification report before you merge.