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. Use when a user asks for this shader mouse effect, a halftone cursor trail, an interactive WebGPU hero/contact background, or a reusable cursor-following shader layer in React, Next.js, Vue, Svelte, Solid, or plain web projects.

Quality

93%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Quality

Content

86%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A well-structured, token-efficient workflow that delegates detail to genuine bundle files and includes explicit validation steps. The only meaningful gap is the absence of an explicit fix-retry feedback loop and a placeholder path in the verify command.

Suggestions

Add an explicit feedback loop after validation, e.g. 'If lint/typecheck/build or the verify script fails, fix the issue and re-run before reporting success.'

Replace the `/path/to/add-shader-cursor-trail/scripts/verify-cursor-trail.mjs` placeholder with a note that the script path is relative to the skill bundle so the command is copy-paste ready.

Optionally inline a minimal CursorTrailGate/CursorTrailShader snippet or a short pointer to which asset file to start from, so the implementation entry point is unambiguous without opening references.

Dimension	Reasoning	Score
Conciseness	Lean and directive throughout — each step packs dense, specific instruction ('Inspect the framework, rendering mode, existing motion stack, layer order, reduced-motion rules, and package manager') with no concept explanations Claude already knows; every token earns its place.	5 / 5
Actionability	Provides concrete, executable guidance (install `shaders`, import framework subpaths, copy `assets/react/` files, set `aria-hidden="true"`, run a verify script), but the verify command uses a `/path/to/` placeholder and the actual implementation code lives in referenced files rather than inline, leaving minor gaps.	4 / 5
Workflow Clarity	A clear 8-step sequence with an explicit Validate section (lint, typecheck/tests, production build, plus the verify script and a checklist of conditions to confirm), but no explicit fix-and-retry feedback loop is stated for failures, which keeps it just below the top anchor.	4 / 5
Progressive Disclosure	The body is a concise overview that points to real, one-level-deep bundle materials — a markdown link to references/implementation.md, assets/react/ for code, and scripts/verify-cursor-trail.mjs for verification — all of which exist and are clearly signaled, with content appropriately split across files.	5 / 5
	Total	18 / 20 Passed

Description

100%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong, third-person description that concretely specifies the effect's component graph and fallbacks while providing an explicit, natural-language 'Use when...' trigger clause with broad framework coverage. No vague fluff or over-claims.

Dimension	Reasoning	Score
Specificity	Names multiple concrete components and actions — 'white twinkling halftone cursor trail driven by ChromaFlow, masked through a DotGrid, finished with chromatic ripples and film grain' plus six named fallback categories — giving comprehensive, non-abstract coverage.	5 / 5
Completeness	Explicitly answers both 'what' (the layered WebGPU effect with fallbacks) and 'when' via a clear 'Use when a user asks for...' clause with concrete trigger phrases, matching the anchor example directly.	5 / 5
Trigger Term Quality	Includes natural phrases a user would actually say ('shader mouse effect', 'halftone cursor trail', 'interactive WebGPU hero/contact background', 'cursor-following shader layer') alongside the full framework list (React, Next.js, Vue, Svelte, Solid, plain web), covering synonyms and variants.	5 / 5
Distinctiveness Conflict Risk	Occupies a clear niche — the specific Shaders WebGPU cursor-trail effect for the Tidal Commons hero — with distinct, highly specific triggers and minimal overlap risk against general skills.	5 / 5
	Total	20 / 20 Passed

Validation

100%

Warnings & errors only

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository: MengTo/Skills
Path: agent-skills/web-design/add-shader-cursor-trail/SKILL.md
Commit: 4c716b5

Reviewed: 4 days ago

Table of Contents

Discovery Implementation Validation

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.