CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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.

68

Quality

86%

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

75%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 well-organized instruction-only skill body: efficient, highly actionable decision guidance with a clear sequenced workflow and a real three-file reference bundle. The main gaps are the absence of any concrete scene-contract example (the skill's central artifact), some jargon-dense enumerations that could be trimmed, and a bare References list lacking per-file descriptions.

Suggestions

Add a minimal example scene contract in Working Pattern step 5 (a short YAML/JSON scene with text, visual state, trigger range, and reduced-motion fallback) so the skill's core data model is executable rather than implied.

Annotate the References section entries with a one-line description of each file's purpose, e.g., '**Scene contracts**: See [story-patterns-and-scene-contracts.md](references/story-patterns-and-scene-contracts.md) for narrative patterns and scene schemas'.

Trim the compound-noun catalogs in steps 5 and 6 (visual-density role, asset-continuity requirement, etc.) to the fields that change decisions, or move the full field list into story-patterns-and-scene-contracts.md.

DimensionReasoningScore

Conciseness

The body is dense and assumes competence — no library tutorials, no 'what is parallax' padding — and every section carries novel guidance (routing table, browser contract, technique chooser). It falls short of 5 because of run-on compound-noun enumerations like 'visual-density role, interactive discovery affordance, asset-continuity requirement, scroll-controlled media behavior' in step 5, which could be trimmed or pushed to a reference without losing meaning.

4 / 5

Actionability

Concrete, executable decision rules dominate: 'native scroll and position: sticky for pinning / IntersectionObserver or Scrollama for step triggers / Motion or GSAP ScrollTrigger for complex React choreography', plus a precise routing table and verified reference files. Not a 5: the core artifact — the scene contract — is never shown; a minimal example scene object (trigger range, visual state, fallback) would make step 5 copy-paste ready instead of leaving the reader to infer the schema.

4 / 5

Workflow Clarity

The 11-step Working Pattern is clearly sequenced with validation checkpoints — step 7 ('If the scene only adds drama, simplify or add real evidence') is an explicit fix loop, and step 11 plus the acceptance criteria in Output Expectations act as test checklists. Not a 5: the error-recovery path is one-line rather than a validate-fix-retry loop, and steps 2-6's branching (fictional / art-directed / embedded layers) interleaves conditions inside a flat sequence.

4 / 5

Progressive Disclosure

Good structure overall: ~100-line overview with technique selection, routing, and expectations kept in SKILL.md while detail lives in three real, clearly listed one-level-deep bundle files (all verified present in ./references/). Not a 5: the References section is a bare path list with no per-file description ('**Scene contracts**: See ...' style is the top anchor), and 3 of 6 referenced paths (`../../references/foundations/*`) point outside the bundle where their existence cannot be signaled or verified by a reader of this skill alone.

4 / 5

Total

16

/

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.

A strong description with excellent trigger coverage and explicit what/when structure. The only weakness is that the capability statement relies on just two verbs ('Design and implement') — enumerating two or three more concrete actions (storyboarding scene contracts, choosing implementation libraries, providing reduced-motion fallbacks) would lift specificity to the top anchor.

Suggestions

Expand 'Design and implement' into 3-4 concrete actions, e.g., 'Design scroll-driven narratives, storyboard scene contracts, choose the lightest implementation library, and build accessible reduced-motion fallbacks.'

Consider adding a file-format or tool-extension cue (e.g., 'ScrollTrigger', already present) alongside a plain-language synonym like 'scroll-linked chart' to widen natural-user phrasing coverage.

DimensionReasoningScore

Specificity

The description names the domain ('parallax scrolling and scrollytelling data visualizations') with exactly two concrete actions — 'Design and implement' — matching the anchor 'Names domain and 1-2 concrete actions, but not comprehensive'. It is not a 4 because 'several specific actions' (e.g., storyboard scenes, build scroll-scrubbed charts, pin sticky graphics) are not enumerated, only implied through the trigger list.

3 / 5

Completeness

It explicitly answers both questions with concrete trigger phrases: 'what' is 'Design and implement parallax scrolling and scrollytelling data visualizations' and 'when' is 'Use when the user asks for... [12 concrete triggers]'. This matches the anchor 'Clearly and explicitly answers both what AND when with concrete trigger phrases'.

5 / 5

Trigger Term Quality

Trigger coverage is comprehensive and natural: 'parallax scrolling, scrollytelling, scroll-driven timelines, sticky graphics, Scrollama, ScrollTrigger, ScrollTimeline, view timelines, rich-media timelines, moviescrollers, scroll-scrubbed charts, staged narrative reveals' — covering synonyms, library names, and API names a user would actually say. No common variation is missing.

5 / 5

Distinctiveness Conflict Risk

Scroll-driven narrative visualization is a clear niche, and every trigger term is scroll-specific ('scroll-scrubbed', 'sticky graphics', 'Scrollama'), minimizing conflict with general charting or animation skills. Not a 4: even the broadest trigger ('interactive visual stories') is immediately qualified by 'where scrolling changes a data visualization or media scene'.

5 / 5

Total

18

/

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

openai/plugins

Path

plugins/build-web-data-visualization/skills/scrollytelling-and-parallax-data-visualization/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.