# Story Rail

> 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.

- Output: Web, Page kit · rail.json → card rail with a scale drawn from the cards
- Price: Free
- Page: https://lookbk.dev/skills/story-rail-kit

## 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_PATH` if 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.

## Install

```bash
curl -fsSL https://lookbk.dev/cli.js | node - add story-rail-kit
```

The first run prints a sign-in link; open it, approve, and run the command again.

Where it installs:

- Run by Claude Code: `~/.claude/skills/story-rail-kit` only, the one folder Claude Code reads.
- From your own terminal: `~/.agents/skills/story-rail-kit`, which Codex, Gemini CLI, Copilot CLI, Cursor and OpenCode read, and also `~/.claude/skills/story-rail-kit` when `~/.claude` exists.

Add `--claude` or `--shared` to write only one of those folders, or `--project` to install into the current folder instead. Start a new agent session afterwards so it picks up the skill.

Credits and licenses: NOTICE.md plus any LICENSE files inside the ZIP.

## 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.