Claude Code plugin and portable Agent Skill · Early public release (plugin version 0.3.0) with a documented production workflow and worked examples.

nateherkai/scroll-craft

MIT-licensed Agent Skill and native Claude Code plugin for designing, implementing, and visually verifying distinctive scroll-driven marketing sites; it combines structured creative discovery, page-grammar and uniqueness gates, a reusable JavaScript/CSS engine, optional media generation, ffmpeg encoding, and Playwright-based desktop, mobile-emulation, and reduced-motion checks.

frontend developmentweb designinteraction designcreative codingaccessibilitymarketing websitesscrollytellingvisual quality assurance
Routing score
80.0
Readiness
Usable for specialized website builds with substantial environment and human-review caveats.
License
MIT
Maintenance
active
Components
14
Revision
0

Selection

Select when

  • You need a distinctive scroll-driven marketing or portfolio page.
  • You want Claude Code to follow a structured design-to-verification workflow.
  • The site needs layered heroes, video scrubbing, pinned sequences, reveals, or horizontal rails.
  • You have authentic brand media or accept optional third-party generation cost.
  • You can install Node, ffmpeg, Chrome, and playwright-core in the build environment.
  • You want semantic HTML rather than runtime-generated page structure.
  • You need explicit mobile composition and reduced-motion checks.
  • You want safeguards against repeating prior site structures and interactions.
  • You can perform human visual, keyboard, device, and deployment review after automation.

Boundaries

Avoid when

  • You need a conventional static page with minimal interaction.
  • You want a no-code visual editor or turnkey hosted site builder.
  • You cannot install the documented media and browser dependencies.
  • You require verified native macOS production history from the supplied evidence.
  • You require automated proof of real iPhone behavior.
  • You need broad browser, assistive-technology, or formal accessibility certification.
  • You want common template conventions that the skill explicitly refuses.
  • You cannot review generated assets, screenshots, motion quality, and factual content.
  • You need deterministic design outcomes without model or human judgment.
  • You cannot send prompts or assets to kie.ai but also lack suitable source media.

Strengths

Capabilities

Ships a Claude Code plugin containing the scroll-craft SKILL.md workflow.Supports direct skill-folder use by Codex and other instruction-capable coding agents.Defines eight mutually exclusive page grammars to discourage repeated site structure.Requires one site-specific signature move and a six-dimension fingerprint comparison against prior builds.Captures a brief, visitor journey, feeling curve, engineered peak, and scroll score before implementation.Supports explicit creative delegation and clearly labeled self-authored briefs when necessary.Provides a reusable JavaScript/CSS scroll engine driven by semantic HTML and data attributes.Publishes scroll progress through a CSS custom property for page-specific interactions without engine edits.Guides layered hero construction with separate desktop, mobile, and reduced-motion composition.Supports supplied photos and footage as a first-class asset path.Optionally integrates kie.ai asset generation when the user provides an API key.Includes media encoding guidance and scripts for scrub-friendly video outputs.Provides workspace resolution and a persistent FINGERPRINTS.md registry.Uses a Playwright-based harness to sample six positions per act.Reports dead scroll, cues that never fully appear, composited contrast issues, and clips that do not advance.Produces desktop, mobile-emulated, and reduced-motion screenshots plus contact sheets.Requires semantic markup, real reading order, keyboard focus review, and explicit mobile caveat reporting.Enforces design constraints covering typography, spacing, color roles, depth, motion, and anti-patterns.Includes worked examples and references for approved-site patterns, uniqueness, devices, visual worlds, assets, and verification.Packages a plugin manifest identifying version 0.3.0 and MIT licensing.

Risk profile

Risks and limitations

  • Uncertainty: only the README, plugin manifest, and SKILL.md were supplied, so scripts, engine code, references, templates, tests, CI, and package integrity were not directly inspected.
  • Uncertainty: repository metadata is dated in 2026 relative to this analysis context, so activity, adoption, and recency cannot be independently reconciled.
  • Uncertainty: the repository reports ten approved immersive websites, but their source packages, acceptance criteria, and production outcomes were not independently examined.
  • The author states that completed builds have only been run on Windows, although scripts search Windows, macOS, and Linux locations.
  • Node 18+, a full ffmpeg build, Chrome, and locally resolvable playwright-core are required for the documented workflow.
  • Real iPhone video decoding, autoplay policy, Low Power Mode, and touch scrolling are outside the headless verification harness.
  • The harness cannot judge composition quality, motion smoothness, emotional effect, factual accuracy, or whether the page is meaningful.
  • Optional kie.ai generation introduces third-party cost, network transfer, credential handling, and provider availability concerns.
  • The workflow is intentionally opinionated and may conflict with established design systems or requested conventional patterns.
  • Persistent build artifacts, screenshots, briefs, and fingerprint records may contain project-sensitive material and require normal workspace controls.
  • No minimum Claude Code version, cross-host compatibility matrix, automated integration result, security audit, or privacy policy was supplied.
  • The evidence does not establish comprehensive browser, assistive-technology, performance, or production deployment coverage.

