Sandbox
@agiwhitelist/auteur

Claude Code skill for cinematic website builds

Auteur is a skill pack that helps Claude Code direct a website like a film. You start with a commit-sheet, generate assets with local tools, build the page, then run anti-slop and motion checks before anything ships.

1,017 stars15 forksJavaScriptUpdated 1mo ago
Who it's for

Builders who want Claude Code to follow a written art direction, generate assets, and pass a build gate before shipping a site.

What it delivers

You can turn a brief into a website with a fixed visual direction and an automated gate against sloppy output.

What it does

Commit-sheet workflow

Locks the art direction before markup, with named brand color, type system, motion budget, and anti-references.

Generated asset pipeline

Uses local CLIs for imagery, video frames, depth maps, and 3D geometry instead of handwaving the visuals.

Anti-slop linter

Runs `scripts/slopscan.mjs` to fail on patterns like weak gradients, `transition: all`, autoplay audio, and missing reduced-motion handling.

Motion QA gate

Runs `scripts/motionqa.mjs` with Playwright to check frame drops, long tasks, console errors, and audio on a throttled browser.

Reference scouting and sourcing

Includes `scripts/refscout.mjs`, `scripts/moodboard.mjs`, and `scripts/source.mjs` for live research, contact sheets, and licence-clean assets.

System drift checks

Uses `scripts/systemscan.mjs` and `scripts/chromadiff.mjs` to catch route drift, focus issues, and colour or lightness changes.

Reusable layout recipes

Provides `reference/*.md` guides for build, motion, taste, verify, and scroll-cinema / scroll-flight patterns.

How to get it

  1. 1Any agent — one command. Detects what you have installed and writes to each agent's…
    npx skills add agiwhitelist/auteur
  2. 2Claude Code, as a plugin — installs and updates in place
    /plugin marketplace add agiwhitelist/auteur
    /plugin install auteur@auteur
  3. 3OpenClaw
    openclaw skills install git:agiwhitelist/auteur --global
  4. 4Anything else that reads a SKILL.md — clone it into the agent's skills directory
    git clone --depth 1 https://github.com/agiwhitelist/auteur ~/.claude/skills/auteur
  5. 5Then just ask
    "build me a cinematic landing with auteur"

README

English · 简体中文

auteur — the landing page: the wordmark AUTEUR rendered as a field of particles behind the line 'Websites, directed like films.'

auteur

The Claude Code skill that directs a website like a film.

Stars Release CI License Live

Art direction is locked before a line of code. Assets are generated by local CLIs. Every ship is gated by an executable anti-slop linter and a real motion check.

▶ Open the live gallery  ·  Install  ·  The method  ·  The gates


Animation: dragging the cursor across the landing page tears the particle field apart and it re-forms into the wordmark

Not a mockup — that's the live landing page. 131,072 GPU particles holding the wordmark, torn by the cursor and re-forming. Built by the skill it sells.


Install (30 seconds)

auteur is an Agent Skill: a SKILL.md plus reference recipes and a few runnable scripts. ~1MB, no dependencies, no API keys, no build step.

Any agent — one command. Detects what you have installed and writes to each agent's skills folder:

npx skills add agiwhitelist/auteur

Claude Code · Codex · Cursor · OpenCode · Gemini CLI · Windsurf · Cline · Goose · Copilot · Hermes · Kiro · Roo · OpenHands — 75+ agents, project-level or -g for global.

Claude Code, as a plugin — installs and updates in place:

/plugin marketplace add agiwhitelist/auteur
/plugin install auteur@auteur

OpenClaw:

openclaw skills install git:agiwhitelist/auteur --global

Anything else that reads a SKILL.md — clone it into the agent's skills directory:

git clone --depth 1 https://github.com/agiwhitelist/auteur ~/.claude/skills/auteur

Then just ask:

"build me a cinematic landing with auteur"

Claude runs the pipeline — commit-sheet → assets → build → gate — and hands you the site.

The proof: ten live sites

Don't take the pitch — open them. Each was built by auteur, and each passes the skill's own linter at 0 fails / 0 warns. The tenth was not built by Claude: Kimi K3 was handed SKILL.md and a brief, saw none of the other nine, and came out lit, serif and green in a category whose every reflex is black and gold — naming in writing, before it built, the four house tells it intended to break. The skill is the thing that travels, not the model.

