CtrlK
BlogDocsLog inGet started
Tessl Logo

scrollytelling-and-parallax-data-visualization

Design and implement parallax scrolling and scrollytelling data visualizations. Use when the user asks for parallax scrolling, scrollytelling, scroll-driven timelines, sticky graphics, Scrollama, ScrollTrigger, ScrollTimeline, view timelines, rich-media timelines, moviescrollers, scroll-scrubbed charts, staged narrative reveals, or interactive visual stories where scrolling changes a data visualization or media scene.

69

Quality

85%

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

70%Weight 40%Scale 1-3

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body is a well-structured, high-signal overview for a complex scrollytelling skill, with a clear sequenced workflow, validation/testing checkpoints, and clean one-level-deep references to real bundle files. It loses points on conciseness and actionability: some enumerations are exhaustive, and the executable build detail is delegated to references without inline examples.

Suggestions

Tighten the long inline enumerations (e.g. step 5's ~15 scene-declaration fields, step 8's library list, and the Output Expectations bullets) into a compact checklist or move the exhaustive field schema into the story-patterns reference.

Add one small inline scene-data example (e.g. a 4-field object literal showing text/visual-state/scroll-trigger/static-fallback) so 'Model scenes as data' is actionable without opening a reference.

Consolidate the repeated ../../references/foundations/... path strings (they appear in both Working Pattern and References) to reduce repetition and token cost.

DimensionReasoningScore

Conciseness

It never explains concepts Claude already knows (no 'what is IntersectionObserver'), but several passages are over-enumerated — e.g. step 5 lists ~15 scene-declaration fields in one sentence and step 8/output expectations stack long tech lists — so it is mostly efficient but could be tightened rather than fully lean.

2 / 3

Actionability

It names concrete tools per scenario (Scrollama, GSAP ScrollTrigger, CSS ScrollTimeline, position: sticky) and routes to specific sibling skills, but the executable 'how' (e.g. 'Model scenes as data') is deferred to references with no inline data-structure or code example, leaving guidance specific in naming but incomplete in build detail.

2 / 3

Workflow Clarity

An explicit 11-step Working Pattern is clearly sequenced and includes validation checkpoints — step 11 tests scroll jank/layout thrashing/reduced-motion/keyboard/mobile, and step 7 has a remediation conditional ('if the scene only adds drama, simplify or add real evidence') — matching the clear-sequence-with-validation anchor.

3 / 3

Progressive Disclosure

The body is an overview/working pattern that signals one-level-deep references to three verified local bundle files (story-patterns, implementation-and-performance, accessibility-testing) via a clear References section, with detail appropriately split out rather than inlined.

3 / 3

Total

10

/

12

Passed

Description

100%Weight 40%Scale 1-3

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 actions, an explicit 'Use when' trigger, and a rich set of natural trigger terms covering both generic and library-specific phrasings. It clearly distinguishes the skill's niche from neighboring visualization skills.

DimensionReasoningScore

Specificity

Lists multiple concrete actions ("Design and implement parallax scrolling and scrollytelling data visualizations"), matching the score-3 anchor of several specific concrete actions rather than a single named action.

3 / 3

Completeness

Explicitly answers both what ("Design and implement...") and when ("Use when the user asks for..."), satisfying the explicit-trigger requirement; a missing 'Use when' clause would cap this at 2, but it is present.

3 / 3

Trigger Term Quality

Broad coverage of natural terms users would say — parallax scrolling, scrollytelling, scroll-driven timelines, sticky graphics, Scrollama, ScrollTrigger, ScrollTimeline, moviescrollers — matching the good-coverage anchor.

3 / 3

Distinctiveness Conflict Risk

A clear niche (scroll-driven data-viz narrative) with distinct, specific triggers unlikely to fire for unrelated skills; not the generic 'works with documents' level 2.

3 / 3

Total

12

/

12

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.

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
openai/plugins
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.