CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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

87%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Low

Low-risk findings worth noting

SKILL.md
Quality
Evals
Security

Quality

Content

73%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 a well-sequenced, disciplined instruction set with a real validation loop and concrete parameters, and it wastes few tokens. Its critical defect is that the entire progressive-disclosure scheme points at files that do not exist in the bundle, which both invalidates the file structure and leaves the core runtime implementation (scroll conductor, chapter mapping, fallbacks) unreachable.

Suggestions

Ship the referenced files or remove the references: every pointer in the body ([demo/index.html](demo/index.html), [demo/video/index.html](demo/video/index.html), [demo/video/PROMPT.md](demo/video/PROMPT.md), [demo/threejs/*](demo/threejs/index.html), [demo/html-data/*](demo/html-data/index.html), [REFERENCES.md](REFERENCES.md)) currently resolves to a file that is absent from the bundle.

If the demo files cannot be bundled, inline a minimal working scroll-conductor snippet (normalized scroll value → chapter state with rAF seek coalescing) so the core runtime guidance is executable from SKILL.md alone.

Trim redundancy between the House rules / Bar sections and the 10-point verification checklist, and drop explanations that restate the pinned ffmpeg command ("Use one codec and encode profile across every clip").

DimensionReasoningScore

Conciseness

The body is dense and prescriptive throughout with no explanations of concepts Claude already knows — every section is skill-specific constraint (beat ledger fields, style bible, encoder flags). A few spots could be trimmed, e.g. "Use one codec and encode profile across every clip" overlaps the pinned ffmpeg command, and the House rules / Bar sections repeat constraints also implied by the verification checklist. This is 'efficient; minor instances of over-explanation that could be trimmed', not the lean anchor-5 where every token earns its place.

4 / 5

Actionability

There is a copy-paste ffmpeg encode command, a concrete JS story-config example, and precise numeric parameters (scroll weight 0.7–1.8 viewport heights, DPR cap of 2, widths 390/768/1024/1440, 6–15 second clips). However the actual runtime implementation (scroll conductor, chapter mapping, fallback wiring) is delegated to demo files via pointers like "Use [demo/video/index.html](demo/video/index.html)" — and those files are not in the bundle, so a large part of the executable guidance is unreachable. Mostly executable guidance with minor-to-material gaps, fitting anchor 4 rather than the fully copy-paste-ready anchor 5.

4 / 5

Workflow Clarity

The sequence is explicit and well-ordered: contract (goal/house rules/bar) → read source → story map → style bible → choose one mode → mode-specific build → shared page contract → verify → deliverables. Validation is explicit: a 10-point verification checklist covering story, timing, reverse scroll, performance, responsive, accessibility, integrity, console, and mode proof, followed by a genuine feedback loop — "Repeat: build, verify, close the largest gap. Stop when no material gap remains against the bar." This matches the top anchor of clear sequence with explicit validation steps, feedback loops, and a checklist for a complex process.

5 / 5

Progressive Disclosure

The in-body organization is good and references are clearly signaled one level deep, but the disclosure structure is fictional: the bundle contains no demo/ directory and no REFERENCES.md, so every referenced path — [demo/video/index.html](demo/video/index.html), [demo/threejs/PROMPT.md](demo/threejs/PROMPT.md), [demo/html-data/index.html](demo/html-data/index.html), [demo/index.html](demo/index.html), and [REFERENCES.md](REFERENCES.md) — is broken. Scoring against the actual bundle structure, navigation to the detailed material is impossible, which is a worse failure than anchor 3's 'references present but not clearly signaled'; the structure is present in name only.

2 / 5

Total

15

/

20

Passed

Description

96%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 that explicitly answers what and when, enumerates inputs, outputs, and all three renderer modes, and packs in natural trigger synonyms. The only weakness is slight overlap risk with generic landing-page and 3D-skill requests from its broader trigger terms. No suggestions needed; this is close to the reference good examples in structure and density.

DimensionReasoningScore

Specificity

The description lists multiple concrete capabilities with comprehensive coverage of its domain: "Turn an article, case study, brand narrative, product journey, or long-form story into a cinematic scroll-driven landing page" enumerates the input types, the output artifact, and all three implementation modes ("scrubbed video, a real-time Three.js world, or semantic HTML/SVG data and typography"). This matches the anchor for multiple specific concrete actions with comprehensive coverage, not the anchor below it, which requires minor gaps in coverage.

5 / 5

Completeness

Both what and when are explicitly answered: the first sentence states what the skill does and how, and the "Use when the user asks for..." clause gives concrete trigger phrases. This mirrors the anchor example that clearly and explicitly answers both what AND when, and is clearly not the anchor-4 case where 'when' could be more explicit.

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" covers natural synonyms and phrasings comprehensively, including informal ones ("scroll world") and a contrast phrasing ("story-led alternative to ordinary stacked sections"). This is comprehensive natural-term coverage including synonyms, matching the top anchor rather than the 'a few natural terms missing' anchor below.

5 / 5

Distinctiveness Conflict Risk

The niche (scroll-driven storytelling landing pages) and its triggers ("data scrollytelling", "video-scrubbed page") are distinct, but broader terms like "landing page" and "animated planet" have minor overlap risk with generic web-page and Three.js skills. This fits 'mostly distinct; minor overlap risk with closely related skills' better than the anchor-5 'minimal conflict risk', since a plain request to build a landing page could plausibly route here over a general web skill.

4 / 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: 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

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.