nateherkai/scroll-craft

An agent skill for building premium, immersive, scroll-driven websites. Works with Codex, Claude Code, and other coding agents. Also available as a Claude Code plugin.

What it solves

Most AI-generated websites are either generic and forgettable or flashy but poorly designed (e.g., bad typography, poor mobile responsiveness, and repetitive layouts). scroll-craft solves this by treating interaction and high-end design craft as a single integrated process, preventing AI agents from producing "cookie-cutter" AI pages.

How it works

It functions as an "agent skill" (a set of instructions, references, and tools) that can be used with coding agents like Codex or Claude Code. It provides a strict design framework that the agent must follow:

  • Page Grammars: It defines eight mutually exclusive layout styles (e.g., filmic one-shot, typographic poster) to ensure variety.
  • Design Constraints: It enforces a "typography floor," specific spacing scales, and a limited color palette to maintain professional standards.
  • Fingerprint Gate: To prevent repetition, new builds must differ from previous projects across at least 4 of 6 dimensions (grammar, navigation, hero section, act shape, close, and signature move).
  • Verification Engine: A headless browser automatically audits the finished page for "dead scroll" (areas where scrolling does nothing), contrast issues, and broken video clips.
  • Technical Engine: A core JavaScript/CSS engine handles the scroll-driven animations (like frame-by-frame video scrubbing) without requiring per-project edits to the core mechanism.

Who it’s for

Developers and designers using AI coding agents to build premium, immersive, scroll-driven websites that need to adhere to a high professional design standard and avoid the "AI-look."

Highlights

  • Scroll-as-Timeline: Enables complex interactions where video scrubs frame-by-frame and sections pin as the user scrolls.
  • Anti-Generic Guardrails: Explicitly forbids common AI design tropes like identical feature-card grids and "AI-purple" gradients.
  • Automated Quality Control: Includes a verification pass that reports on visual and functional failures using a headless browser.
  • Agent-Ready: Ships as a Claude Code plugin and a portable skill folder for other coding agents.

Related

  • Project
    s0xDk/refactoring-ui-skill

    A Claude Code skill that teaches the AI concrete, mechanical design rules from the book Refactoring UI to create professional-looking user interfaces.

  • Project
    ItsssssJack/power-design

    A Claude Code skill that generates professional presentation decks and responsive websites by combining extracted brand DNA with codified, research-backed design principles.

  • Project
    michaelshimeles/skills

    A curated set of Claude Code agent skills that automate common development tasks—visual diff generation, service‑layer structuring, evidence‑driven UI testing, iterative Greptile review loops, work‑tree isolation, and prose clean‑up—plus a ready‑to‑drop workflow tying them together.

  • Project
    glebis/claude-skills

    A library of ~100 specialized skills for Claude Code that automate complex workflows across research, development, meeting analysis, and personal analytics.

  • Project
    AgriciDaniel/claude-blog

    claude‑blog is a Claude Code skill suite that automates full‑lifecycle blog creation – writing, SEO, schema, multilingual publishing, audio, and quality‑gate checks – via a `/blog` command set backed by a 5‑gate delivery contract.