scroll-craft

scroll-craft is a community Agent Skill by Nate Herk for building immersive, scroll-driven websites that don't look like every other AI-made page. It brings a full design workflow, reference guides, a small scroll engine and verification tools, and works with Codex, Claude Code and other coding agents that can edit files, run commands and inspect a browser. What you can do with it - Build a landing page for a service, product, food or drink brand where scrolling drives the story: video scrubbing frame by frame, pinned sections, side-panning rails and lines that assemble as you scroll - Start from a brand kit; its rules override the skill's own defaults - Build from your own photos and footage, or generate imagery and video - Check a finished page for dead scroll, text that never fully appears and contrast problems How it works - Each build picks one of eight distinct page structures and invents a signature interaction, and a fingerprint check makes sure it differs from pages you've already built. - It plans a feeling curve with one engineered peak, and follows a design floor for type, spacing, color and depth. It refuses common AI tells such as identical feature-card grids, gradient text, invented statistics and fake dashboards. - A headless browser walks the finished page at every scroll position, measures contrast on the actual frames and writes a contact sheet for review. How to install it - In Claude Code: /plugin marketplace add nateherkai/scroll-craft, then /plugin install nateherk-design. - For Codex and other agents, copy the scroll-craft skill folder into your agent's skills directory. Run its doctor script first. - It needs Node 18 or newer, a full ffmpeg build, and playwright-core with Chrome for the verification pass. Good to know - Generating imagery and video needs your own kie.ai API key and is billed by kie.ai; building from your own assets needs no key and costs nothing. - The maker notes it has only been run on Windows so far. - It's a community project, MIT-licensed.

• “Build a premium scroll-driven landing page for my protein coffee brand.”

  Copy

• “Use our brand kit and these product photos to build the site, no generated assets.”

  Copy

• “Make a dark editorial landing page for our community with one stat carrying the promise.”

  Copy

• “Check this page for dead scroll and contrast problems on phones.”

  Copy

• “Give this build a signature interaction no other page of mine has.”

  Copy