auteur

auteur is an open-source Claude Code agent skill that directs the build of cinematic, art-directed websites — from a written commit-sheet through generated assets, a vanilla build, and executable quality gates.

What is auteur?

auteur is an Agent Skill — a SKILL.md file plus reference recipes and runnable scripts — that runs inside Claude Code and any other agent that reads a SKILL.md directory. It takes a natural-language request like "build me a cinematic landing with auteur" and produces a complete static website, built with vanilla HTML/CSS/JS and WebGL, that passes a set of executable anti-slop and motion-quality gates. The project is created by agiwhitelist, is MIT-licensed, and ships zero runtime dependencies, API keys, or build steps; installing it pulls about 1MB of recipes and scripts.

Key Features

auteur's standout feature is that art direction is locked before any code, and every ship is gated by an executable anti-slop linter and a real motion check. The concrete features are:

• Commit-sheet discipline — Art direction (a brand hue, type system, motion budget, named anti-references) is written and committed before any markup, preventing "let's see how it looks" drift.
• slopscan linter — A zero-dependency Node script that fails the build on concrete slop: the 250–290° purple-to-blue AI gradient, transition: all, scroll listeners for animation, autoplay audio, missing posters, WebGL without a prefers-reduced-motion branch, Inter/Space Grotesk defaults, and more. Runs in CI on every shipped page.
• motionqa gate — A Playwright pass that drives the page on a throttled CPU at DPR 2 (1440×900@2x) and fails on dropped frames, long tasks, autoplay sound, or console errors; targets 60fps.
• systemscan gate — For multi-screen products, crawls every route, reads what the browser actually painted, and fails controls that drift over their per-kind budget or lack a visible focus state.
• Recon and sourcing scripts — refscout profiles live award-winning sites (fonts, palette, scroll budget, pinned scenes); moodboard pulls a numbered contact sheet from Bing/Pinterest/are.na; source.mjs fetches licence-clean assets (Poly Haven, Iconify, Google Fonts, Openverse, Coverr) and records licences in a ledger.
• Generated assets via local CLIs — Imagery, video frames, depth maps, and 3D geometry are produced by local tools (Codex/Gemini image gen, Blender headless, Depth-Anything), routed by cost and capability, with graceful fallback to hand-authored assets.
• scroll-flight engine — A drop-in scroll-scrubbed-video engine (templates/scroll-flight-engine.js) adapted from scroll-world (MIT) for photoreal AI-video camera flights.
• Tech stack constraints — One WebGL context, GSAP/Lenis scroll, DOM motion only on transform and opacity, and no runtime dependency; nothing is pulled from a component registry.

Who is it for?

auteur is for anyone using an AI coding agent to produce web pages that need real art direction and measurable quality. It fits these roles:

• Creative developers using Claude Code who want to produce award-style WebGL/GSAP landing pages without hand-writing the art direction and QA pipeline.
• Design engineers building multi-screen products who need a system gate (systemscan) that catches design-system drift across routes.
• AI-agent enthusiasts who want a portable skill they can hand to any model (the README shows Kimi K3 building a site from SKILL.md alone) and get a built site with measurable quality.
• Agencies and studios producing cinematic marketing sites who want a reproducible anti-slop QA gate (slopscan/motionqa) shipped in CI.

What can you do with auteur?

With auteur you can direct an agent to build several kinds of sites, all of which pass the skill's own gates:

• Build a cinematic landing page: Ask for a "cinematic landing with auteur" and get a WebGL particle field or fluid simulation site, like the live showcase's FLUX (WebGL fluid) or SWARM (131,072 GPU particles on a curl-noise field).
• Create a scroll-scrubbed video experience: Use the scroll-flight engine for photoreal flights like ATLAS (dunes → canyon → coast → summit) or ABYSS (underwater dive with camera dolly).
• Build a multi-screen product dashboard: PROOF is a bakery production floor with five routes, deck timers, and a late-runs panel, gated for design-system drift.
• Generate a data-driven visualization site: TRUE NOON computes a year of real sun positions live for your latitude in 145KB with zero raster assets.

How does auteur work?

The pipeline has five enforced phases: (1) Recon — refscout and moodboard gather live references and a numbered contact sheet; (2) Commit-sheet — one art direction is committed to a template before any markup; (3) Generated assets — local CLIs produce imagery, video frames, depth maps, and geometry; (4) Build — from proven recipes (fluid, GPGPU particles, 3D worlds, scroll-morph state machines); (5) Gate — nothing ships until slopscan and motionqa pass.

Pricing

auteur is free and open source under the MIT license; there are no paid tiers, API keys, or required subscriptions. Optional asset-generation CLIs (Codex, Gemini, Blender) are separate local tools you may already have.

FAQ

Is auteur free?

Yes. auteur is MIT-licensed, free to use and modify, and requires no API keys, logins, or paid services. The only optional costs are the local media CLIs (Codex, Gemini, Blender) if you choose to use them for asset generation.

What does auteur do?

auteur is a Claude Code skill that directs the creation of a cinematic website from a natural-language brief. It writes a commit-sheet art direction, generates assets with local CLIs, builds the site with vanilla WebGL/GSAP, then runs slopscan and motionqa gates that must pass before the site ships.

Does auteur need API keys?

No. The skill declares a narrow tool surface of local node and playwright scripts; the only network phases are recon (awwwards, Bing/Pinterest/are.na image search) and sourcing (Poly Haven, Iconify, Google Fonts, Openverse, Coverr), both without authentication.

What are auteur's requirements?

Claude Code (or any agent that reads a SKILL.md), Node 18+ for slopscan, and Playwright for motionqa/shoot/refscout/moodboard. Optional media CLIs include Codex, Gemini/agy, Blender, and ffmpeg for asset generation.

Is auteur a component library?

No. auteur is not a component library and pulls nothing from a registry. Each site is authored from its commit-sheet up, vanilla, with no runtime dependency. If you want ready-made animated components, the README points to shadcn or originkit.dev instead.

Alternatives

auteur distinguishes itself from component libraries and sibling skills:

• shadcn — a component library for dropping ready-made React components into a site, whereas auteur directs a page rather than stocking it.
• originkit.dev — a source of ready-made animated components, similarly a drop-in library rather than a directing pipeline.
• scroll-world — a sibling Claude Code skill by cyw (MIT) focused on AI-video camera flights; auteur adapts its scroll-flight-engine while adding its own asset generation and gates.