scroll-craft skill
A skill for building premium scroll-driven websites on a real design standard: typography, rhythm, depth, motion and in-browser verification
- 4,997 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- Runs node, ffmpeg and a headless browser and writes build files
- Optionally reaches the network to generate assets with a kie.ai key
Install
- Works in
Manual install
/plugin marketplace add nateherkai/scroll-craft
/plugin install nateherk-designIf prompted, run /reload-plugins to activate.
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Runs node, ffmpeg and a headless browser and writes build files
- Optionally reaches the network to generate assets with a kie.ai key
This is third-party code. Review the repository files before installing.
What it does
The skill guides an agent through building a scroll-driven landing page as a process, not a single animation. It sets a brief, a page grammar chosen from eight mutually exclusive types, a visitor journey map, a feeling curve with one engineered peak, a required unique signature move and a fingerprint gate so builds do not converge. The design rests on an explicit floor: at most two type families, a spacing scale, six colour roles with one accent, five depth tools. Assets come from your own photos and footage or optionally from kie.ai, markup is written as semantic HTML, and a headless browser walks the finished page and checks contrast, dead scroll and undecoded video at every scroll position. It ships as a skill folder for Codex and other agents and as a Claude Code plugin.
Who it is for. For designers and frontend developers who need a non-templated scroll landing page with quality control rather than a generic animation.
Good fit when
- You need a premium scroll landing page that does not look like a template
- You want varied scroll mechanics and in-browser checks of contrast and legibility
- You have a brand guide whose rules should override the defaults
Not a fit when
- You need a simple static site without scroll animations
- You cannot run node, ffmpeg and a headless browser for the build and verification
Example request
Build a scroll landing page for our coffee brand, invent a unique scroll move and verify legibility on mobileLimitations
The build and verification need Node 18 or newer, a full ffmpeg build, and playwright-core with Chrome. Asset generation through kie.ai needs a KIE_AI_API_KEY and spending, but building from your own photos and footage works with no key and no spend. The skill assumes an agent that can read instructions, edit files, run shell commands and inspect a browser, and tool names and skill discovery differ across agents.
How to disable. Remove the nateherk-design plugin via /plugin, or delete the scroll-craft folder from your agent's skills directory.
FAQ
Is a paid key required for images?
No. Asset generation through kie.ai is optional and needs a key, but building from your own photos and footage is a full route with no key and no spend.
Which agents does it work with?
The skill is written for Codex, Claude Code and other agents with file and command support. The ten reference sites were built in Codex, and Claude Code has a plugin.
Discussion
No questions or reviews yet.
Related
SkillsThree skills for memorable websites: scroll scenes and 3D, a scroll audit and a landing page strategy.
A skill for Claude Code and other agents that builds websites directed like films: art direction before code, local CLI asset generation and an anti-slop linter
Two skills: prompts for product animation and a scroll-driven product website, with templates and an acceptance checklist
A free Claude skill that writes a build spec, picks cinematic media, builds a landing page and checks it with screenshots
A skill for Claude Code and Codex that turns AI video and frames into web animation driven by scroll, cursor, touch or device tilt
A skill methodology for reproducing websites, from a static page to heavy WebGL, built on real source code rather than agent-hallucinated code
README in short
The README describes a scroll-site skill that treats interaction and craft as one job. It holds eight mutually exclusive page grammars, a required signature move, a fingerprint gate against repeats, a typography and colour floor and five depth tools. The build runs from your own material or through kie.ai asset generation, then a headless browser checks contrast, dead scroll and undecoded video at every scroll position. It installs as a skill folder for Codex and other agents or as a Claude Code plugin, version 0.3.0. MIT licensed.
README badge
Original SKILL.md
--- name: scroll-craft description: > Build premium scroll-driven landing pages for service, product, food, and drink brands. Plan the visitor journey, page grammar, emotional peak, and bespoke signature move. Create dimensional heroes with independent visual planes, restrained motion, and separate mobile composition. Use supplied photos and footage or generate photoreal assets through kie.ai, write semantic HTML, and verify desktop, mobile, and reduced-motion scroll states visually. allowed-tools: Bash, Read, Write, Edit, Glob, Grep, AskUserQuestion --- # scroll-craft Scroll is the only input every visitor already knows how to use. This skill treats it as a timeline: the wheel is a scrubber, the page is a film with real text on top, and each section behaves differently enough that the visitor keeps going to find out what the next one does. **What you produce:** an interview brief, a page grammar, a customer-journey map, a feeling curve with one engineered peak, a scroll score, one signature move, generated assets, one real HTML page on a token-driven design floor, and a strip of screenshots proving it holds up at every scroll position.