<div align="center">
English · [简体中文](README.zh-CN.md)
<img src="assets/readme/hero.webp" width="880" alt="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.
[](https://github.com/agiwhitelist/auteur/stargazers)
[](https://github.com/agiwhitelist/auteur/releases)
[](https://github.com/agiwhitelist/auteur/actions/workflows/ci.yml)
[](LICENSE)
[](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)
<br>
<img src="assets/readme/hero-anim.webp" width="760" alt="Animation: dragging the cursor across the landing page tears the particle field apart and it re-forms into the wordmark">
<sub>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.</sub>
</div>
---
## 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
```
<sub>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.</sub>
**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.
<table>
<tr>
<td width="33%" align="center">
<a href="https://agiwhitelist.github.io/auteur/showcase/flux/"><img src="assets/readme/flux.webp" alt="FLUX — the wordmark drawn in neon outline over a magenta and cyan fluid simulation"></a>
<br><b>FLUX</b><br><sub>WebGL fluid that tears the wordmark under the cursor</sub>
</td>
<td width="33%" align="center">
<a href="https://agiwhitelist.github.io/auteur/showcase/swarm/"><img src="assets/readme/swarm.webp" alt="SWARM — the word SWARM glowing orange, formed from a field of particles"></a>
<br><b>SWARM</b><br><sub>131,072 GPU particles on a curl-noise field</sub>
</td>
<td width="33%" align="center">
<a href="https://agiwhitelist.github.io/auteur/showcase/static/"><img src="assets/readme/static.webp" alt="STATIC — huge broadcast-style type with chromatic glitch fringing"></a>
<br><b>STATIC</b><br><sub>Broadcast-glitch type you can shred with a drag</sub>
</td>
</tr>
<tr>
<td align="center">
<a href="https://agiwhitelist.github.io/auteur/showcase/hale/"><img src="assets/readme/hale.webp" alt="HALE — a brass microscope exploded into labelled parts on a dark stage"></a>
<br><b>HALE</b><br><sub>A CC0 microscope taken apart on scroll — sourced, not generated</sub>
</td>
<td align="center">
<a href="https://agiwhitelist.github.io/auteur/showcase/noon/"><img src="assets/readme/noon.webp" alt="TRUE NOON — an analemma curve of the sun's position drawn across a measured grid"></a>
<br><b>TRUE NOON</b><br><sub>A year of real sun positions, computed live for your latitude</sub>
</td>
<td align="center">
<a href="https://agiwhitelist.github.io/auteur/showcase/proof/"><img src="assets/readme/proof.webp" alt="PROOF — a bakery production dashboard with deck timers, a late-runs panel and a schedule"></a>
<br><b>PROOF</b><br><sub>Five screens of a production floor — a product, not a page</sub>
</td>
</tr>
<tr>
<td align="center">
<a href="https://agiwhitelist.github.io/auteur/showcase/drift/"><img src="assets/readme/drift.webp" alt="DRIFT — flying between pale cyan monoliths in volumetric fog"></a>
<br><b>DRIFT</b><br><sub>A 3D world of monoliths and volumetric fog you fly through</sub>
</td>
<td align="center">
<a href="https://agiwhitelist.github.io/auteur/showcase/atlas/"><img src="assets/readme/atlas.webp" alt="ATLAS — sea stacks and breaking surf lit by sunrays through a canyon mouth"></a>
<br><b>ATLAS</b><br><sub>A photoreal flight: dunes → canyon → coast → summit</sub>
</td>
<td align="center">
<a href="https://agiwhitelist.github.io/auteur/showcase/abyss/"><img src="assets/readme/abyss.webp" alt="ABYSS — a whale silhouette passing through blue water as marine snow drifts up"></a>
<br><b>ABYSS</b><br><sub>An ocean dive, scroll-scrubbed video with a camera dolly</sub>
</td>
</tr>
<tr>
<td align="center" colspan="3">
<a href="https://agiwhitelist.github.io/auteur/showcase/horo/"><img src="assets/readme/horo.webp" width="66%" alt="HORO LIMITED — a green enamel watch dial drawn in CSS beside a serif headline on a light page"></a>
<br><b>HORO</b><br><sub>Built by Kimi K3, not Claude — the dial is CSS and keeps your time</sub>
</td>
</tr>
</table>
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).