scrollcraft

A method for building interactive landing pages where scrolling controls animations, video playback, pinned sections, horizontal movement, and changing page backgrounds.

In plain words
What is it for?
Planning and creating a scroll-driven page, generating visual assets, implementing it in HTML, and reviewing screenshots at different scroll positions.
Why use it?
It helps avoid repetitive pages by defining different interaction patterns, a customer journey, visual rules, and checks across the full scroll experience.

Skill for Claude CodeCodex

Part of the nateherk-design plugin — 1 skill shipped together

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/nateherkai/scroll-craft/scrollcraft
Any agent
npx skills add nateherkai/scroll-craft --skill scrollcraft
Clone the repo
git clone --depth 1 https://github.com/nateherkai/scroll-craft

Made for: Claude Code, Codex.

Or install nateherk-design, the plugin that ships this one along with the rest of its 1 skill.

Per session 246 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 5,323 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00246 $0.05323
Opus 5 $0.00123 $0.02661
Sonnet 5 $0.00049 $0.01065
Haiku 4.5 $0.00025 $0.00532

Measured 3d ago against content hash 7acaec75089f, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

scrollcraft scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 3d ago.

The scan reads SKILL.md. This mod also ships 8 executable files (engine/scrollcraft.js, scripts/doctor.mjs, scripts/encode.sh, …), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

plugins/nateherk-design/skills/scrollcraft/SKILL.md · 416 lines

How it starts

The opening of the file, as written. The whole thing — 416 lines — stays where its author put it; the contents beside it link to each section on GitHub.

scrollcraft

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.

What this is not

It is not "generate a flythrough and drop text on it." That approach produces one device applied to a whole page, and every site built that way is recognisable at a glance: same claymation diorama, same centred copy, same 01 / 06 counter, same "scroll to explore" nudge. Five sections that behave identically are one section shown five times.

Four rules follow from that, and they are the spine of this skill:

  1. Variety is the product. A page uses at least four device families and never the same device twice in a row. Read references/devices.md.
  2. The world is photographic unless the brand is genuinely illustrated. Soft matte low-poly clay diorama is banned as a default. Read references/worlds.md.
  3. No continuous chain. A single unbroken camera flight is the most expensive and most fragile thing you can build, and it exists only to hide cuts between scenes. Vary the device instead and the cut disappears for free, because the visitor is not watching one film. Chain only when the brief is literally "one continuous journey."
  4. A different world is not a different page. The device kit varies how a page looks. Structure is a separate axis, and it has to be decided deliberately or every build inherits the same skeleton. The first four builds did exactly that. Read references/uniqueness.md.

Read the full file on GitHub · 416 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 3d ago First seen · 416 lines · 246 tokens per session scan A 7acaec75089f

Subscribe to this mod's changes

scrollcraft is a skill published in the GitHub repository nateherkai/scroll-craft (1,393 stars, last pushed 10d ago), licensed MIT. It adds 246 tokens to every session and 5,323 once invoked, about $0.0012 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

seo

Optimize for search engine visibility and ranking. Use when asked to "improve SEO", "optimize for search", "fix meta tags", "add structured data", "sitemap optimization", or "search engine optimization".

addyosmani/web-quality-skills · 46 tokens

core-web-vitals

Optimize Core Web Vitals (LCP, INP, CLS) for better page experience using field and lab evidence. Use when asked to "improve Core Web Vitals", "fix LCP", "reduce CLS", "optimize INP", "page experience optimization", or "fix layout shifts".

addyosmani/web-quality-skills · 67 tokens

release

Cut a sim-use release end-to-end. Use when the user runs /release or asks to "ship a release", "publish a version", "cut a release", or "release to homebrew". Drives scripts/local-release.sh; never reimplement its build/sign/tarball logic.

lycorp-jp/sim-use · 61 tokens

agent-desktop-ffi

C-ABI bindings over agent-desktop's PlatformAdapter. Consumers (Python ctypes, Swift, Node ffi-napi, Go cgo, C++, Ruby fiddle) link libagentdesktopffi.{dylib,so,dll} and call ad functions directly instead of spawning the CLI binary per call. The canonical observe-act workflow is: adinit → adadaptercreate[withsession]…

lahfir/agent-desktop · 111 tokens

Accessibility Auditor

Comprehensive WCAG 2.1 AA compliance testing combining automated axe-core scans with manual keyboard navigation, screen reader compatibility, and focus management verification.

PramodDutta/qaskills · 32 tokens

GitHub Hub

Your intelligent GitHub command center -- start here. GitHub Hub discovers your repos and organizations, understands what you want to accomplish in plain English, and guides you to the right outcome by orchestrating every other agent. No commands to memorize. Just talk.

Community-Access/accessibility-agents · 55 tokens