#294 by GitHub stars

nateherkai/scroll-craft

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 photo

History

Review weekly changes to SKILL.md before updating. Dates mark the weeks in which we observed each version; checks apply to the recorded commits.

View weekly changes

plugins/nateherk-design/skills/scroll-craft/SKILL.md

Week of Nov 2, 2026 · +0 / −0 lines

Before Network or broad shell → After Network or broad shell

75d81f74e836 → 75d81f74e836

Compare on GitHub

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Network or broad shell

First observation → 75d81f74e836

No earlier version was observed for comparison.

Compare on GitHub

View on GitHubAdd to my skills

Verified commit 75d81f74e83692add18cd7a8a8e078b8a887a579

git clone --filter=blob:none --no-checkout https://github.com/nateherkai/scroll-craft.git .hotskills/nateherkai-scroll-craft && git -C .hotskills/nateherkai-scroll-craft checkout --detach 75d81f74e83692add18cd7a8a8e078b8a887a579 # Copy each selected skill directory from .hotskills/nateherkai-scroll-craft into .claude/skills/<skill-name>/
4.6kGitHub stars
360stars in 7 days
1skill in this repository
0commits in 30 days

Heat

6.8
  • Star growth, last 7 daysAhead of 98% of tracked repositories
  • Star growth, last 24 hoursAhead of 98% of tracked repositories
  • Rank movement, last 7 daysAhead of 68% of tracked repositories
  • Commits, last 30 daysAhead of 0% of tracked repositories
  • Accounts asking about it through MCP, last 7 daysNot available
  • Hot votes this weekAhead of 0% of tracked repositories

Heat never changes the order by stars, and sponsorship never touches it. How heat works

Stars over time

Aug 16, 2026Nov 6, 20264,626

Individual skills in this repository

How it works

scroll-craft

When your agent uses it

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. Use for "scrollcraft", "scroll craft", "layered hero", "premium hero", "cinematic hero", "scrollytelling", "scroll animation site", "a site where scrolling plays a video", "Apple-style landing page", "3D scroll world", "interactive landing page", "make my brand a scroll experience", "this looks like a template", or requests for a distinctive website that feels like an experience rather than a document.

What it loads into context

Frontmatter

221 tokens

Always available to the agent

SKILL.md

5,893 tokens

When the skill is activated

Reference documents

47,526 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

  1. What this is not
  2. Standing hero preference
  3. Approved collection standard
  4. Step 0: The brief and creative authority
  5. Bootstrap
  6. Step 1: The brief, journey first
  7. Step 2: Grammar, gate, then score
  8. Step 3: Generate the assets
  9. Step 4: Build the page
  10. Step 5: Verify by scrolling it
  11. Hard rules
  12. Output

Scripts executed separately

  • engine/scrollcraft.js
  • scripts/doctor.mjs
  • scripts/encode.sh
  • scripts/kie.mjs
  • scripts/serve.mjs
  • scripts/shoot.mjs
  • scripts/workspace.mjs
  • scripts/worldflight-assert.mjs

Files

  • ../../../../.claude-plugin/marketplace.jsonasset600 bytes
  • ../../.claude-plugin/plugin.jsonasset494 bytes
  • CHANGELOG.mddoc35,142 bytes
  • SKILL.mdcore24,993 bytes
  • SKILL.mdcore24,993 bytes
  • SKILL.mdcore24,993 bytes
  • SKILL.mdcore24,993 bytes
  • SKILL.mdcore24,993 bytes
  • SKILL.mdcore24,993 bytes
  • SKILL.mdcore24,993 bytes
  • SKILL.mdcore24,993 bytes
  • engine/scrollcraft.cssasset19,769 bytes
  • engine/scrollcraft.jsruns62,176 bytes
  • references/approved-collection.mddoc11,650 bytes
  • references/assets.mddoc13,194 bytes
  • references/device-diag.htmlasset9,149 bytes
  • references/devices.mddoc26,648 bytes
  • references/feel.mddoc13,181 bytes
  • references/hero-depth.mddoc6,260 bytes
  • references/taste.mddoc14,874 bytes
  • references/template.htmlasset6,418 bytes
  • references/uniqueness.mddoc23,527 bytes
  • references/verify.mddoc24,189 bytes
  • references/worldflight.mddoc16,155 bytes
  • references/worlds.mddoc8,046 bytes
  • scripts/doctor.mjsruns7,281 bytes
  • scripts/encode.shruns3,222 bytes
  • scripts/kie.mjsruns7,780 bytes
  • scripts/serve.mjsruns3,206 bytes
  • scripts/shoot.mjsruns33,472 bytes
  • scripts/workspace.mjsruns3,707 bytes
  • scripts/worldflight-assert.mjsruns13,115 bytes
  • templates/FINGERPRINTS.mddoc2,387 bytes
