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.

Quality

89%

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

88%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 highly actionable with complete executable code, a clear core-contract workflow, and a verification checklist. It is well-structured and lean, with only minor conciseness and progressive-disclosure refinement possible.

Dimension	Reasoning	Score
Conciseness	The prose is terse and directive and avoids explaining concepts Claude already knows (masks, requestAnimationFrame, getBoundingClientRect), but the document is sizable; it is efficient with only minor trimming opportunities, fitting the 4 anchor.	4 / 5
Actionability	It provides complete, copy-paste-ready HTML markup, CSS mask rules, and a full JS implementation with cleanup and edge-case handling, fully covering the common cases.	5 / 5
Workflow Clarity	A 7-step Core Contract sequence plus an explicit 'Quick Checks' verification checklist gives a clear sequence with validation; the skill is single-purpose and non-destructive, so the unambiguous action and checklist warrant a 5.	5 / 5
Progressive Disclosure	No bundle files exist and all content is inline, but the document is well-organized with clear section headers and optional/advanced sections (Grid Parallax, Nested Cards) kept concise and appropriately placed, matching the 4 anchor.	4 / 5
	Total	18 / 20 Passed

Description

90%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 specific, complete, and distinctive, with an explicit 'Use for' trigger clause covering many natural synonyms. Its only gap is that it describes a single concrete action rather than a list of several, capping specificity at 3.

Dimension	Reasoning	Score
Specificity	It names the domain and one concrete action ('Build cursor-following spotlight reveals that expose a second aligned image through a soft radial mask'), but does not list multiple distinct concrete actions, so it falls at the 3 anchor rather than 4.	3 / 5
Completeness	It explicitly answers both 'what' (build cursor-following spotlight reveals exposing a second aligned image via a radial mask) and 'when' (an explicit 'Use for' clause with concrete trigger phrases), matching the 5 anchor.	5 / 5
Trigger Term Quality	The 'Use for' clause lists seven natural, user-sayable phrases ('hover-to-color, before-and-after, x-ray, material, texture, product-detail, and illustrated hero effects'), giving comprehensive coverage of synonyms for this domain.	5 / 5
Distinctiveness Conflict Risk	The effect is a clear, narrow niche (cursor-following radial-mask image reveals) with distinct triggers, making conflict with other skills minimal.	5 / 5
	Total	18 / 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/reveal-hover-effect/SKILL.md
Commit: 4c716b5

Reviewed: 1 day 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.