English · 简体中文

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
WebGL fluid that tears the wordmark under the cursor

SWARM
131,072 GPU particles on a curl-noise field

STATIC
Broadcast-glitch type you can shred with a drag

HALE
A CC0 microscope taken apart on scroll — sourced, not generated

TRUE NOON
A year of real sun positions, computed live for your latitude

PROOF
Five screens of a production floor — a product, not a page

DRIFT
A 3D world of monoliths and volumetric fog you fly through

ATLAS
A photoreal flight: dunes → canyon → coast → summit

ABYSS
An ocean dive, scroll-scrubbed video with a camera dolly

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