The page this skill built from examples/kestle, working in your browser. Opens in a new tab. Also: .
19-second example rendered by this skill from examples/kestle · 1280×720
What you get
- A whole page and a paste-in embed of the rail section
- Five card kinds: wide, tall, quote, number with source, and a view-all card
- A scale under the rail with a bracket that tracks what is on screen
- Keyboard, mouse drag, wheel and touch handling that never traps the page
- Checks at 4 widths that also test drag without a click and vertical scrolling
- A frame-by-frame recorder for a preview video
- Two finished examples, light and dark
- Open-source licenses for every part it builds on
Good fit
- An architecture or design practice that wants its best projects as a band on the home page, ending in the full index.
- A food or drinks brand that publishes recipes weekly and wants the latest ones to read as a set, not a slideshow.
- A studio or shop that has one client quote and one measured number to place between its pictures.
Not for
- An auto-rotating hero banner
- A full product catalogue with filters and a cart
- A scroll-pinned story told section by section
- A wall of customer reviews
About this skill
A horizontal rail of rich cards for a home page band, built from one rail.json: case studies, recipes, articles or products. It uses native scroll snapping with the browser's own momentum, and Previous and Next always move exactly one card, whatever its width. Under the rail runs a scale drawn from the cards themselves, so long segments are wide cards and accent segments are quotes, with a bracket that frames exactly what is on screen. Five card kinds share one picture height and one caption line: wide, tall, quote, a number with its source, and a view-all end card. Edge fades never cover the card you snapped to. A mouse drag coasts and never opens a card, and on a phone the page always scrolls past the rail.
Example request
Build a rail of our projects from rail.json: wide and tall picture cards, a client quote and one measured number, each with one claim and a link, native snapping, Next and Previous that move one card, a scale under the rail that shows where you are, and a view-all card at the end.
How it works
Your agent
- 1
Collect the cards
Pick 3 to 14 cards and an end card.
- 2
Write rail.json
Copy
examples/kestle/rail.jsonorexamples/larder/rail.jsonnext to your pictures and change it. - 3
Build
Every problem is listed at once, with the field and the limit, for example
cards[4].source: is required: say how the number was counted. - 4
Check
One line per size with what was measured, for example
✓ 1440x900: 51 text pairs, lowest contrast 1.31× its minimum; 4 steps, 3 snap points; drag, click, wheel. - 5
Look at it
Open the address it prints.
- 6
Put it on the site
Upload
out/as it is. - 7
Record a preview (optional)
The video follows a fixed script, the same frame for frame on any machine: Next twice, a pause on a card (its picture zooms in), a mouse drag that coasts and settles, the last segment of the scale, then the first.
- 1
You get
- out/embed.html
- out/index.html
What you need
- Node.js 18 or newer. Nothing to install.
- Chrome, Chromium or Edge for the check and the recorder (the scripts find it; set
CHROME_PATHif they don't). - The cards' content: for each story a name, a meta line, one claim in a sentence, a link and a picture or loop with its alt text. Pictures: WebP, JPG, PNG or AVIF about 1600 px wide. A loop: an MP4 or WebM under 4 MB with a poster picture. No pictures yet: use the drawn set (below).
- ffmpeg, only for the preview video.
Last checked Nov 9, 2026: the package’s own build and render commands ran and passed.
If something goes wrong
The build says the heading's number disagrees with the rail.
The heading said "Seven projects" but the rail holds 4 story cards. Write
{Count} projectsand the build fills it in; it counts wide and tall cards only. The counter beside the buttons counts every stop, end card included.The build refuses a link.
Links are paths on your site (
/work/x),#anchors, or full addresses on the domain given assite. A card never links to another site.The build refuses the order of the cards.
Two quotes or two numbers in a row, four wide cards in a row, or a first card that isn't a story. Move a story card between them.
What’s in the download
- SKILL.md13.7 KB
- examples/
- examples/kestle/2.66 KB1 file
- examples/larder/2.71 KB1 file
- kit/
- kit/fonts/Geist, Fraunces, IBM Plex Mono and DM Mono as WOFF2, with their licences.
- kit/fonts/dm-mono-OFL.txt4.38 KB
- kit/fonts/fraunces-OFL.txt4.40 KB
- kit/fonts/geist-OFL.txt4.38 KB
- kit/fonts/plex-mono-OFL.txt5.17 KB
- kit/drawn.mjs22.2 KBthe drawn set, eight scenes drawn in code for brands with no photographs yet (two of them move).
- kit/rail.css11.3 KBthe whole design, scoped to
.sr: heading, controls, the rail and its five card kinds, the scale, the fades, tablet and phone rules (container queries, so the embed adapts to its column), reduced motion. - kit/runtime.js16.8 KBthe browser runtime, inlined into every page: one-card steps, the scale and bracket, the counter, the fades, mouse drag with coasting and click suppression, the keyboard, loops in view only, optional autoplay, and the recording clock with its fixed script.
- scripts/
- scripts/kit/
- scripts/kit/build.mjs12.4 KB
- scripts/kit/cdp.mjs4.93 KB
- scripts/kit/check.mjs21.7 KB
- scripts/kit/record.mjs6.92 KB
- scripts/kit/schema.mjs12.6 KBevery field, its limits, the rhythm and colour rules and the count check; lists every problem at once.
- scripts/kit/serve.mjs2.50 KB
- scripts/build.mjs138 Brail.json to
out/index.html(a whole page),out/embed.html(the section alone),out/fonts/andout/media/. - scripts/check.mjs138 Bchecks the built page at 390, 768, 1024 and 1440 px and with reduced motion at 390 and 1440, including keyboard, drag-without-click, wheel and touch scrolling.
- scripts/chrome.mjs3.63 KB
- scripts/record.mjs140 Bthe preview video, stills, and
--moments(the stretches where nothing on the rail moves). - scripts/serve.mjs138 Bserves
out/on localhost to look at. - NOTICE.md1.54 KB
- TESTED.json405 B
23 files · 155 KB · installs to ~/.claude/skills/story-rail-kit for Claude Code and ~/.agents/skills/story-rail-kit for other agents
Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.
Similar Skills
View allDetails
- Output
- Page kit · rail.json → card rail with a scale drawn from the cards
- Needs
- Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
- Series
- Page Kits · 29 skills
- Updated
- Nov 9, 2026
- Checked
- Nov 9, 2026: its own commands ran and passed. That is a working check, not a security audit.
Written for
See all 31 agents that read skill folders.
Install guides
For your agent
Generates with
Installed it? Tell others how it went. Reviews come from people who installed this skill.
Write a reviewFAQ
Will the rail stop people scrolling down the page on a phone?
No. Vertical swipes and the vertical wheel are never captured, so the page always scrolls past the rail. The check swipes vertically over the rail at phone size and fails if the page does not move or the rail moves sideways.
Can a drag with the mouse open a card by accident?
No. A drag starts after 6 px of travel, coasts, and settles on a card in the direction you dragged, and the click that would follow is swallowed. The check drags 300 px and fails if a card opens, then clicks normally and fails if the card does not open.
Does it advance by itself?
Not unless you turn it on. With autoplay on, each card stays at least 6 seconds, it pauses on hover, focus, touch and a hidden tab, a Pause button appears, and it never runs under reduced motion.
Which agents is Story Rail written for?
Any agent that reads SKILL.md folders, including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode.
Do I own what I make with it?
Yes. Everything your agent makes with this skill is yours, including for client and commercial work.
What if it doesn’t work for me?
Email support@lookbk.dev within 7 days of buying and we’ll fix it or refund you.
Credits and licensesWritten by Lookbk
Lookbk wrote this package with its own runtime and no third-party libraries; it ships Geist, Fraunces, IBM Plex Mono and DM Mono under the SIL Open Font License 1.1. Written by Lookbk, no third-party code.
Credits and licenses for the open-source software and fonts it uses are in NOTICE.md inside the download.