The skill permits shell, file-editing, search, and user-question tools, while its workflow adds browser automation, local serving, media encoding, and optional remote generation. First-party text calls for disabling native pointer lock and capture during headless checks, preserving real markup, and reporting unverified behavior. Uncertainty: implementation-level path handling, subprocess safety, dependency pinning, secret protection, network scope, and script integrity were not inspected, and no audit or threat model was supplied.

Component inventory

14 documented components

Claude Code plugin

nateherk-design

MIT-licensed plugin packaging the scroll-craft skill; this is the repository’s native Claude Code extension mechanism.

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

scroll-craft

Plans, builds, and verifies distinctive premium scroll-driven landing pages with semantic HTML, layered heroes, responsive composition, and reduced-motion support.

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

Scrollcraft production workflow

Runs brief, journey, grammar, fingerprint gate, feeling curve, asset creation, page build, and visual verification in sequence.

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

doctor

Checks Node, full ffmpeg capabilities, Playwright, Chrome, optional API-key availability, and workspace resolution.

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

workspace

Resolves or creates the Scrollcraft workspace and seeds its fingerprint registry.

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

kie

Probes kie.ai availability and generates stills or image-conditioned video shots when optional generated assets are requested.

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

encode

Encodes source video for responsive scroll scrubbing with a dense GOP and no audio track.

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

scrollcraft engine

Reusable JavaScript and CSS mechanism that reads `data-sc-*` markup and publishes `--sc-p`; projects theme it without editing the engine.

plugins/nateherk-design/skills/scroll-craft/engine/
Local preview command

serve

Serves the build directory locally for browser inspection and automated verification.

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

shoot

Walks scroll states, captures contact sheets, and reports dead scroll, incomplete cue opacity, and composited contrast issues.

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

Fingerprint gate

Requires each planned build to differ from every prior registry row on at least four of six structural dimensions.

plugins/nateherk-design/skills/scroll-craft/references/uniqueness.md
Experience-verification workflow

Feel check

Compares one felt word per act against the intended feeling curve and checks that the peak and ending visually resolve.

plugins/nateherk-design/skills/scroll-craft/references/feel.md
Mobile diagnostic page

device-diag

On-device diagnostic page for reported mobile playback or lifecycle defects that headless Chrome cannot reproduce.

plugins/nateherk-design/skills/scroll-craft/references/device-diag.html
Claude Code development invocation

Local plugin development loader

Loads the repository’s plugin directory directly for local skill development without marketplace installation.

plugins/nateherk-design/

Technical profile

Requirements and configuration

License
MIT
Repository Language
JavaScript
Plugin Name
nateherk-design
Plugin Version
0.3.0
Skill Name
scroll-craft
Skill Format
SKILL.md with YAML frontmatter and allowed Claude Code tools
Claude Tools
Bash, Read, Write, Edit, Glob, Grep, AskUserQuestion
Runtime Requirements
Node.js 18+, full ffmpeg, Chrome, and playwright-core
Optional Service
kie.ai asset generation through KIE_AI_API_KEY
Engine
Reusable scrollcraft.js and scrollcraft.css driven by semantic HTML data attributes
Workspace Resolution
SCROLLCRAFT_HOME, nearest .scrollcraft.json, then project-root scrollcraft directory
Persistent Artifacts
BRIEF.md, build files, FINGERPRINTS.md, screenshots, and contact sheets
Verification
Playwright-based desktop, 390x844 mobile emulation, and reduced-motion scroll sampling
Host Support
Claude Code plugin plus portable folder-based use with Codex and other capable coding agents
Metadata Signals
Public, unarchived repository with MIT metadata, JavaScript as primary language, and version 0.3.0 manifest

Classification

How it enters the stack

Context InjectionTool Surface

Evidence: a native Claude Code plugin loads a SKILL.md workflow, and the skill directs Claude to use bundled workspace, media, serving, and Playwright verification scripts. Medium setup reflects Node, full ffmpeg, Chrome, and playwright-core requirements; optional generation also needs a kie.ai key.

Claude Extension · medium setup effort · high confidence · automated

Evidence and risk

Primary sources

first_party_fileREADME.mdhttps://github.com/nateherkai/scroll-craft/blob/main/README.md

Routing context

Conflicts, complements, and synergies

complements

gh_owl_listener_designer_skills

Both provide Claude Code design guidance, but scroll-craft specializes in implementing and verifying immersive landing pages while designer-skills spans broader design practice.

medium confidence
overlaps

gh_dzhng_skills

Both package Claude-compatible skills with frontend and visual-review concerns, while scroll-craft is narrower and adds a dedicated scroll engine and verification harness.

medium confidence