scroll-craft: Agent Skill for Scroll-Driven Website Production

The Problem scroll-craft Is Built to Solve

AI-generated websites tend to fail in one of two ways, as the README states directly: they are well-behaved and forgettable, or they are scroll animations with poor contrast, headlines that wrap to six lines on phones, and the same six sections repeated across every output. scroll-craft is designed to fail neither way.

The skill treats interaction and craft as one job rather than two. Most AI website tools separate the visual output from the behavioral design: the AI writes the code, but the decision about when to pin a section, how long to hold it, or whether to have a felt emotional arc across the page is left to the developer. scroll-craft encodes those decisions as constraints the agent must satisfy, not suggestions it can ignore.

Repository Layout and How to Install the Skill

The complete skill lives inside `plugins/nateherk-design/skills/scroll-craft/`. The repository also contains a `.claude-plugin/` directory for Claude Code plugin installation, a `.env.example` file for the optional kie.ai API key, an `EXAMPLES.md` file, and a `media/` directory.

For Codex, the README gives this instruction:

Read plug

The README describes the process: copy the complete `scroll-craft` folder into your project's `.agents/skills/` directory, then ask Codex to use the Scrollcraft skill. For agents with file access but no formal skill directory, the README says to leave the repository in your workspace and ask the agent to read and follow the skill directly. For Claude Code, the skill is also available as a plugin. A badge in the README links to the Claude Code plugin documentation.

The .env.example documents the only external dependency:

KIE_AI_API_KEY=your-key-here

This key is needed only if the agent will generate imagery and video through kie.ai. The README explicitly states that the skill supports a fully bring-your-own-assets build, and one of the reference builds ships with zero generated imagery. Published rates in the .env.example are 28 credits per still and 160 credits per five-second clip, with a note that observed billing has run under those numbers.

Eight Page Grammars and the Fingerprint Gate

The core design constraint in scroll-craft is the page grammar system. The README names eight mutually exclusive types: filmic one-shot, chaptered editorial, live surface, continuous world, typographic poster, gallery, split stage, and rhythmic cutlist. Each grammar forbids what the others require, so two builds cannot quietly converge on the same feel.

Beyond the grammar, every build must include a required signature move: one bespoke interaction that exists on that site alone. A recoloured spotlight does not count according to the README. The fingerprint gate enforces this across builds: a new build must differ from every page already made on at least four of six dimensions (grammar, navigation, hero, act shape, close, and signature move). If it fails the gate, the plan changes, not the record.

The refuse list is explicit and specific. The README bans identical feature-card grids, 01/06 counters, scroll cues, gradient text, em dashes, invented statistics, fake dashboards, AI-purple gradients, and the cream-and-brass artisan palette. This is design enforcement, not a suggestion.

The Feeling Curve, Peak-End Rule, and Typography Floor

scroll-craft requires a feeling curve before any page acts are defined. The README describes it as one line per act: the emotion the act creates, then what on screen causes it. Two adjacent acts with the same feeling mean one is filler and must be removed.

The peak-end rule is applied literally. The peak moment gets the asset budget, the silence in front of it, and the most scroll room. A page with three peaks, by this rule, has none.

The typography floor specifies two typeface families maximum, tracking that tightens as size grows, a line measure of 45 to 75 characters, line height inverse to measure, and light-on-dark compensation on three axes. The spacing scale uses a 4-pixel base with more space above headings than below them. Colour is defined with six roles and one accent, with secondary text tinted rather than flat grey and no pure black. Depth is encoded as five distinct tools: offset shadows, edge light, scale-and-blur as distance, overlap, and grain. These are enumerated constraints, not general principles, which is what makes the skill mechanically applicable by a coding agent.

The Version 0.3.0 Approved Ten-Site Standard

Version 0.3.0 of the skill added what the README calls the approved ten-site standard: documented process from ten real builds including AI Automation Society, PERKFORM, Glaido, Herkules Advisory, Serein, FORME, Pelagic, NOEMA, OFFGRID, and Afterhours. These are not templates. The README is explicit: the differences between the three examples it describes in detail are not themes but different page grammars, different navigation models, and different endings.

The AI Automation Society build is a dark editorial landing page with a single stat carrying the promise and a live product surface rising into the frame as you scroll. The Nate Herk portfolio is high-key and bright, the opposite of the first, with a lit-glass hero. PERKFORM is a filmic one-shot that hard-cuts to two full-bleed inverted grounds mid-page. Three sites, three different grammars, no shared skeleton.

The approved collection documentation and a hero-depth guide are referenced in the README as files inside the `plugins/nateherk-design/skills/scroll-craft/references/` directory. These describe design behavior; client assets and private form data are not bundled.

The Headless Browser Verification Pass

Once a build is complete, scroll-craft runs a headless browser that walks the finished page at every scroll position and reports four specific problems. Dead scroll is scroll that changes nothing on screen. Cues that never reach full opacity are copy the reader can only ever see faded. Contrast is measured on the composited page per line at the brightest frame that ever passes under that line, with the direction picked per line so both light-on-dark and dark-on-light text are graded correctly. The fourth check is legs stuck on a poster: a video clip that silently never decoded, which looks exactly like a paused frame.

The README notes that after the verification pass, a contact sheet is written, because a machine can prove a page works but cannot tell you it means anything. This is an accurate description of what automated verification can and cannot do: the tool catches mechanical failures, but the judgment call about whether the emotional arc lands is still a human decision.

Limitations and What scroll-craft Cannot Do

scroll-craft is a skill file, not a code library. It works by giving a coding agent a set of instructions to follow. This means the output quality depends entirely on the agent's ability to read and execute complex multi-step instructions faithfully. Agents that cannot inspect a live browser or run commands will not be able to complete the verification step.

The kie.ai image and video generation is an external service that requires a paid API key. While the skill supports bring-your-own-assets builds, the creative ceiling for generated imagery is constrained by what kie.ai provides, and the README's credit estimates are based on published rates that may change.

The skill covers front-end scroll-driven pages. It does not cover application backends, user authentication, database-connected content, or server-side rendering. A product that needs scroll-driven marketing pages as a front door but also requires a backend is using scroll-craft for the front-end layer only.

Editorial conclusion

scroll-craft is the right choice for developers and designers who want AI coding agents to produce scroll-driven websites that feel distinct from each other and hold up against real contrast and scroll verification. The eight page grammars and fingerprint gate address the homogenization problem directly: two builds using this skill should not look interchangeable. Engineers who want a simple landing page with no scroll interaction, or who need a backend-driven application rather than a static front-end showcase, will find the design overhead heavier than their situation calls for. Before starting, check whether you need kie.ai-generated imagery or whether you are bringing your own assets: the skill fully supports a bring-your-own-assets build, and the .env.example documents the API key requirement and approximate credit costs.

Frequently asked questions

Official sources

1. Issues
2. License: MIT
3. nateherkai/scroll-craft on GitHub
4. Project website
5. README