Chapter Scroll Atlas
Build a chapter-based scrollytelling website with a synchronized schematic route map, accessible chapter links and reduced-motion controls. Use for narrative journeys rather than geographic navigation. Original Skilly implementation with structured input, local assets and editable output.
A little less setup
Make this part of your toolkit.
Give your agent this prompt. You’ll approve access in your browser before it installs a Skill.
Read https://skilly.uk/install/skills/chapter-scroll-atlas.md and follow the instructions to install this Skill for my agent.REAL SAMPLE / RELEASED PACKAGE
RELEASED v1.0.0A closer look at the actual output.
Actual generated output from the included brief. Sample brands, artworks, credits and places are explicitly fictional.
THE COMPLETE TEMPLATE
Try it. Make yourself at home.
Scroll inside, explore the pages, and try the controls. Choose Open for downloads, printing, or external links.
1440 × 900 canvas · scaled evenly to fitUse the preview’s own scroll and keyboard controls.
Inside this template
3 sections- TAKE THE SLOW WAY HOME.
- Chapters and route map
- A map is a beginning. Attention is the journey.
A GUIDED LOOK
The whole story, in motion.
A screen recording of this working demo, covering 3 sections. This is a guided preview, not a video exported by the Skill.
In this walkthrough
- TAKE THE SLOW WAY HOME.
- Begin at the water.
- A map is a beginning. Attention is the journey.
- Tested runtime
- Node.js 24.19.0 · macOS arm64 · Chromium 153.0.8010.12
- Pinned dependency
- Native HTML/CSS/JavaScript; bundled local OFL fonts
- Checks completed
- Scroll/route agreement, map anchors, next/previous bounds, Home/End, reduced motion, long captions, and no-script content. Normal/edge briefs at 1440, 390 and 320 px; no external requests or browser errors in these runs.
Author normal/edge checks and independent new-brief workflow reviewed; tested scope and limitations apply.
Author verification completed; independent agent workflow and final archive review pending. Emulated viewports do not certify real-device behavior or full accessibility.
From a good brief to a better result.
Build a chapter-based scrollytelling website with a synchronized schematic route map, accessible chapter links and reduced-motion controls. Use for narrative journeys rather than geographic navigation. Original Skilly implementation with structured input, local assets and editable output. The published package has its own version, tested environments, and included outputs listed alongside this overview. Any earlier draft samples below retain their original verification scope.
What you bring
- Three to eight narrative chapters and schematic positions
- A structured JSON brief and a new output directory
What you’ll make
- Editable long-form chapter website
- Schematic SVG route with linked chapter markers
- Scroll synchronization, keyboard controls and static fallback
The intended workflow
- Shape a brief around the actual user task
- Generate the editable site with local assets
- Review the content, keyboard behavior and narrow layouts