FLUX — the wordmark drawn in neon outline over a magenta and cyan fluid simulation
FLUX
WebGL fluid that tears the wordmark under the cursor
SWARM — the word SWARM glowing orange, formed from a field of particles
SWARM
131,072 GPU particles on a curl-noise field
STATIC — huge broadcast-style type with chromatic glitch fringing
STATIC
Broadcast-glitch type you can shred with a drag
HALE — a brass microscope exploded into labelled parts on a dark stage
HALE
A CC0 microscope taken apart on scroll — sourced, not generated
TRUE NOON — an analemma curve of the sun's position drawn across a measured grid
TRUE NOON
A year of real sun positions, computed live for your latitude
PROOF — a bakery production dashboard with deck timers, a late-runs panel and a schedule
PROOF
Five screens of a production floor — a product, not a page
DRIFT — flying between pale cyan monoliths in volumetric fog
DRIFT
A 3D world of monoliths and volumetric fog you fly through
ATLAS — sea stacks and breaking surf lit by sunrays through a canyon mouth
ATLAS
A photoreal flight: dunes → canyon → coast → summit
ABYSS — a whale silhouette passing through blue water as marine snow drifts up
ABYSS
An ocean dive, scroll-scrubbed video with a camera dolly
HORO LIMITED — a green enamel watch dial drawn in CSS beside a serif headline on a light page
HORO
Built by Kimi K3, not Claude — the dial is CSS and keeps your time

FLUX / STATIC / SWARM / DRIFT are real-time WebGL. HALE is sourced CC0 geometry under a CC0 HDRI. TRUE NOON is 145KB with zero raster assets. PROOF is the system register — five routes gated for design-system drift. ATLAS and ABYSS are the video-scrub tier (reference/scroll-flight.md). HORO is the portability test: another model, same file, and the gates it had to satisfy are the same ones — slopscan 0/0/0, 53fps at DPR 2, worst contrast 6.50, and a page whose measured lightness (0.740) matches what its own commit-sheet promised before the build (0.72). The landing page is an eleventh, built by the discipline it sells.

There are no benchmark numbers anywhere in this repo. auteur is a design discipline, not a system with a throughput figure. The one quantitative claim — the linter result — you can reproduce in one command (below).

And it is not a component library. Nothing is pulled from a registry: every site above is authored from its commit-sheet up, vanilla, with no runtime dependency. If you want ready-made animated components to drop in, take shadcn or originkit.dev — this skill directs a page instead of stocking it.

How it works

A director's pipeline, enforced in order:

  1. Recon. refscout profiles live award-winning sites — the libraries they really load, how many scenes they pin, their scroll budget, the fonts and palette as painted — and moodboard pulls a numbered contact sheet from Bing / Pinterest / are.na. Art direction gets decided from live material and a dated read of the category's reflex, not from memory.
  2. Commit-sheet. One committed art direction — a single brand hue, a type system, a motion budget, named anti-references — written down before any markup. No "let's see how it looks" drift.
  3. Generated assets. Imagery, video frames, depth maps and 3D geometry from local CLIs (Codex / Gemini image gen, Blender headless, Depth-Anything), routed by cost and by what each tool is actually good at.
  4. Build. One WebGL context, GSAP/Lenis scroll, DOM motion on transform & opacity only — from proven recipes: fluid, GPGPU particles, 3D worlds, scroll-morph state machines.
  5. Gate. Nothing ships until it passes both gates below.

The gates (this is the point)

slopscan — a zero-dependency linter that fails the build on concrete slop, not vibes:

git clone --depth 1 -b gh-pages https://github.com/agiwhitelist/auteur site
node scripts/slopscan.mjs site                  # the landing
node scripts/slopscan.mjs site/showcase/flux    # any showcase
# → Summary: 0 fails, 0 warns, 0 suppressed

It catches the 250–290° purple→blue AI gradient, transition: all, addEventListener('scroll') for animation, autoplay audio, video with no poster, WebGL with no prefers-reduced-motion branch, Inter/Space-Grotesk defaults, em-dash-slop copy, and more. Runs in CI on every shipped page — so the "0 slop" claim above can't silently rot.

motionqa — a Playwright pass that drives the page on a throttled CPU and fails on dropped frames, long tasks, autoplay sound, or console errors. Sites target 60fps; the gate is what enforces it. It measures at DPR 2 (1440×900 @2x = 5.2MP), because fullscreen effects (bloom, DoF, grain) cost per pixel and a DPR-1 measurement certifies 60fps on a page that stutters on a retina laptop. On scenes with no fullscreen pass the two measurements match — that is the point: the number stays honest when the bloom lands. It also flags a dev server, whose numbers describe a build nobody ships.

node scripts/motionqa.mjs site/showcase/swarm --headed

systemscan — for multi-screen products: crawls every route, reads what the browser actually painted, and fails a control kind that drifts over its declared per-kind budget or any control with no visible focus state.

Recon and sourcing (phases 0 and 1)

node scripts/refscout.mjs --from awwwards --limit 8
# → design/refs/REFERENCES.md + shots/ — stack, pinned scenes, scroll budget,
#   fonts and painted palette per site

node scripts/moodboard.mjs "editorial brutalist dark" "hard rim light macro" --limit 24
# → design/moodboard/contact-sheet.png — 20 numbered tiles, indexed to source

