Build Premium Scroll-Driven Websites With scroll-craft

Ask a coding agent for an immersive landing page and you usually get one of two failures: a well-behaved page nobody remembers, or a flashy scroll animation with 2.1:1 body text and the same six sections as every other AI page. scroll-craft, a 4k-star agent skill, is built to fail neither way — it pairs a scroll engine with a written design standard and a verification pass that walks the finished page in a headless browser.

Why This Skill Matters

scroll-craft treats interaction and craft as one job. On the interaction side, scroll is the timeline: video scrubs frame by frame under the wheel, sections pin while their argument advances, and headlines assemble line by line. The skill enforces structure through three mechanisms the README documents:

• Eight mutually exclusive page grammars — filmic one-shot, chaptered editorial, live surface, continuous world, typographic poster, gallery, split stage, rhythmic cutlist. Each forbids what the others require, so two builds cannot quietly converge.
• A required signature move — every build invents one bespoke interaction that exists on that site alone.
• A 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.

On the craft side, it plans a feeling curve before any act exists, engineers one peak per page, and carries a refuse list — including identical feature-card grids, 01 / 06 counters, scroll cues, gradient text, em dashes, invented statistics, fake dashboards, and AI-purple gradients — that names the patterns making AI pages recognizable.

Installation

For Claude Code, install it as a plugin:

/plugin marketplace add nateherkai/scroll-craft

/plugin install nateherk-design

If the install summary says Run /reload-plugins to activate., run that. Then describe what you want, or invoke it directly with /nateherk-design:scroll-craft.

For Codex and other coding agents, copy the complete plugins/nateherk-design/skills/scroll-craft/ folder into your project's .agents/skills/ directory, keep its references, scripts, templates, and engine intact, and ask the agent to use the Scrollcraft skill.

Real Workflow: Build and Verify a Product Landing Page

Before the first build, run the doctor and workspace scripts from the repository root:

node plugins/nateherk-design/skills/scroll-craft/scripts/doctor.mjs
node plugins/nateherk-design/skills/scroll-craft/scripts/workspace.mjs --ensure

The README is explicit about why doctor comes first: a stripped ffmpeg reports a missing filter as a syntax error in your command, and a missing WebP muxer reports as a bad filename — both surface later as misleading errors. Requirements are Node 18+, a full ffmpeg build, and playwright-core plus Chrome installed in the build folder for the verification pass. A KIE_AI_API_KEY is only needed if you want assets generated; building from your own photos and footage needs no key and is a first-class route.

Then brief the agent:

用 scroll-craft 给我的新产品做一个发布页：深色、编辑感的产品叙事，主角是一个可以直接操作的界面。开始前先告诉我你选了哪种页面语法、感觉曲线怎么走、标志性交互是什么。

The skill picks one of the eight grammars, plans the feeling curve, builds the page on the shared engine, and then checks its own work: a headless browser walks the finished page at every scroll position and reports dead scroll, cues that never reach full opacity, contrast measured per line on the composited page, and video legs that silently never decoded. It finishes with a contact sheet, because a machine can prove a page works and cannot tell you it means anything.

Tips

• Theme with six colour tokens and two fonts, and write your own semantic HTML — the README's one rule that matters most is that the engine is never edited per project.
• Your fingerprint registry starts empty, and that is correct: the gate stops you repeating yourself, so only the second and later builds have anything to clear.
• Version 0.3.0 adds the process behind ten approved sites (AI Automation Society, PERKFORM, Glaido, Herkules Advisory, Serein, FORME, Pelagic, NOEMA, OFFGRID, and Afterhours) — the README links the worked examples.
• The skill checks a branded page honestly too: point it at a brand kit and its hard rules win, including rules that forbid things the skill would otherwise reach for.
• The CHANGELOG records what broke on each build and the rule that came out of it, rather than a feature list.

When Not to Use This

The README's honest limitations are worth reading first. Every build so far ran on Windows — the scripts look for ffmpeg and Chrome in macOS and Linux locations too, but no build has been done on a Mac (SCROLLCRAFT_FFMPEG and SCROLLCRAFT_CHROME override the search). Generated video is a real spend if you request AI assets; a page built from your own materials costs nothing. And it is opinionated on purpose — if you want a page that looks like everything else, the README itself calls this the wrong tool.

See the leaderboard for more skills.