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.

▶ See it live  ·  The method  ·  Install

---

The proof

Don't take the pitch — open the six sites. Each was built by auteur, and each passes the skill's own linter with 0 fails / 0 warns:

Site	Technique	Live
FLUX	WebGL fluid simulation that tears the wordmark under the cursor	open ↗
STATIC	Broadcast-glitch type you can shred with a fast drag, crisp at rest	open ↗
SWARM	131,072 GPU particles on a curl-noise field, settling into a wordmark	open ↗
DRIFT	An atmospheric 3D world of monoliths + volumetric fog you fly through	open ↗
ATLAS	A photoreal camera flight (dunes → canyon → coast → summit) — real AI video, scrubbed by scroll	open ↗
ABYSS	A photoreal ocean dive (surface → reef → twilight → bioluminescence → abyss) — video + a scroll-driven camera dolly	open ↗

FLUX / STATIC / SWARM / DRIFT are real-time WebGL; ATLAS and ABYSS are the video-scrub tier (see reference/scroll-flight.md) — photoreal footage with a scroll-driven camera dolly through it. The landing page itself is a seventh — built by the same 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).

Install

auteur is a Claude Code skill: a SKILL.md plus reference recipes and a few runnable scripts. Drop it into your skills folder.

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

Then, in Claude Code:

"build me a cinematic landing with auteur"

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

How it works

A director's pipeline, enforced in order:

1. 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.
2. 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.
3. 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.
4. 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:

node scripts/slopscan.mjs docs            # the landing
node scripts/slopscan.mjs docs/showcase/flux
# → 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.

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

What's in here

SKILL.md              the skill Claude Code loads
reference/*.md        the recipes: direct, scroll-cinema, scroll-flight, motion, assets, taste, verify, build
scripts/slopscan.mjs  the anti-slop linter (zero deps)
scripts/motionqa.mjs  the Playwright motion + a11y gate
scripts/shoot.mjs     responsive screenshot capture
templates/            commit-sheet, storyboard, cinema-QA, design templates
                      + scroll-flight-engine.js — drop-in photoreal scroll-scrubbed-video engine
docs/                 the landing + the four live showcase sites (GitHub Pages)

Requirements

• Claude Code (the skill runs inside it).
• Node 18+ for slopscan (zero dependencies).
• Playwright for motionqa / shoot (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.

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