CtrlK
BlogDocsLog inGet started
Tessl Logo

shaders-cursor-ripples

Add cursor-following fluid WebGPU distortion over an existing image with the Shaders library's ImageTexture and CursorRipples components. Use when a hero, gallery, or media panel needs a water-ripple mouse effect; when replacing a drifting CSS spotlight or flashlight reveal; or when a prompt says to borrow only the shader interaction from a Shaders.com reference while preserving the current brand, image, copy, and layout.

76

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

100%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 exemplary: lean, directive prose with complete copy-paste code, a well-sequenced workflow with explicit verification and symptom-to-fix diagnosis, and bulk code correctly delegated to real one-level-deep asset files. No padding, no over-explanation, and version-sensitive guidance is handled without hardcoded dates.

DimensionReasoningScore

Conciseness

Pure imperative directives with zero explanation of concepts Claude already knows (no WebGPU or library tutorials), no filler, and version sensitivity handled via 'check the installed shaders version' rather than hardcoded dates. Every token earns its place.

5 / 5

Actionability

Fully executable throughout: install command, exact composition with concrete values (decay={7.3} radius={0.6}), a complete client-gating hook, a complete JSX fallback pattern, and two linked asset files that exist in the bundle and are internally consistent with the documented props (onReady, toneMapping, layering CSS).

5 / 5

Workflow Clarity

A clear sequence (Inspect → Install → Compose → Client/Fallback → Layering → Remove old code → Performance) with an 8-point numbered verification checklist and a Failure Diagnosis section that maps each symptom to a fix, providing explicit validation and feedback loops.

5 / 5

Progressive Disclosure

Scored against the actual bundle: both references ([assets/react/cursor-ripple-shader.tsx] and [assets/react/cursor-ripple-media.css]) resolve to real files one level deep, clearly signaled in the Required Composition section, with the bulk implementation code appropriately split out of SKILL.md. Sections are well-organized and easy to navigate.

5 / 5

Total

20

/

20

Passed

Description

95%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 description: concrete capability statement, explicit and varied trigger conditions, and named library components that make it highly distinguishable. Its only weakness is that it describes one core action rather than a breadth of actions, leaving specificity just short of the top anchor.

DimensionReasoningScore

Specificity

The description names the domain and concrete specifics ('cursor-following fluid WebGPU distortion over an existing image with the Shaders library's ImageTexture and CursorRipples components'), but centers on a single core action rather than multiple distinct actions, matching anchor 4 rather than the comprehensive multi-action anchor 5.

4 / 5

Completeness

It explicitly answers both 'what' (first sentence states the concrete capability and components) and 'when' (an explicit 'Use when...' clause with three concrete trigger scenarios), matching the anchor-5 example structure.

5 / 5

Trigger Term Quality

Natural user phrasing is comprehensively covered: 'water-ripple mouse effect', 'hero, gallery, or media panel', 'drifting CSS spotlight', 'flashlight reveal', and 'borrow only the shader interaction from a Shaders.com reference' — synonyms and scenario variants users would actually say.

5 / 5

Distinctiveness Conflict Risk

A clear niche with named components (ImageTexture, CursorRipples) and trigger phrasing that distinguishes it from generic shader/image skills; minimal realistic overlap or mis-trigger risk.

5 / 5

Total

19

/

20

Passed

Validation

87%

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

Validation — 14 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

relative_links

Relative link issues: 2 deeper-than-1-level

Warning

referenced_paths_exist

Referenced path issues: 4 deeper-than-1-level

Warning

Total

14

/

16

Passed

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.