CtrlK
BlogDocsLog inGet started
Tessl Logo

reveal-hover-effect

Build cursor-following spotlight reveals that expose a second aligned image through a soft radial mask. Use for hover-to-color, before-and-after, x-ray, material, texture, product-detail, and illustrated hero effects where a desaturated or embossed base image should remain visible while another treatment follows an eased pointer.

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

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

This is a high-quality skill body: expert-level, token-efficient, with complete executable markup/CSS/JS, a numbered core contract, and a thorough verification checklist that covers subtle edge cases. The only structural improvement would be moving the optional variant sections into reference files so the main file stays a leaner overview, which is why progressive_disclosure scores 4 rather than 5.

DimensionReasoningScore

Conciseness

The body is lean and assumes Claude's competence: it never explains what CSS masking or requestAnimationFrame is, jumps straight to defaults ("Desktop spotlight radius: 260px", "Pointer easing: 0.1"), complete markup/CSS/JS, and non-obvious edge-case notes ("page coordinates will drift after scroll"). Every section adds information Claude would not reliably produce unaided; it is above level 4 because no padded or over-explained passage remains to trim.

5 / 5

Actionability

The guidance is fully executable and copy-paste ready: complete HTML with alt/aria attributes, a complete CSS mask block with exact gradient stops, and a full JS initializer with eased rAF loop, reduced-motion handling, ResizeObserver, and a teardown/cleanup function — plus concrete numeric defaults and framework guidance ("initialize after mount and call every returned cleanup during unmount").

5 / 5

Workflow Clarity

The "Core Contract" gives a clearly sequenced 7-step build order (prepare aligned images → keep base visible → stack overlay → apply feathered mask → track local coordinates → ease with rAF → collapse on exit), and the "Quick Checks" section supplies an explicit 10-item verification checklist covering edge cases (first-pointermove-without-enter, scroll drift, touch fallback, reduced motion, idle loop shutdown). This matches the anchor requiring clear sequencing with explicit validation steps and checklists; the skill is non-destructive so no batch-validation cap applies.

5 / 5

Progressive Disclosure

The body is well organized into clear, navigable sections (Core Contract, Motion Defaults, Markup, CSS Mask, Pointer Tracking, optional variants, accessibility, performance, checks) and no broken or nested references exist — there are no bundle files at all, so nothing is mislinked. It falls short of level 5 because the ~320-line single file inlines everything, including optional variants ("Optional Grid Parallax", "Nested Glass or Refraction Cards") that could be split into one-level-deep reference files to keep SKILL.md a leaner overview.

4 / 5

Total

19

/

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.

The description is a strong match for the top anchors: it states a concrete capability in third-person voice, provides an explicit "Use for" trigger clause with a rich set of natural effect names, and carves out a distinct niche that is unlikely to fire for the wrong skill. The only mild gap is that it describes a single build action rather than multiple discrete actions, which keeps specificity at 4 rather than 5.

DimensionReasoningScore

Specificity

"Build cursor-following spotlight reveals that expose a second aligned image through a soft radial mask" states one concrete, fully specified action (build the reveal, with masking mechanics), but unlike the level-5 anchor it does not enumerate multiple discrete actions; it is well above level 3 because the mechanism and behavior are concretely described rather than generic.

4 / 5

Completeness

It explicitly answers both what ("Build cursor-following spotlight reveals that expose a second aligned image through a soft radial mask") and when ("Use for hover-to-color, before-and-after, x-ray, material, texture, product-detail, and illustrated hero effects where a desaturated or embossed base image should remain visible..."), matching the anchor with concrete trigger phrases and a clear capability statement in third-person imperative voice.

5 / 5

Trigger Term Quality

The "Use for" clause covers comprehensive natural trigger phrases users would actually say — "hover-to-color, before-and-after, x-ray, material, texture, product-detail, and illustrated hero effects" — plus "spotlight", "reveal", and "cursor" in the capability sentence; no common synonym for this effect is missing (file extensions are not applicable to a visual effect).

5 / 5

Distinctiveness Conflict Risk

The niche is clear (cursor-following spotlight reveal through a soft radial mask) with distinctive triggers (x-ray, spotlight, hover-to-color, desaturated base image); the qualifier "where a desaturated or embossed base image should remain visible while another treatment follows an eased pointer" disambiguates it from the only closely related skill type (before-and-after comparison sliders), keeping conflict risk minimal.

5 / 5

Total

19

/

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.