mcpField
A
add-shader-cursor-trail

add-shader-cursor-trail

github.com/mengtoDesign & UI7.1k1.4k installsUpdated 3d ago
Repository

About add-shader-cursor-trail

A coding skill for implementing a Shaders cursor-trail effect as progressive enhancement while preserving a section’s content and static fallback. It specifies capability gates, shader structure, and validation steps.

Key features

  1. 01Framework-specific Shaders imports
  2. 02Exact six-node shader structure
  3. 03WebGPU and visibility gating
  4. 04Static image or background fallback
  5. 05GPU cleanup when section exits view

Use cases

  1. 01Adding a cursor trail behind section content
  2. 02Keeping a section complete without JavaScript
  3. 03Disabling the effect for limited capabilities
  4. 04Validating motion and accessibility behavior

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/mengto/skills --skill add-shader-cursor-trail

After installing, type/add-shader-cursor-trailin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

agents/
openai.yaml
assets/react/
cursor-trail.css
CursorTrailGate.tsx
CursorTrailShader.tsx
references/
implementation.md
scripts/
verify-cursor-trail.mjs

Details

From the project README

Add Shader Cursor Trail

Implement the exact trail as progressive enhancement. Preserve the host section's semantic content, imagery, controls, and static first frame.

Workflow

  1. Inspect the framework, rendering mode, existing motion stack, layer order, reduced-motion rules, and package manager. Do not add another smooth-scroll engine or replace the section's content.
  2. Install shaders with the existing package manager. Import from the matching framework subpath: shaders/react, shaders/vue, shaders/svelte, or shaders/solid.
  3. Read references/implementation.md before implementation. Keep the six shader nodes, their order, both invisible drivers, and both ID linkages exact.
  4. For React or Next.js, copy and adapt the files in assets/react/. Keep the lightweight capability gate separate from the heavy shader module so ineligible visitors do not request the shader bundle.
  5. Place one full-bleed, 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.
  6. Gate loading on WebGPU, a fine hover pointer, normal motion/transparency preferences, document visibility, window focus, and section intersection. Unmount when the section leaves view so GPU work stops.
  7. Keep the original image or dark background as the complete fallback. Hide the layer for reduced motion, reduced transparency, coarse/no-hover pointers, and forced colors.
  8. Adapt only presentation variables such as opacity and blend mode. Do not change the graph to decorative noise, add WebGL/Three.js, or hotlink Shaders preview assets.

Validate

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.

Comments

Markdown supported