nateherkai

Scroll Craft — Design skill for Claude Code

Design community

Claude Code skill for premium scroll-driven websites.

How to install Scroll Craft

This entry records only its repository, not the path inside it, so there is no exact command to give. Open nateherkai/scroll-craft and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Scroll Craft does

Claude Code skill for premium scroll-driven websites. Scroll becomes the timeline, on a real design floor, verified by screenshotting its own scroll.

Alternatives in Design

Interface Design — Design engineering for Claude Code 4.3k ★
Brainwave — Learn to create modern websites with sleek parallax effects and bento box layouts 1.9k ★
Scroll World — Claude Code skill/plugin: immersive scroll-scrubbed 'fly through the world' landing pages generated with Higgs 537 ★

README

scrollcraft

**A Claude Code skill that builds premium, scroll-driven websites, and holds them to a real design standard.**

Most AI website output fails in one of two directions. It is either well behaved and forgettable, or it is a flashy scroll animation with 2.1:1 body text, a headline that wraps to six lines on a phone, and the same six sections every other AI page has. scrollcraft is built to fail neither way: it treats **interaction** and **craft** as one job rather than two.

[![MIT](https://img.shields.io/badge/licence-MIT-blue.svg)](LICENSE) [![Claude Code plugin](https://img.shields.io/badge/Claude%20Code-plugin-d97757.svg)](https://code.claude.com/docs/en/plugins)

Three builds, three completely different pages

Same skill, same engine, no shared skeleton. The differences below are not themes: they are different page grammars, different navigation models, different endings.

Orrery · a travel practice

One unbroken world. The whole page is a single fixed stage: you fall into a handmade scale model of the Earth, land in Kyoto, cross to Patagonia and the Sahara, and rise back to the workbench you started on. No section boundaries anywhere.

![Orrery, a continuous-world scroll flight](media/orrery.webp)

PERKFORM · a protein coffee

A filmic one-shot that hard-cuts to two full-bleed inverted grounds mid-page. Loud, product-forward, and the only one of the three that raises its voice.

![PERKFORM, a filmic one-shot product page](media/perkform.webp)

Fallowbank · a landscape design-build studio

Quiet, documentary, restrained. Museum-label copy over real photography, and a close that is a line of running text rather than a button.

![Fallowbank, a restrained documentary page](media/fallowbank.webp)

What it actually does

**Interaction, engagement, and being unrepeatable**

Scroll is the timeline. Video scrubs frame by frame under the wheel, sections pin while their argument advances, rails pan sideways, headlines assemble li