scroll-craft
A skill for building premium scroll-driven websites on a real design standard: typography, rhythm, depth, motion and in-browser verification
Medium risk
We rate an entry medium when the tool runs code, makes network calls or reads project files. Check what exactly it does before installing.
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
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/scroll-craftDetects the agents on your machine, checks the risk and pins the version.
Other ways to install
Run in a terminal in the project folder
npx skills add nateherkai/scroll-craft --skill scroll-craft -a claude-code -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 0b81622
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nateherkai/scroll-craft.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/nateherk-design/skills/scroll-craft/
git -C "$tmp" checkout 0b816225945e45380397d6a0487efa3c98916858
mkdir -p .claude/skills
cp -R "$tmp/plugins/nateherk-design/skills/scroll-craft" .claude/skills/scroll-craftCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add nateherkai/scroll-craft --skill scroll-craft -a cursor -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 0b81622
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nateherkai/scroll-craft.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/nateherk-design/skills/scroll-craft/
git -C "$tmp" checkout 0b816225945e45380397d6a0487efa3c98916858
mkdir -p .agents/skills
cp -R "$tmp/plugins/nateherk-design/skills/scroll-craft" .agents/skills/scroll-craftCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add nateherkai/scroll-craft --skill scroll-craft -a github-copilot -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 0b81622
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nateherkai/scroll-craft.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/nateherk-design/skills/scroll-craft/
git -C "$tmp" checkout 0b816225945e45380397d6a0487efa3c98916858
mkdir -p .github/skills
cp -R "$tmp/plugins/nateherk-design/skills/scroll-craft" .github/skills/scroll-craftCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add nateherkai/scroll-craft --skill scroll-craft -a codex -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 0b81622
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nateherkai/scroll-craft.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/nateherk-design/skills/scroll-craft/
git -C "$tmp" checkout 0b816225945e45380397d6a0487efa3c98916858
mkdir -p .agents/skills
cp -R "$tmp/plugins/nateherk-design/skills/scroll-craft" .agents/skills/scroll-craftCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add nateherkai/scroll-craft --skill scroll-craft -a gemini-cli -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 0b81622
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nateherkai/scroll-craft.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/nateherk-design/skills/scroll-craft/
git -C "$tmp" checkout 0b816225945e45380397d6a0487efa3c98916858
mkdir -p .agents/skills
cp -R "$tmp/plugins/nateherk-design/skills/scroll-craft" .agents/skills/scroll-craftCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nateherkai/scroll-craft.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/nateherk-design/skills/scroll-craft/
git -C "$tmp" checkout 0b816225945e45380397d6a0487efa3c98916858
mkdir -p .devin/skills
cp -R "$tmp/plugins/nateherk-design/skills/scroll-craft" .devin/skills/scroll-craftCommands for macOS and Linux, on Windows run them in Git Bash.
Formerly Windsurf.
Run in a terminal in the project folder
npx skills add nateherkai/scroll-craft --skill scroll-craft -a cline -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 0b81622
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nateherkai/scroll-craft.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/nateherk-design/skills/scroll-craft/
git -C "$tmp" checkout 0b816225945e45380397d6a0487efa3c98916858
mkdir -p .cline/skills
cp -R "$tmp/plugins/nateherk-design/skills/scroll-craft" .cline/skills/scroll-craftCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add nateherkai/scroll-craft --skill scroll-craft -a roo -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 0b81622
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nateherkai/scroll-craft.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/nateherk-design/skills/scroll-craft/
git -C "$tmp" checkout 0b816225945e45380397d6a0487efa3c98916858
mkdir -p .roo/skills
cp -R "$tmp/plugins/nateherk-design/skills/scroll-craft" .roo/skills/scroll-craftCommands for macOS and Linux, on Windows run them in Git Bash.
A fork of Roo Code, same .roo folders.
Run in a terminal in the project folder
npx skills add nateherkai/scroll-craft --skill scroll-craft -a opencode -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit 0b81622
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nateherkai/scroll-craft.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/nateherk-design/skills/scroll-craft/
git -C "$tmp" checkout 0b816225945e45380397d6a0487efa3c98916858
mkdir -p .agents/skills
cp -R "$tmp/plugins/nateherk-design/skills/scroll-craft" .agents/skills/scroll-craftCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nateherkai/scroll-craft.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/nateherk-design/skills/scroll-craft/
git -C "$tmp" checkout 0b816225945e45380397d6a0487efa3c98916858
mkdir -p .agents/skills
cp -R "$tmp/plugins/nateherk-design/skills/scroll-craft" .agents/skills/scroll-craftCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/nateherkai/scroll-craft.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /plugins/nateherk-design/skills/scroll-craft/
git -C "$tmp" checkout 0b816225945e45380397d6a0487efa3c98916858
mkdir -p .agents/skills
cp -R "$tmp/plugins/nateherk-design/skills/scroll-craft" .agents/skills/scroll-craftCommands for macOS and Linux, on Windows run them in Git Bash.
In Claude Code: /plugin marketplace add nateherkai/scroll-craft, then /plugin install nateherk-design. In other agents copy the plugins/nateherk-design/skills/scroll-craft folder into the skills directory and run scripts/doctor.mjs before the first build.
Other ways from the author
/plugin marketplace add nateherkai/scroll-craft
/plugin install nateherk-designIf prompted, run /reload-plugins to activate.
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.
Security check
- Runs node, ffmpeg and a headless browser and writes build files
- Optionally reaches the network to generate assets with a kie.ai key
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.
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.
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.
Related
Official Claude Code plugin from the Next.js repo: adopting Cache Components and Partial Prefetching, and verifying changes on a running dev server
Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules
A frontend design skill with 23 commands, live browser iteration and 61 detector rules for common AI-generated UI tells
Vercel Agent Skills
Agent Skills
Vercel's skills: React and Next.js performance, UI guideline audits, React Native, component composition and deploys