scroll-scrubbed-visual-sequence

Build reversible scroll-controlled visual transformations with a pinned or sticky stage, normalized progress, and video, image-sequence, canvas, SVG, or DOM renderers. Use for hero transformations, product assembly, interface state walkthroughs, object rotation, diagrams, or photo sequences that must move forward and backward with native scrolling.

Quality

92%

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

85%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 concise, actionable, and sequenced with a strong verification checklist, but it references demo/index.html, demo/PROMPT.md, and REFERENCES.md that are not present in the bundle, breaking progressive disclosure.

Suggestions

Ship the referenced bundle files (demo/index.html, demo/PROMPT.md, REFERENCES.md) or remove the links so navigation is not broken.

Add a short runnable snippet for the dependency-free implementation (scroll/resize measurement + one rAF render) to match the concreteness of the GSAP example.

Show the video currentTime coalescing / image-sequence preload-and-cancel pattern as a small code block rather than only as prose bullets.

Dimension	Reasoning	Score
Conciseness	Lean, well-sectioned body that assumes Claude's competence — it never explains what scroll, GSAP, or canvas are, and every line ('Cap device pixel ratio at 2 and redraw only when progress changes') earns its place.	5 / 5
Actionability	Provides executable, copy-paste-ready code for the core cases (progress normalization, the sequence config, the GSAP ScrollTrigger snippet) plus concrete per-renderer techniques, but the dependency-free path is described only abstractly and video/image-sequence seek handling is guidance rather than runnable code.	4 / 5
Workflow Clarity	A clear sequenced flow (Define → Choose → Build → Handle → Preserve → Tune → Verify) culminates in an explicit validation checklist — 'forward and reverse scrolling, fast flicks, resize... reduced motion... The same scroll position must always reproduce the same state' — with a feedback invariant.	5 / 5
Progressive Disclosure	Sections are well-organized and references are clearly signaled one level deep ('Use demo/index.html as the working reference... Keep REFERENCES.md as the links-only implementation source list'), but the referenced files do not exist in the bundle, so the navigation leads nowhere.	3 / 5
	Total	17 / 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 exemplary: third-person voice, concrete capabilities, an explicit 'Use for' clause with natural trigger phrases, and a clearly distinct niche. It answers what and when without padding or over-claims.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete capabilities — 'pinned or sticky stage, normalized progress, and video, image-sequence, canvas, SVG, or DOM renderers' — covering the full renderer surface, matching the comprehensive-coverage anchor.	5 / 5
Completeness	Explicitly states both what ('Build reversible scroll-controlled visual transformations with...') and when ('Use for hero transformations, product assembly...') with concrete trigger phrases, satisfying the top anchor.	5 / 5
Trigger Term Quality	'Use for hero transformations, product assembly, interface state walkthroughs, object rotation, diagrams, or photo sequences that must move forward and backward with native scrolling' gives comprehensive natural use-case phrases a user would actually say.	5 / 5
Distinctiveness Conflict Risk	The scroll-scrubbed visual-sequence niche with specific renderer types and 'must move forward and backward with native scrolling' triggers is distinct and unlikely to fire for unrelated skills.	5 / 5
	Total	20 / 20 Passed

Validation

93%

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 — 15 / 16 Passed

Validation for skill structure

Criteria	Description	Result
relative_links	Relative link issues: 3 missing	Warning

	Total	15 / 16 Passed

Repository: MengTo/Skills
Path: agent-skills/web-design/scroll-scrubbed-visual-sequence/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.