An agentic skills framework & software development methodology that works.
Claude Code skill for cinematic website builds
Auteur is a skill pack that helps Claude Code direct a website like a film. You start with a commit-sheet, generate assets with local tools, build the page, then run anti-slop and motion checks before anything ships.
Builders who want Claude Code to follow a written art direction, generate assets, and pass a build gate before shipping a site.
You can turn a brief into a website with a fixed visual direction and an automated gate against sloppy output.
What it does
Commit-sheet workflow
Locks the art direction before markup, with named brand color, type system, motion budget, and anti-references.
Generated asset pipeline
Uses local CLIs for imagery, video frames, depth maps, and 3D geometry instead of handwaving the visuals.
Anti-slop linter
Runs `scripts/slopscan.mjs` to fail on patterns like weak gradients, `transition: all`, autoplay audio, and missing reduced-motion handling.
Motion QA gate
Runs `scripts/motionqa.mjs` with Playwright to check frame drops, long tasks, console errors, and audio on a throttled browser.
Reference scouting and sourcing
Includes `scripts/refscout.mjs`, `scripts/moodboard.mjs`, and `scripts/source.mjs` for live research, contact sheets, and licence-clean assets.
System drift checks
Uses `scripts/systemscan.mjs` and `scripts/chromadiff.mjs` to catch route drift, focus issues, and colour or lightness changes.
Reusable layout recipes
Provides `reference/*.md` guides for build, motion, taste, verify, and scroll-cinema / scroll-flight patterns.
How to get it
- 1Any agent — one command. Detects what you have installed and writes to each agent's…
npx skills add agiwhitelist/auteur
- 2Claude Code, as a plugin — installs and updates in place
/plugin marketplace add agiwhitelist/auteur /plugin install auteur@auteur
- 3OpenClaw
openclaw skills install git:agiwhitelist/auteur --global
- 4Anything 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
- 5Then just ask
"build me a cinematic landing with auteur"
README
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 / 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:
- Recon.
refscoutprofiles live award-winning sites — the libraries they really load, how many scenes they pin, their scroll budget, the fonts and palette as painted — andmoodboardpulls 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. - 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.
- 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.
- 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.
- 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).
Files in the repo
- .claude-plugin
- .github
- assets
- reference
- scripts
- templates
- .gitignore
- DESIGN.md
- LICENSE
- package-lock.json
- package.json
- PRODUCT.md
- README.md
- README.zh-CN.md
- SKILL.md
- skills.sh.json
Discussion (0)
Ask about usage, or say what you built with itSign in to join the discussion.
No comments yet. Be the first to say what this is good for.
More skills

Turn any codebase, with its docs, SQL schemas, configs, and PDFs, into a queryable knowledge graph. A /graphify skill for Claude Code, Cursor, Codex, and Gemini CLI: local deterministic AST parsing, every edge explained, no vector store.
Topic in, narrated explainer video out. A Claude Code / Codex skill that turns any topic into a black-canvas motion-graphics explainer video with TTS voiceover, subtitles and a chapter progress bar. Chinese or English; every frame drawn in code with Remotion.
Public repository for Agent Skills
Open-source AI job search: scan job portals, evaluate listings into a structured A-H report with a global 1-5 score, tailor your CV, track applications — runs locally in your AI coding CLI (Claude Code, Codex, OpenCode, Antigravity…)

Production-grade engineering skills for AI coding agents.









