scroll-world-storytelling

Turn an article, case study, brand narrative, product journey, or long-form story into a cinematic scroll-driven landing page using one of three renderers: scrubbed video, a real-time Three.js world, or semantic HTML/SVG data and typography. Use when the user asks for a scroll world, fly-through landing page, article-to-website transformation, animated planet, data scrollytelling, video-scrubbed page, connected visual journey, or story-led alternative to ordinary stacked sections.

Quality

96%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Low

Low-risk findings worth noting

Quality

Content

92%

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 lean, highly actionable, well-sequenced workflow with executable code and a strong verification feedback loop. Its one material weakness is progressive disclosure: the SKILL.md points to demo and reference files that are not present in the bundle, leaving dangling references.

Suggestions

Ship the referenced bundle files (demo/video/, demo/threejs/, demo/html-data/index.html, demo/index.html, REFERENCES.md) so the clearly-signaled per-mode references resolve, or inline the minimal per-mode starter content directly in SKILL.md.

If some demo files are optional, mark them as such (e.g. "optional starter") so Claude does not treat every linked file as required-and-missing.

Dimension	Reasoning	Score
Conciseness	The body is dense with non-obvious domain specifics (e.g. "-g 8 -keyint_min 8 -sc_threshold 0", "Cap device pixel ratio at 2", "Dispose geometries, materials, textures, and listeners") and avoids explaining concepts Claude already knows, so every token earns its place rather than padding. It is not below 2 because there is no generic filler or restated basics.	3 / 3
Actionability	It provides copy-paste-ready executable code (the ffmpeg encode block and the concrete `story` JS config object) plus specific actionable guidance per mode (e.g. "Map one normalized scroll value to currentTime; coalesce seeks in requestAnimationFrame"), matching the score-3 anchor for executable commands and specific examples.	3 / 3
Workflow Clarity	The process is clearly sequenced (contract -> read source -> story map -> style bible -> choose mode -> build -> verify) with an explicit 10-item verification checklist and the feedback loop "Repeat: build, verify, close the largest gap. Stop when no material gap remains," matching the score-3 anchor for explicit validation steps and error-recovery loops.	3 / 3
Progressive Disclosure	References are well-signaled and nominally one level deep (per-mode demo dirs and REFERENCES.md), but none of the referenced files actually exist in the bundle (demo/video/index.html, demo/threejs/index.html, demo/html-data/index.html, demo/index.html, REFERENCES.md are all absent), so navigation is broken and cannot earn the score-3 "easy navigation" anchor.	2 / 3
	Total	11 / 12 Passed

Description

100%

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, specific description that clearly defines a distinct niche, names concrete capabilities and renderers, and provides an explicit "Use when" trigger list of natural user terms. It fully satisfies what/when completeness without padding.

Dimension	Reasoning	Score
Specificity	Names multiple concrete actions and three explicit renderers ("scrubbed video, a real-time Three.js world, or semantic HTML/SVG data and typography") across several source types, matching the score-3 anchor for listing multiple specific concrete actions.	3 / 3
Completeness	It explicitly states what it does (turn source material into a scroll-driven landing page via three renderers) and when to use it ("Use when the user asks for a scroll world..."), clearly answering both what AND when with explicit triggers.	3 / 3
Trigger Term Quality	The "Use when" clause covers natural user phrasings ("scroll world, fly-through landing page, article-to-website transformation, animated planet, data scrollytelling, video-scrubbed page, connected visual journey"), giving good coverage of terms a user would actually say.	3 / 3
Distinctiveness Conflict Risk	The niche is narrow and the triggers (scroll world, fly-through, video-scrubbed page, data scrollytelling) are distinct enough to avoid firing for unrelated skills, matching the score-3 anchor for a clear niche with unlikely conflict.	3 / 3
	Total	12 / 12 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: 8 missing, 6 deeper-than-1-level	Warning

	Total	15 / 16 Passed

Repository: MengTo/Skills
Path: agent-skills/web-design/scroll-world-storytelling/SKILL.md
Commit: 46abf78

Reviewed: about 4 hours 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.