My reading of the scroll-craft README puts its build rules ahead of the scroll animation. What stands out is the fingerprint gate, which requires a plan change when it fails, and the headless browser pass, which reports problems including contrast on the composited page. Several of its rules are written as things a build may not do.
The problem it names
The README claims the bulk of AI website output fails in one of two directions: well behaved and forgettable, or a flashy scroll animation with 2.1:1 body text, a headline that wraps to six lines on a phone, and the same six sections every other AI page has. Its stated answer is to treat interaction and craft as one job rather than two.
The skill works with Codex, Claude Code, or another coding agent that can read instructions, edit files, run commands, and inspect a browser. The README says agents use their own tools for file access, shell commands, browser inspection, and user questions, while the design workflow is shared. It also ships as a Claude Code plugin, installed with /plugin marketplace add nateherkai/scroll-craft and then /plugin install nateherk-design. For Codex, you copy the complete scroll-craft folder into your project's .agents/skills/ directory. The README notes that the ten-site rebuild it documents was built with Codex.
Rules that stop repetition
The uniqueness rules come first. It defines eight page grammars (filmic one-shot, chaptered editorial, live surface, continuous world, typographic poster, gallery, split stage, rhythmic cutlist) and calls them mutually exclusive, with each one forbidding what the others require. Every build must invent a signature move, one bespoke interaction that exists on that site alone. The README rules out a recoloured spotlight as a candidate.
Then comes the fingerprint gate. A new build must differ from every page you have already made on at least 4 of 6 dimensions: grammar, nav, hero, act shape, close, signature move. If a plan fails, the README says to change the plan, not the record. The registry lives at <workspace>/FINGERPRINTS.md and starts empty, which the README calls correct, since the gate exists to stop you repeating yourself. Your first build has nothing to clear. An EXAMPLES.md file holds the author's twelve-row table, offered as illustration rather than constraint.
A design floor written as numbers
The craft rules read like a style guide with the vague parts replaced by values. Typography gets two families maximum, a 45 to 75ch measure, tracking that tightens as size grows, and line height inverse to measure. Spacing uses a 4px base, more space above a heading than below it, and fluid section padding so a phone does not inherit desktop air. Colour gets six roles and one accent, secondary text tinted rather than flat grey, and no pure black.
Before any act exists, the skill asks for a feeling curve: one line per act naming the emotion and what on screen causes it. Two adjacent acts with the same feeling means one is filler. It also calls for one engineered peak, which gets the asset budget, the silence in front of it, and more scroll room than anything else on the page. A page with three peaks, the README says, has none.
There is a refuse list too. It 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. Brand guidelines count as inputs, not decoration: point it at a brand kit and the kit's hard rules win, including rules that forbid things the skill would otherwise reach for.
The browser check and its stated limit
A headless browser walks the finished page at every scroll position, waits for the video playhead to settle, and reports four kinds of problem. Dead scroll is scroll that changes nothing on screen. Cues that never reach full opacity are copy the reader only ever sees faded. Contrast is measured per line at the brightest frame that passes under it, with the direction picked per line so light-on-dark and dark-on-light are both graded. And a clip stuck on a poster is one that silently never decoded. The requirements table lists playwright-core plus Chrome for this pass, with npm i playwright-core run in the build folder.
After that, it writes a contact sheet. The README gives the reason: a machine can prove a page works and cannot tell you it means anything.
Setup gets its own guard. The README says to run doctor before anything else, because common setup faults otherwise surface later as misleading errors, such as a stripped ffmpeg reporting a missing filter as a syntax error in your command. A full ffmpeg build is needed so clips scrub rather than play. KIE_AI_API_KEY is optional and only matters if you want assets generated; building from your own photos and footage needs no key.
The engine, scrollcraft.js plus its CSS, is never edited per project. You theme it with six colour tokens and two fonts and write your own semantic HTML around it.
GitHub: https://github.com/nateherkai/scroll-craft
Curated by Agent Palisade — practical AI for small and mid-sized businesses.
Top comments (0)