Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →mengto/add-shader-cursor-trail
Add the Shaders WebGPU mouse effect used for the Tidal Commons hero: a white twinkling halftone cursor trail driven by ChromaFlow, masked through a DotGrid, finished with chromatic ripples and film grain, and protected by static, touch, accessibility, SSR, and performance fallbacks.
Passed 12 of 18 test cases with the skill, and 5 of 18 without it.
and 15 more in the full report
12 fixed3 passed either way4 still failing3 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 12 test cases the skill fixed. Same model, same prompt, with and without the skill.
When adapting the shader code files in React, can we remove two of the invisible driver nodes in the shader graph to simplify the component?
| Checked | Without skill | With skill |
|---|---|---|
| Requires keeping all six shader nodes intact in their exact order. | Missed | Passed |
| Retains both invisible drivers and both ID linkages. | Missed | Passed |
The instructions your model reads when the skill loads.
Implement the exact trail as progressive enhancement. Preserve the host section's semantic content, imagery, controls, and static first frame.
shaders with the existing package manager. Import from the matching framework subpath: shaders/react, shaders/vue, shaders/svelte, or shaders/solid.assets/react/. Keep the lightweight capability gate separate from the heavy shader module so ineligible visitors do not request the shader bundle.aria-hidden="true" shader layer behind the section content. Keep links and controls above it. Do not set pointer-events: none on the canvas unless cursor tracking is verified to use global events.Run the project's lint, typecheck/tests, and production build. For React implementations, also run:
node /path/to/add-shader-cursor-trail/scripts/verify-cursor-trail.mjs \
path/to/CursorTrailShader.tsx \
path/to/CursorTrailGate.tsx \
path/to/cursor-trail.css
Verify the static section with JavaScript unavailable, keyboard access to content above the layer, touch behavior, reduced motion, unsupported WebGPU, focus/visibility cleanup, and absence of runtime requests to previews.shaders.com or data.shaders.com.
Report the chosen blend mode, fallback, capability gates, production-build result, and any browser limitation. Do not claim WebGPU visual verification unless it was actually performed in a compatible browser.
test cases passed, vs 5 / 18 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.