scroll-world-storytelling

scroll-world-storytelling is a skill for Codex from devinilabs/pro-skill. It costs 106 tokens per session (2,582 once invoked), scanned A, a copy of scroll-world-storytelling, MIT.

A guide to turning a long article, case study, brand story, or product journey into a scroll-driven landing page. It uses one visual approach—scrubbed video, a Three.js 3D scene, or semantic HTML and SVG—to reveal the story in stages.

In plain words
What is it for?
Use it to build one-page narrative sites with visual beats, explanatory copy, metrics, charts, typography, and a final action.
Why use it?
It helps organize long-form material into a clear sequence that visitors can follow while scrolling. It also keeps the original facts, caveats, and main message intact.

Skill for Codex

Written for Codex: agents/openai.yaml present.

Good fit Use it to build one-page narrative sites with visual beats, explanatory copy, metrics, charts, typography, and a final action.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/devinilabs/pro-skill/scroll-world-storytelling
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add devinilabs/pro-skill --skill scroll-world-storytelling
Clone the repo
git clone --depth 1 https://github.com/devinilabs/pro-skill

Made for: Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for scroll-world-storytelling

README.md
[![agentmods](https://agentmods.dev/badge/skills/devinilabs/pro-skill/scroll-world-storytelling/github.svg)](https://agentmods.dev/skills/devinilabs/pro-skill/scroll-world-storytelling)
Your own site
<a href="https://agentmods.dev/skills/devinilabs/pro-skill/scroll-world-storytelling"><img src="https://agentmods.dev/badge/skills/devinilabs/pro-skill/scroll-world-storytelling/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for scroll-world-storytelling

Your own site · 80×15
<a href="https://agentmods.dev/skills/devinilabs/pro-skill/scroll-world-storytelling"><img src="https://agentmods.dev/badge/skills/devinilabs/pro-skill/scroll-world-storytelling.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 106 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,582 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin 100% copy Near-identical to another mod in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00106 $0.02582
Opus 5 $0.00053 $0.01291
Sonnet 5 $0.00021 $0.00516
Haiku 4.5 $0.00011 $0.00258

Measured 5d ago against content hash 505caf90b92a, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-08, from the pricing page.

Security

Grade A, and why

scroll-world-storytelling scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 5d ago.

The scan reads SKILL.md. This mod also ships 2 executable files (demo/threejs/assets/three.core.min.js, demo/threejs/assets/three.module.min.js), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

Origin

This is a copy

100% identical to scroll-world-storytelling — 0 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.

agent-skills/web-design/scroll-world-storytelling/SKILL.md · 242 lines

How it starts

The opening of the file, as written. The whole thing — 242 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Scroll World Storytelling

Turn source material into one connected journey. Scroll advances a visual world and the copy reveals the story in deliberate beats.

The skill has exactly three production modes. Choose one primary mode before building:

  1. Video scrub — generated or filmed footage, mapped to scroll.
  2. Three.js world — a real-time 3D object, place, planet, or system.
  3. HTML / data / type — semantic DOM, SVG charts, metrics, and kinetic typography.

Do not mix modes by default. A focused renderer produces a clearer concept, smaller test surface, and more reliable fallback.

Start with the contract

Write these blocks before implementation.

Goal

Turn the supplied story into a one-page journey with 5–7 memorable beats and one final action. A first-time visitor should understand the thesis, tension, mechanism, proof, and payoff without reading the source.

House rules

  • Preserve the source thesis, sequence, facts, and caveats. Never invent proof.
  • Use one connected world, one dominant motion grammar, and one art direction.
  • Let motion carry transitions; let copy explain meaning.
  • Keep one primary CTA. Keep navigation and utility controls quiet.
  • Keep native, reversible document scrolling. Never hijack the wheel.
  • Never spend generation credits, publish, deploy, or replace production files without approval.
  • Keep builder and verifier separate when agents are available.

Bar

  • A visitor can explain the arc after one pass.
  • Scrolling works forward, backward, slowly, and with a fast flick.
  • No visible jump, flash, or unintended reversal at a seam.
  • The page remains legible on mobile and with reduced motion.
  • Every completion claim includes browser, console, responsive, and asset evidence.

Read the whole source

  1. Read the complete article or narrative.
  2. Inspect the target repo, framework, asset pipeline, and current page.
  3. Separate source facts from presentation ideas.
  4. Collect supplied brand assets and 2–3 references when available.
  5. Identify the one action the story should earn.

Read the full file on GitHub · 242 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 5d ago First seen · 242 lines · 106 tokens per session scan A 505caf90b92a

Subscribe to this mod's changes

scroll-world-storytelling is a skill published in the GitHub repository devinilabs/pro-skill (24 stars, last pushed 26d ago), licensed MIT. It adds 106 tokens to every session and 2,582 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it A with 0 findings. It is 100% identical to scroll-world-storytelling, differing in 0 lines, and is treated as a copy.

Related

Other skills, from other repositories

webgl-holographic-foil

A self-contained WebGL2 hero: thin-film interference over a crushed-foil surface whose palette shifts with the viewing angle; move the cursor to tilt the film.

nexu-io/open-design · 41 tokens

general-video

Author or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, static loops, static title cards, footage remixes, and freeform builds. Use motion-graphics instead for a short unnarrated…

heygen-com/hyperframes · 92 tokens

html-ppt-hermes-cyber-terminal

OpenDesign + BYOK: choosing and wiring your own model, hands-on — cost, quality, and the routing decision. Built as a decision-grade AI literacy deck for engineers, IT, applied-AI teams.

nexu-io/open-design · 53 tokens

html-ppt-taste-brutalist

16:9 HTML deck in tactical-telemetry / CRT-terminal taste. Deactivated-CRT charcoal slides, white-phosphor monospace, hazard-red accent, scanline overlay, ASCII syntax, density over decoration. Distilled from Leonxlnx/taste-skill brutalist-skill (Tactical Telemetry mode).

nexu-io/open-design · 78 tokens

diagnostic-stem-delivery

Audio production with diagnostic analysis, timecode parsing from documents, and verified export workflow.

HKUDS/OpenSpace · 23 tokens

chengfeng-check-updates

An environment manager for a video-editing system. It checks whether its skills and runtime—the software needed to run them—are installed and compatible.

Agentchengfeng/chengfeng-videocut-skills · 120 tokens