CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

77

Quality

96%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

93%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.

The body is an exemplar of progressive enhancement instruction: a tight 8-step workflow, an explicit validation section with a runnable verify script and a static-state checklist, and all deep detail correctly deferred to a real, well-organized one-level-deep bundle. The only meaningful gap is the absence of an explicit fix-and-retry feedback loop for failed validation, which keeps workflow clarity at 4 rather than 5.

Suggestions

In the Validate section, add one line closing the feedback loop, e.g. 'If the verify script or build fails, fix the reported issue and re-run before reporting results.'

State the expected outcome of scripts/verify-cursor-trail.mjs (pass conditions or exit behavior) so a failure is immediately recognizable as a validation checkpoint rather than informational output.

DimensionReasoningScore

Conciseness

The ~35-line body is lean and imperative throughout: "Inspect the framework, rendering mode, existing motion stack, layer order, reduced-motion rules...", "Keep the six shader nodes, their order, both invisible drivers, and both ID linkages exact", "Unmount when the section leaves view so GPU work stops." Every line is a directive carrying information Claude could not infer; there is no explanation of concepts Claude already knows. This matches the anchor 'Lean and efficient; assumes Claude's competence; every token earns its place'. It is not a 4 because there is no identifiable over-explanation or padding to trim.

5 / 5

Actionability

Guidance is concrete and executable: exact install subpaths ("shaders/react", "shaders/vue", "shaders/svelte", "shaders/solid"), copyable templates in assets/react/ (verified present: CursorTrailShader.tsx, CursorTrailGate.tsx, cursor-trail.css), and a fully-specified verify command with all three file arguments. This matches the anchor 'Fully executable; copy-paste ready code or commands; specific examples cover the common cases'. It is not a 4 because no key execution detail is left to the reader beyond the obvious path substitution.

5 / 5

Workflow Clarity

The 8-step workflow is clearly sequenced (inspect → install → read reference → copy templates → place layer → gate loading → preserve fallback → adapt) and the Validate section adds explicit checkpoints: lint, typecheck/tests, production build, the verify script, and a checklist of static-state conditions ("JavaScript unavailable, keyboard access..., reduced motion, unsupported WebGPU, focus/visibility cleanup"). This sits between anchors: stronger than 4's 'most checkpoints present; minor validation gaps' because the checkpoints are explicit and checklist-form, but short of 5's 'feedback loops for error recovery' — the body never states what to do when the verify script or build fails (fix-and-retry is only implicit in the detailed reference). Per the boundary guidance this is an above-midpoint fit, so 4.

4 / 5

Progressive Disclosure

The body is a genuine overview that pushes all implementation detail into well-signaled, one-level-deep bundle files: "Read [references/implementation.md](references/implementation.md) before implementation" (verified: a 92-line contract covering graph, layering, gates, validation), "copy and adapt the files in assets/react/", and the scripts/verify-cursor-trail.mjs invocation. All referenced paths exist exactly as named. This matches the anchor 'Clear overview with well-signaled one-level-deep references; content appropriately split; easy navigation'. It is not a 4 because no implementation content that belongs in the bundle is inlined and every reference is explicit and linked.

5 / 5

Total

19

/

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.

The description is dense but not padded: it states exactly what the effect is composed of, what protections it includes, and gives an explicit, multi-phrase 'Use when' trigger clause with framework coverage. It follows the strongest reference-example pattern (concrete what + explicit when) with no vague fluff or over-claims.

DimensionReasoningScore

Specificity

The description enumerates multiple concrete actions and components: "Add the Shaders WebGPU mouse effect... 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." This matches the anchor 'Lists multiple specific concrete actions; comprehensive coverage' — the composition, its drivers, and the fallback surface are all named. It is not a 4 because there is no meaningful gap in coverage of what the skill does; it is not below 5 because every clause is a concrete, verifiable action rather than generic language.

5 / 5

Completeness

Both questions are explicitly answered: the 'what' is the fully specified effect composition and fallbacks, and the 'when' is the explicit clause "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..." with concrete trigger phrases. This matches the anchor 'Clearly and explicitly answers both what AND when with concrete trigger phrases'. It is not a 4 because the 'when' clause is already specific and multi-phrase, not merely adequate.

5 / 5

Trigger Term Quality

Trigger terms are comprehensive and include natural synonyms users would say: "shader mouse effect", "halftone cursor trail", "interactive WebGPU hero/contact background", "reusable cursor-following shader layer", covering both mouse and cursor phrasing plus named frameworks (React, Next.js, Vue, Svelte, Solid, plain web). This matches the anchor 'Comprehensive coverage of natural terms including synonyms'. It is not a 4 because synonyms (mouse/cursor, shader/WebGPU, hero/contact background) are already present, leaving no significant missing natural phrasing.

5 / 5

Distinctiveness Conflict Risk

The skill occupies a clear niche — a specific halftone cursor-trail WebGPU effect with named components (ChromaFlow, DotGrid) — and its triggers are distinctive phrases unlikely to fire for unrelated skills. This matches the anchor 'Clear niche with distinct triggers; minimal conflict risk'. It is not a 4 because the trigger phrases are specific enough (halftone cursor trail, WebGPU hero background) that overlap with a generic shader or background skill would require near-duplicate intent.

5 / 5

Total

20

/

20

Passed

Validation

100%

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
Reviewed

Table of Contents

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.