scroll-craft: an agent skill for scroll-driven websites that enforces a design standard

The failure mode scroll-craft was written against

The README states the problem plainly: most AI website output fails in one of two directions. Either it is well behaved and forgettable, or it is 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. scroll-craft is aimed at neither failure. It treats interaction and craft as one job rather than two.

That framing matters because it sets the audience. This is not for someone who wants a scroll library to import. It is for someone already running a coding agent that can read instructions, edit files, run commands and inspect a browser, and who wants the agent's output constrained by a design standard rather than by whatever the model defaults to. The skill bundles the workflow, references, engine and verification tools in one folder.

There is a second audience implied by the packaging: Claude Code users. The repository ships as a Claude Code plugin for what the README calls convenient installation, which means the skill can be added without manually copying a folder into place.

Eight page grammars and a signature move per build

The mechanism is a set of mutually exclusive constraints, not a template. The README lists eight page grammars: filmic one-shot, chaptered editorial, live surface, continuous world, typographic poster, gallery, split stage, rhythmic cutlist. Each one forbids what the others require, so two builds cannot quietly converge. That is the design intent stated directly: exclusivity is what stops the second page from looking like the first.

On top of the grammar sits a required signature move. Every build invents one bespoke interaction that exists on that site alone, and the README rules out a recoloured spotlight as counting. Then a fingerprint gate: a new build must differ from every page you have already made on at least 4 of 6 dimensions, which are grammar, nav, hero, act shape, close and signature move. Fail the gate and you change the plan, not the record.

The craft side is specified numerically rather than described. A typography floor of two families maximum, tracking that tightens as size grows, a 45 to 75ch measure, line height inverse to measure, and light-on-dark compensated on three axes. A 4px spacing base with more space above a heading than below it, and fluid section padding so a phone does not inherit desktop air. Colour with six roles and one accent, secondary text tinted rather than flat grey, no pure black, and a documented escape for pages that hard-cut between light and dark grounds. Depth as five tools: offset shadows, edge light, scale-and-blur as distance, overlap, and grain.

Two constraints are structural rather than stylistic. The feeling curve comes before any act exists, one line per act giving the emotion and what on screen causes it, and two adjacent acts with the same feeling means one is filler. The peak is singular: peak-end rule applied literally, with the peak taking the asset budget, the silence in front of it, and the most scroll room. The README's own summary is that a page with three peaks has none.

Installing scroll-craft with Codex or another coding agent

The README gives two installation routes. For Codex and other coding agents, clone or download the repository. The complete skill lives in plugins/nateherk-design/skills/scroll-craft/, and the README says to keep that folder intact, including its references and scripts.

git clone https://github.com/nateherkai/scroll-craft

After cloning, point the agent at the skill folder. The repository layout puts the plugin metadata in .claude-plugin/ and the skill itself under plugins/nateherk-design/skills/scroll-craft/, so the path you give the agent is the nested one, not the repository root.

ls plugins/nateherk-design/skills/scroll-craft/

You should see the skill file SKILL.md alongside the references and scripts directories the README refers to. For Claude Code, the README says the skill also ships as a plugin, which is the shorter path if you use that agent. The repository does not spell out the plugin install command, so follow the Claude Code plugin documentation linked from the badge in the README rather than guessing a command.

Imagery generation is optional and gated behind one environment variable. The repository ships a .env.example that documents it.

cp .env.example .env

The file's own comment says to fill in KIE_AI_API_KEY and never commit .env. It also states that the key is only needed if you want scroll-craft to generate imagery and video, and that a fully bring-your-own-assets build is supported, with one of the reference builds shipping with zero generated imagery. So the honest first run is: clone, point the agent at the skill folder, and supply your own photography. Add the key only when you actually want generated assets.

The verification pass is the part that is not a prompt

Most skill-style projects are instruction files. scroll-craft includes a checker, and the README describes what it does in specific terms: a headless browser walks the finished page at every scroll position, waits for the video playhead to settle, and reports four classes of defect.

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 it, with the direction picked per line so light-on-dark and dark-on-light are both graded correctly. Legs stuck on a poster means a clip that silently never decoded, which the README notes looks exactly like a paused film. That last one is the kind of bug that survives a visual review, because a frozen frame and an intentional hold are indistinguishable in a screenshot.