Read SKILL.md

# 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.

## What this is not
View the complete source on GitHub

Skills included

  • scroll-craft

Repository facts

License
MIT
Created
Aug 22, 2026
Last pushed
Sep 30, 2026
Forks
649
Open issues
6
Project activity
Active

Rank over the last 12 weeks

Now #294 · best #290 · up 49 in 30 days

  1. #292 on Oct 29
  2. #293 on Oct 30
  3. #291 on Oct 31
  4. #290 from Nov 1 to Nov 2
  5. #291 on Nov 3
  6. #294 since Nov 4
63 earlier periods
  1. #909 on Aug 16
  2. #839 on Aug 22
  3. #850 on Aug 23
  4. #766 on Aug 24
  5. #647 on Aug 25
  6. #583 on Aug 26
  7. #565 on Aug 27
  8. #552 on Aug 28
  9. #511 on Aug 29
  10. #492 on Aug 30
  11. #505 on Aug 31
  12. #495 on Sep 1
  13. #459 on Sep 2
  14. #456 on Sep 3
  15. #424 on Sep 4
  16. #408 on Sep 5
  17. #397 from Sep 6 to Sep 7
  18. #392 on Sep 8
  19. #388 on Sep 9
  20. #383 on Sep 10
  21. #377 on Sep 11
  22. #376 on Sep 12
  23. #372 on Sep 13
  24. #376 on Sep 14
  25. #375 from Sep 15 to Sep 16
  26. #368 from Sep 17 to Sep 18
  27. #360 on Sep 19
  28. #371 on Sep 20
  29. #361 on Sep 21
  30. #360 on Sep 22
  31. #354 on Sep 23
  32. #351 on Sep 24
  33. #350 on Sep 25
  34. #344 on Sep 26
  35. #347 on Sep 27
  36. #350 on Sep 28
  37. #355 on Sep 29
  38. #349 on Sep 30
  39. #347 on Oct 1
  40. #348 on Oct 2
  41. #343 on Oct 3
  42. #337 on Oct 4
  43. #343 on Oct 5
  44. #341 on Oct 6
  45. #343 on Oct 7
  46. #347 on Oct 8
  47. #353 on Oct 9
  48. #343 on Oct 10
  49. #326 on Oct 11
  50. #327 on Oct 12
  51. #320 on Oct 13
  52. #318 on Oct 14
  53. #308 on Oct 15
  54. #310 on Oct 16
  55. #311 on Oct 17
  56. #307 on Oct 18
  57. #304 on Oct 19
  58. #297 from Oct 20 to Oct 21
  59. #294 on Oct 22
  60. #292 on Oct 23
  61. #294 on Oct 24
  62. #296 on Oct 25
  63. #293 on Oct 28

Before you install

Network or broad shell

Automated signals, not a guarantee

Checked Nov 2, 2026

Not fully analyzed: some files were too long, unreadable or missing. This never lowers the level.

Show 7 notes
  • plugins/nateherk-design/skills/scroll-craft/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
  • plugins/nateherk-design/skills/scroll-craft/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
  • plugins/nateherk-design/skills/scroll-craft/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
  • plugins/nateherk-design/skills/scroll-craft/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
  • plugins/nateherk-design/skills/scroll-craft/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
  • plugins/nateherk-design/skills/scroll-craft/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
  • plugins/nateherk-design/skills/scroll-craft/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
Show all 91 signals by file

.claude-plugin/marketplace.json

  • Network accessline 4
    "owner": {     "name": "Nate Herk",     "url": "https://github.com/nateherkai"
  • Network accessline 5
    "name": "Nate Herk",     "url": "https://github.com/nateherkai"   },
  • Network accessline 6
    "url": "https://github.com/nateherkai"

plugins/nateherk-design/.claude-plugin/plugin.json

  • Network accessline 6
    "name": "Nate Herk"   },   "homepage": "https://github.com/nateherkai/scroll-craft",
  • Network accessline 7
    },   "homepage": "https://github.com/nateherkai/scroll-craft",   "repository": "https://github.com/nateherkai/scroll-craft",
  • Network accessline 8
    "homepage": "https://github.com/nateherkai/scroll-craft",
  • Network accessline 9
    "repository": "https://github.com/nateherkai/scroll-craft",

