English · [简体中文](README.zh-CN.md) 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](https://img.shields.io/github/stars/agiwhitelist/auteur?style=flat-square&color=111111&label=stars)](https://github.com/agiwhitelist/auteur/stargazers) [![Release](https://img.shields.io/github/v/release/agiwhitelist/auteur?style=flat-square&color=111111&label=release)](https://github.com/agiwhitelist/auteur/releases) [![CI](https://img.shields.io/github/actions/workflow/status/agiwhitelist/auteur/ci.yml?style=flat-square&color=111111&label=anti-slop%20gate)](https://github.com/agiwhitelist/auteur/actions/workflows/ci.yml) [![License](https://img.shields.io/badge/license-MIT-111111?style=flat-square)](LICENSE) [![Live](https://img.shields.io/badge/live-10%20sites-ff3b30?style=flat-square)](https://agiwhitelist.github.io/auteur/) **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**](https://agiwhitelist.github.io/auteur/)  ·  [Install](#install-30-seconds)  ·  [The method](#how-it-works)  ·  [The gates](#the-gates-this-is-the-point)
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](https://code.claude.com/docs/en/skills): 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: ```bash npx skills add agiwhitelist/auteur ``` Claude Code · Codex · Cursor · OpenCode · Gemini CLI · Windsurf · Cline · Goose · Copilot · Hermes · Kiro · Roo · OpenHands — [75+ agents](https://www.skills.sh/), 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:** ```bash openclaw skills install git:agiwhitelist/auteur --global ``` **Anything else that reads a `SKILL.md`** — clone it into the agent's skills directory: ```bash 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: ```bash 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. ```bash 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) ```bash 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`](https://github.com/agiwhitelist/auteur/tree/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](https://github.com/cth9191/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](LICENSE). Vendored components retain their own MIT notices (see file headers).