The checker then writes a contact sheet. The README is candid about the limit of this: a machine can prove a page works and cannot tell you it means anything. That sentence is the most useful line in the repository, because it tells you where to spend your own attention. The tooling covers contrast, opacity, dead scroll and decode failure. It does not cover whether the page is worth reading.

What scroll-craft refuses to build

The refuse list is a real design position and it will conflict with some briefs. It rejects 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 every craft brand defaults to.

If your existing design system is built on three-up feature cards with numbered counters, scroll-craft will push against it. The README also says brand guidelines are inputs, not decoration: point it at a brand kit and its hard rules win, including rules that forbid things the skill would otherwise reach for. That is the escape hatch, and it is worth testing early. If your brand kit mandates a gradient headline treatment, the hard rule should override the refuse list, but that interaction is the first thing to verify in a real build rather than assume.

The other limitation is environmental. The verification pass needs a headless browser and a video playhead to settle. In a CI container without browser binaries, or on a project where the hero video is served from a host the checker cannot reach, you lose the part of the skill that distinguishes it from a style prompt. The README does not document a fallback for that case.

How it differs from a scroll animation library

The nearest thing to a competitor in this space is a scroll animation library such as GSAP ScrollTrigger, and the difference is categorical rather than a matter of features. A library gives you an API: you call it, you get a tween tied to scroll position, and the design decisions remain entirely yours. scroll-craft does not give you an API in that sense. It gives an agent a grammar, a set of numeric floors, a refuse list and a checker, and the output is a page rather than a dependency in your bundle.

That means the two are not substitutes. You could use ScrollTrigger as the engine underneath a scroll-craft build, and nothing in the README suggests otherwise. What scroll-craft adds is the part a library deliberately leaves out: which of eight page shapes this page is, where the single peak goes, what the typography floor is, and whether the contrast holds at the brightest frame that passes under each line. A library will happily let you ship 2.1:1 body text. scroll-craft's checker will report it.

The cost of that trade is control and predictability. A library produces the same result every time you call it. An agent skill produces a page, and the README's own framing, that two builds cannot quietly converge, is a promise about variation rather than about reproducibility. If you need a component that behaves identically across fifty marketing pages, this is the wrong tool.

Maintenance, licensing and the cost of generated assets

The repository is MIT licensed, which permits commercial use, modification and redistribution provided the licence and copyright notice are retained. That is the whole of the licence implication here; the repository does not add terms beyond MIT, and nothing in the README suggests a separate commercial tier.

Maintenance status is straightforward from the facts available. The repository is not archived, and the last push was on 2026-09-04. No releases were retrieved, so version 0.3.0 is referenced in the README as the current content revision rather than confirmed as a tagged release. The README says the existing engine and video compatibility fixes are preserved in 0.3.0, which implies there is prior history to preserve, but the repository does not expose a changelog.

Upgrade cost depends on which route you took. If you cloned the repository and pointed your agent at plugins/nateherk-design/skills/scroll-craft/, upgrading means pulling the folder again, and the README's instruction to keep it intact, including references and scripts, is the constraint to respect. If you installed it as a Claude Code plugin, upgrades follow that plugin mechanism instead.

The asset cost is documented in .env.example and is worth reading before you enable generation. Published rates are 28 credits per still and 160 credits per 5-second clip. The file estimates a modest six-act page at around 520 credits and a ten-leg continuous-world flight at closer to 2,000 credits at those rates, then adds that observed billing has run well under the published numbers. Treat the published figures as the ceiling for planning and the observed note as unverified. A bring-your-own-assets build avoids the question entirely.

Editorial conclusion

Adopt scroll-craft if you already drive a coding agent that can read files, run commands and inspect a browser, and you want scroll-driven pages judged against a stated design standard rather than generated freely. Do not adopt it if you want a drop-in JavaScript animation library, or if you cannot give the agent browser access, because the verification pass is the part that separates it from a prompt. Before committing, read the refuse list in the README and check it against your brand guidelines, then confirm which of the ten approved builds your page would be measured against, since the fingerprint gate requires a new build to differ from your previous pages on at least 4 of 6 dimensions.

Frequently asked questions

Official sources

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