plugins/nateherk-design/skills/scroll-craft/SKILL.md

  • Broad permissionsline 1
    Bash, Read, Write, Edit, Glob, Grep, AskUserQuestion
  • Access to secretsline 198
    [Credential-related source omitted]
  • Network accessline 376
    cd <build project> && npm i playwright-core     # once node <skill>/scripts/serve.mjs --root . --port 4500 & node <skill>/scripts/shoot.mjs --url http://localhost:4500 --out lab/shots
  • Network accessline 377
    node <skill>/scripts/serve.mjs --root . --port 4500 & node <skill>/scripts/shoot.mjs --url http://localhost:4500 --out lab/shots node <skill>/scripts/shoot.mjs --url http://localhost:4500 --out lab/mobile --width 390 --height 844
  • Network accessline 378
    node <skill>/scripts/shoot.mjs --url http://localhost:4500 --out lab/shots
  • Network accessline 379
    node <skill>/scripts/shoot.mjs --url http://localhost:4500 --out lab/mobile --width 390 --height 844
  • Network accessline 380
    node <skill>/scripts/shoot.mjs --url http://localhost:4500 --out lab/reduced --reduced-motion

plugins/nateherk-design/skills/scroll-craft/engine/scrollcraft.css

  • Network accessline 381
    .sc-grain::before {   content: ""; position: absolute; inset: -50%;   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequ
  • Network accessline 382
    content: ""; position: absolute; inset: -50%;   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves
  • Network accessline 383
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='140' height='140' fi

plugins/nateherk-design/skills/scroll-craft/engine/scrollcraft.js

  • Executable scriptline 1
    Executable file
  • Network accessline 658
    if (!src) return;       V.loading = true;       fetch(src).then(function (r) { if (!r.ok) throw new Error(r.status); return r.blob(); })
  • Network accessline 659
    V.loading = true;       fetch(src).then(function (r) { if (!r.ok) throw new Error(r.status); return r.blob(); })         .then(function (blob) {
  • Network accessline 660
    fetch(src).then(function (r) { if (!r.ok) throw new Error(r.status); return r.blob(); })

plugins/nateherk-design/skills/scroll-craft/references/device-diag.html

  • Network accessline 115
    if (t.mode === 'blob') {       fetch(t.src)
  • Network accessline 116
    fetch(t.src)

plugins/nateherk-design/skills/scroll-craft/references/template.html

  • Network accessline 20
    <title>BRAND · the one-line promise</title> <meta name="description" content="One sentence a search result would show."> <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' 
  • Network accessline 21
    <meta name="description" content="One sentence a search result would show."> <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' rx='7' fill='%230A0807'/></svg>"
  • Network accessline 22
    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' rx='7' fill='%230A0807'/></svg>">

plugins/nateherk-design/skills/scroll-craft/references/verify.md

  • Network accessline 15
    node <skill>/scripts/serve.mjs --root . --port 4500 & node <skill>/scripts/shoot.mjs --url http://localhost:4500 --out lab/shots
  • Network accessline 16
    node <skill>/scripts/shoot.mjs --url http://localhost:4500 --out lab/shots
  • Network accessline 17
    node <skill>/scripts/shoot.mjs --url http://localhost:4500 --out lab/mobile --width 390 --height 844
  • Network accessline 18
    node <skill>/scripts/shoot.mjs --url http://localhost:4500 --out lab/reduced --reduced-motion
  • Network accessline 380
    curl -s http://localhost:45XX | grep -o "<title>.*</title>"
  • Network accessline 381
    curl -s -o /dev/null -w "%{http_code}
  • Network accessline 382
    " http://localhost:45XX/assets/leg01.mp4

plugins/nateherk-design/skills/scroll-craft/references/worldflight.md

  • Network accessline 333
    node scripts/serve.mjs --root builds/<name> --port 45XX node scripts/shoot.mjs --url http://localhost:45XX --out lab/<name>-shots --per-act 8
  • Network accessline 334
    node scripts/shoot.mjs --url http://localhost:45XX --out lab/<name>-shots --per-act 8
  • Network accessline 335
    node scripts/shoot.mjs --url http://localhost:45XX --out lab/<name>-reduced --reduced-motion
  • Network accessline 345
    node <skill>/scripts/worldflight-assert.mjs --url http://localhost:45XX

plugins/nateherk-design/skills/scroll-craft/scripts/doctor.mjs

  • Executable scriptline 1
    #!/usr/bin/env node
  • Access to secretsline 15
    [Credential-related source omitted]
  • Access to secretsline 128
    [Credential-related source omitted]
  • Access to secretsline 131
    [Credential-related source omitted]
  • Access to secretsline 132
    [Credential-related source omitted]
  • Access to secretsline 140
    [Credential-related source omitted]
  • Access to secretsline 141
    [Credential-related source omitted]

plugins/nateherk-design/skills/scroll-craft/scripts/encode.sh

  • Executable scriptline 1
    #!/usr/bin/env bash

plugins/nateherk-design/skills/scroll-craft/scripts/kie.mjs

  • Executable scriptline 1
    #!/usr/bin/env node
  • Network accessline 3
    * scrollcraft asset generator: kie.ai unified jobs API.  *  *   POST https://api.kie.ai/api/v1/jobs/createTask   { model, input }
  • Network accessline 4
    *  *   POST https://api.kie.ai/api/v1/jobs/createTask   { model, input }  *   GET  https://api.kie.ai/api/v1/jobs/recordInfo?taskId=...
  • Network accessline 5
    *   POST https://api.kie.ai/api/v1/jobs/createTask   { model, input }
  • Network accessline 6
    *   GET  https://api.kie.ai/api/v1/jobs/recordInfo?taskId=...
  • Access to secretsline 20
    [Credential-related source omitted]
  • Network accessline 26
    const API = "https://api.kie.ai";
  • Network accessline 27
    const UPLOAD = "https://kieai.redpandaai.co/api/file-base64-upload";
  • Access to secretsline 39
    [Credential-related source omitted]
  • Access to secretsline 48
    [Credential-related source omitted]
  • Access to secretsline 50
    [Credential-related source omitted]
  • Access to secretsline 52
    [Credential-related source omitted]
  • Access to secretsline 55
    [Credential-related source omitted]
  • Network accessline 67
    const mime = ext === "jpg" ? "image/jpeg" : `image/${ext}`;   const dataUrl = `data:${mime};base64,${fs.readFileSync(abs).toString("base64")}`;   const res = await fetch(UPLOAD, {
  • Network accessline 68
    const dataUrl = `data:${mime};base64,${fs.readFileSync(abs).toString("base64")}`;   const res = await fetch(UPLOAD, {     method: "POST", headers: H,
  • Network accessline 69
    const res = await fetch(UPLOAD, {
  • Network accessline 82
    async function createTask(model, input) {   const res = await fetch(`${API}/api/v1/jobs/createTask`, {
  • Network accessline 83
    const res = await fetch(`${API}/api/v1/jobs/createTask`, {
  • Network accessline 94
    for (;;) {     if (Date.now() - t0 > timeoutMs) throw new Error(`${label}: timed out after ${Math.round((Date.now() - t0) / 1000)}s`);     const res = await fetch(`${API}/api/v1/jobs/recordInfo?taskId=${encodeURIComponent(taskId)}`, { heade
  • Network accessline 95
    if (Date.now() - t0 > timeoutMs) throw new Error(`${label}: timed out after ${Math.round((Date.now() - t0) / 1000)}s`);     const res = await fetch(`${API}/api/v1/jobs/recordInfo?taskId=${encodeURIComponent(taskId)}`, { headers: H });     c
  • Network accessline 96
    const res = await fetch(`${API}/api/v1/jobs/recordInfo?taskId=${encodeURIComponent(taskId)}`, { headers: H });
  • Network accessline 116
    async function download(url, out) {   fs.mkdirSync(path.dirname(path.resolve(out)), { recursive: true });   const res = await fetch(url);
  • Network accessline 117
    fs.mkdirSync(path.dirname(path.resolve(out)), { recursive: true });   const res = await fetch(url);   if (!res.ok) throw new Error(`download ${res.status} ${url}`);
  • Network accessline 118
    const res = await fetch(url);
  • Network accessline 137
    try {   if (cmd === "probe") {     const r = await fetch(`${API}/api/v1/chat/credit`, { headers: H });
  • Network accessline 138
    if (cmd === "probe") {     const r = await fetch(`${API}/api/v1/chat/credit`, { headers: H });     const j = await r.json();
  • Network accessline 139
    const r = await fetch(`${API}/api/v1/chat/credit`, { headers: H });

plugins/nateherk-design/skills/scroll-craft/scripts/serve.mjs

  • Executable scriptline 1
    #!/usr/bin/env node
  • Network accessline 64
    fs.createReadStream(file).pipe(res); }).listen(PORT, HOST, () => {   console.log(`scrollcraft: ${ROOT}\n  http://localhost:${PORT}`);
  • Network accessline 65
    }).listen(PORT, HOST, () => {   console.log(`scrollcraft: ${ROOT}\n  http://localhost:${PORT}`);   if (!LAN) return;
  • Network accessline 66
    console.log(`scrollcraft: ${ROOT}\n  http://localhost:${PORT}`);
  • Network accessline 68
    for (const addrs of Object.values(os.networkInterfaces())) {     for (const a of addrs || []) {       if (a.family === "IPv4" && !a.internal) console.log(`  http://${a.address}:${PORT}  (LAN)`);
  • Network accessline 69
    for (const a of addrs || []) {       if (a.family === "IPv4" && !a.internal) console.log(`  http://${a.address}:${PORT}  (LAN)`);     }
  • Network accessline 70
    if (a.family === "IPv4" && !a.internal) console.log(`  http://${a.address}:${PORT}  (LAN)`);

plugins/nateherk-design/skills/scroll-craft/scripts/shoot.mjs

  • Executable scriptline 1
    #!/usr/bin/env node
  • Network accessline 9
    * frame the transition may not survive.  *  *   node shoot.mjs --url http://localhost:4500 --out lab/shots --steps 12
  • Network accessline 10
    *  *   node shoot.mjs --url http://localhost:4500 --out lab/shots --steps 12  *   node shoot.mjs --url ... --width 375 --height 812 --out lab/mobile
  • Network accessline 11
    *   node shoot.mjs --url http://localhost:4500 --out lab/shots --steps 12
  • Network accessline 38
    const URL = arg("--url", "http://localhost:4500");

plugins/nateherk-design/skills/scroll-craft/scripts/workspace.mjs

  • Executable scriptline 1
    #!/usr/bin/env node

plugins/nateherk-design/skills/scroll-craft/scripts/worldflight-assert.mjs

  • Executable scriptline 1
    #!/usr/bin/env node
  • Network accessline 4
    * claims the mode makes, checked one at a time.  *  *   node lab/worldflight-assert.mjs --url http://localhost:4520
  • Network accessline 5
    *  *   node lab/worldflight-assert.mjs --url http://localhost:4520  */
  • Network accessline 6
    *   node lab/worldflight-assert.mjs --url http://localhost:4520
  • Network accessline 13
    const argv = process.argv.slice(2); const arg = (n, d) => { const i = argv.indexOf(n); return i > -1 && argv[i + 1] ? argv[i + 1] : d; }; const URL = arg("--url", "http://localhost:4520");
  • Network accessline 15
    const URL = arg("--url", "http://localhost:4520");

How the signals fit together

Facts from a static read of the files at the pinned commit. They describe what the code does, not why.

Some files could not be read; the facts below still hold.

Declared and executed: 1 fact
Signal confidence: 83 facts

and 33 more

Works with

Agent compatibility, from the files in this repository
AgentStatusEvidenceInstall to
Claude CodeNativeManifest .claude-plugin/marketplace.json.claude/skills/<skill-name>/
CodexCompatibleStandard SKILL.md plugins/nateherk-design/skills/scroll-craft/SKILL.md.agents/skills/<skill-name>/
CursorCompatibleStandard SKILL.md plugins/nateherk-design/skills/scroll-craft/SKILL.md.cursor/skills/<skill-name>/
Gemini CLICompatibleStandard SKILL.md plugins/nateherk-design/skills/scroll-craft/SKILL.md.gemini/skills/<skill-name>/
GitHub CopilotCompatibleStandard SKILL.md plugins/nateherk-design/skills/scroll-craft/SKILL.md.github/skills/<skill-name>/
OpenCodeCompatibleStandard SKILL.md plugins/nateherk-design/skills/scroll-craft/SKILL.md.opencode/skills/<skill-name>/
  • Native The repository ships a manifest, folder or frontmatter field for this agent.
  • Compatible A standard SKILL.md that this agent can read.
  • Unknown No evidence either way.

Derived automatically from paths, manifests and frontmatter. Not tested on each agent.

Add this badge to your README

It updates every night and links to this page.

nateherkai/scroll-craft: #294 on hotskills, 4.6k stars

[![nateherkai/scroll-craft on hotskills](https://hotskills.dev/badge/nateherkai-scroll-craft.svg)](https://hotskills.dev/skill/nateherkai-scroll-craft/)