auteur

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.

FLUXWebGL fluid that tears the wordmark under the cursor

SWARM131,072 GPU particles on a curl-noise field

STATICBroadcast-glitch type you can shred with a drag

HALEA CC0 microscope taken apart on scroll — sourced, not generated

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

PROOFFive screens of a production floor — a product, not a page

DRIFTA 3D world of monoliths and volumetric fog you fly through

ATLASA photoreal flight: dunes → canyon → coast → summit

ABYSSAn ocean dive, scroll-scrubbed video with a camera dolly

HOROBuilt 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