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

95%

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

96%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 lean, highly actionable, and sequenced with explicit validation and feedback loops — a strong example of an instruction-plus-code skill. The only material gap is progressive disclosure: the body signals external reference files that are not present in the bundle.

Suggestions

Add the referenced demo/ launcher and per-mode index.html + PROMPT.md files (or a REFERENCES.md) so the signaled navigation links resolve to real files.

If the demo files are intentionally not bundled, replace the broken links with inline minimal examples or remove the references so navigation is not misleading.

Consider moving the beat-ledger table and style-bible field lists into a single reference file to keep SKILL.md closer to an overview, given the skill's length.

Dimension	Reasoning	Score
Conciseness	The body is directive throughout and assumes Claude's competence — no padding about what Three.js or scroll-scrubbing is — and every section (beat ledger, style bible, ffmpeg flags, viewport list) earns its place for a genuinely complex multi-mode skill.	5 / 5
Actionability	It provides copy-paste-ready executable guidance: a complete ffmpeg encode command with exact flags, a concrete JS story config object, numbered per-mode build steps, and specific responsive widths (390/768/1024/1440) covering the common cases.	5 / 5
Workflow Clarity	A clear contract → read → map → style → choose → build → verify → deliver sequence culminates in an explicit 10-point verification checklist with a build/verify/close-the-gap feedback loop and approval gates for credit-spending and deployment operations.	5 / 5
Progressive Disclosure	In-document structure is excellent with clearly signaled one-level-deep links to demo/video, demo/threejs, demo/html-data, demo/index.html and REFERENCES.md, but none of those referenced files or any references/scripts/assets bundle actually exists, so the navigation they promise is broken.	4 / 5
	Total	19 / 20 Passed

Description

95%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 strong: it pairs a clear capability statement with an explicit, richly varied "Use when" trigger clause covering many natural synonyms. Specificity is slightly capped because the three renderers read as variants of one transformation rather than multiple discrete actions.

Dimension	Reasoning	Score
Specificity	"Turn...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" names the domain and several concrete renderer capabilities, but frames them as one transformation with three modes rather than multiple distinct actions, so it sits just below the comprehensive anchor.	4 / 5
Completeness	It explicitly answers both what (turn source material into a scroll-driven landing page via three renderers) and when (a concrete "Use when..." clause listing trigger phrases), matching the anchor for explicit what-and-when coverage.	5 / 5
Trigger Term Quality	"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" offers comprehensive, natural phrasing with many synonyms a user would actually say.	5 / 5
Distinctiveness Conflict Risk	The niche is specific (cinematic scroll-driven story landing pages) with distinctive trigger vocabulary and minimal overlap risk with unrelated skills.	5 / 5
	Total	19 / 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: 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: 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.