node scripts/source.mjs hdri  "coastal dusk cold clear" --res 2k   # Poly Haven, CC0
node scripts/source.mjs model "chair wood" --res 1k                # glTF + textures

No API keys and no logins. Sites that withhold their CSS from a headless browser are reported as NO CAPTURE rather than guessed at, so the report never invents a font it didn't see. Every sourced file's licence is recorded in assets/sourced/ASSETS-SOURCED.md, and CC-BY images carry their credit line so they can't ship unattributed. Stock video is allowed as an ambient layer and refused as a hero: if the wow moment is stock, there is no wow moment.

What's in here

SKILL.md              the skill Claude Code loads
reference/*.md        the recipes: recon, build, direct, system, scroll-cinema,
                      scroll-flight, motion, assets, taste, verify
scripts/refscout.mjs  reference scouting + site fingerprinting
scripts/moodboard.mjs image search -> numbered contact sheet
scripts/source.mjs    licence-clean asset sourcing + licence ledger
scripts/systemscan.mjs cross-route design-system drift gate
scripts/slopscan.mjs  the anti-slop linter (zero deps)
scripts/motionqa.mjs  the Playwright motion + a11y gate
scripts/shoot.mjs     responsive screenshot capture
scripts/chromadiff.mjs colour + lightness drift gate, measured in OKLCH
templates/            commit-sheet, storyboard, cinema-QA, system-sheet
                      + scroll-flight-engine.js — drop-in scroll-scrubbed-video engine

The nine showcase sites and the landing live on the gh-pages branch, which is what GitHub Pages serves — so installing the skill pulls ~1MB of recipes instead of 45MB of rendered video. CI checks out both branches and runs the linter from main against the site on gh-pages, so the gate still covers every shipped page.

Requirements

  • Claude Code (the skill runs inside it).
  • Node 18+ for slopscan (zero dependencies).
  • Playwright for motionqa / shoot / refscout / moodboard (npx playwright install chromium).
  • Optional, for asset generation: whichever local media CLIs you have (Codex, Gemini/agy, Blender). The skill routes to what's present and degrades gracefully to hand-authored assets when they aren't.

Network and permissions

The skill declares a narrow tool surface: node scripts/* for its own gates, npx playwright * for the browser passes, and the media CLIs (agy, codex, grok, ffmpeg) only if you have them.

Two phases reach the network, and only those two: recon reads live pages (awwwards, Bing / Pinterest / are.na image search) and sourcing fetches licence-clean assets (Poly Haven, Iconify, Google Fonts, Openverse, Coverr). No API keys, no logins, no credentials of any kind. Fetched content is treated as reference material and licence metadata — never executed. Skip phases 0–1 and everything else runs offline.

Accessibility floor

Every site auteur ships: prefers-reduced-motion → a rich still, never blank; all copy readable with JavaScript off; no full-frame strobe; responsive at 390 / 768 / 1440 with no horizontal overflow. These are enforced, not aspired.

Credits

The photoreal scroll-scrubbed-video engine (templates/scroll-flight-engine.js) and its technique are adapted from scroll-world by cyw (MIT) — a sibling Claude Code skill focused on AI-video camera flights. auteur pairs it with its own asset generation and slopscan / motionqa gates.

License

MIT © agiwhitelist — see LICENSE. Vendored components retain their own MIT notices (see file headers).

Files in the repo

Repository payload16 top-level entries
  • .claude-plugin
  • .github
  • assets
  • reference
  • scripts
  • templates
  • .gitignore
  • DESIGN.md
  • LICENSE
  • package-lock.json
  • package.json
  • PRODUCT.md
  • README.md
  • README.zh-CN.md
  • SKILL.md
  • skills.sh.json

Discussion (0)

Ask about usage, or say what you built with it

Sign in to join the discussion.

No comments yet. Be the first to say what this is good for.

More skills

obra/
superpowers

An agentic skills framework & software development methodology that works.

285k
1 add

Turn any codebase, with its docs, SQL schemas, configs, and PDFs, into a queryable knowledge graph. A /graphify skill for Claude Code, Cursor, Codex, and Gemini CLI: local deterministic AST parsing, every edge explained, no vector store.

117k
1 add
Vincentwei1021/
anything2explainer

Topic in, narrated explainer video out. A Claude Code / Codex skill that turns any topic into a black-canvas motion-graphics explainer video with TTS voiceover, subtitles and a chapter progress bar. Chinese or English; every frame drawn in code with Remotion.

666

Open-source AI job search: scan job portals, evaluate listings into a structured A-H report with a global 1-5 score, tailor your CV, track applications — runs locally in your AI coding CLI (Claude Code, Codex, OpenCode, Antigravity…)

71k