CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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

90%

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

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.

A tight, expert-level body: efficient prose, concrete code, a clear build order, and a strong verification checklist. The main defect is external — the three files referenced at the end are absent from the bundle, which undermines the skill's stated source of implementation links and demo material.

Suggestions

Include demo/index.html, demo/PROMPT.md, and REFERENCES.md in the bundle (or remove the links) so the closing navigation resolves instead of dangling.

Add a short executable snippet for the dependency-free implementation path (scroll/resize measurement plus a single rAF-scheduled render), which is currently only described.

Show the concrete mechanism for one or two media-safety bullets — e.g., how to cancel an in-flight image request or throttle video seeks during fast scrolling.

DimensionReasoningScore

Conciseness

The body is lean and imperative throughout — "Clamp frame indexes to 0...frameCount - 1", "Cap device pixel ratio at 2" — with zero padding and no explanation of concepts Claude already knows. Two short code blocks earn their tokens; every line instructs. Matches the 5 anchor.

5 / 5

Actionability

Executable snippets for the sequence config, progress normalization, and ScrollTrigger setup, plus specific directives ("Encode frequent keyframes", "redraw only when progress changes"). Not 5 because the dependency-free implementation is only described ("measure the section on scroll and resize") rather than shown, and several media-safety bullets (e.g., "Cancel stale image requests") state the goal without the mechanism.

4 / 5

Workflow Clarity

The sections form a coherent build sequence (define → choose renderer → build stage → handle media → access → tune → verify), with a numbered 6-step stage build and a determinism invariant ("The same scroll position must always reproduce the same state"). The Verify section is an explicit checklist covering forward/reverse, fast flicks, resize, viewport widths, reduced motion, and cleanup, matching the 5 anchor's validation and checklist criteria. Not 4 because checkpoints are explicit rather than implicit.

5 / 5

Progressive Disclosure

References to [demo/index.html](demo/index.html), [demo/PROMPT.md](demo/PROMPT.md), and [REFERENCES.md](REFERENCES.md) are clearly signaled and one level deep, but none of these files exist in the bundle, so the navigation they promise is broken. Not 4 because missing referenced files are more than a minor organization gap; not 2 because the body itself is well-sectioned and self-contained in its guidance.

3 / 5

Total

17

/

20

Passed

Description

92%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: it states a concrete capability set in third person, enumerates renderer options, and closes with an explicit 'Use for' clause containing natural trigger scenarios. The only gap is a few common synonyms users might say (e.g., 'scroll animation', 'video scrubbing') that are not covered.

DimensionReasoningScore

Specificity

The description enumerates concrete capabilities: "Build reversible scroll-controlled visual transformations with a pinned or sticky stage, normalized progress, and video, image-sequence, canvas, SVG, or DOM renderers" — multiple specific actions with comprehensive renderer coverage. Not 4 because coverage of the what is complete rather than having minor gaps.

5 / 5

Completeness

Explicitly answers both what ("Build reversible scroll-controlled visual transformations...") and when ("Use for hero transformations, product assembly, ... that must move forward and backward with native scrolling"). Matches the 5 anchor with concrete trigger phrases; a missing or weak 'Use when' clause would cap this at 3, which is not the case here.

5 / 5

Trigger Term Quality

Good natural triggers such as "hero transformations", "product assembly", "interface state walkthroughs", "object rotation", "diagrams, or photo sequences", but common user phrasings like "scroll animation", "video scrubbing on scroll", or "Apple-style scroll effect" are missing. Not 5 because synonym/colloquial coverage is incomplete; not 3 because the included terms are natural, not jargon-only.

4 / 5

Distinctiveness Conflict Risk

"Reversible scroll-controlled visual transformations" with "pinned or sticky stage" and "normalized progress" carves a clear niche with distinct triggers; minimal overlap risk with generic animation or layout skills. Not 4 because the trigger list (scroll-driven, reversible, scrub-style sequences) is not shared with closely related skills.

5 / 5

Total

19

/

20

Passed

Validation

93%

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

CriteriaDescriptionResult

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

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.