auteur

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

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

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 / 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:

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

Auteur

At a glance

README