Auteur

Auteur designs and builds web experiences the way a film director makes a film: script first, then assets, then the shoot, then the cut. It has three registers — build (an excellent conventional site), direct (a cinematic scroll-directed site) and system (a multi-screen product as one design system) — on one shared core of taste. Nothing ships until the page passes an executable anti-slop gate and the skill has looked at its own output.

Use this when

• A landing page, marketing site, hero section, portfolio or product page has to be built or redesigned — and looking generic is not acceptable.
• The brief asks for scroll animation, storytelling, or a site that feels like a film.
• A product spans several screens that must feel like one thing — app, dashboard, admin, onboarding, docs.
• Someone says make it beautiful, make it wow, cinematic, or design system, naming no technique.

Not for polishing a UI someone else built, and not for backend-only work.

What it actually does

1. Commits the art direction in writing before any markup — one hue, one type system, a motion budget, named anti-references.
2. Generates or sources the assets: local image/video CLIs, Blender, depth maps, CC0 meshes and HDRIs with their licences recorded.
3. Builds from proven recipes — one WebGL context, transform/opacity motion, scroll state machines.
4. Gates the result: slopscan fails the build on concrete slop, motionqa fails it on dropped frames, systemscan fails it on cross-route drift.

Network access

The recon and sourcing scripts read live pages (awwwards, Bing/Pinterest/are.na image search, Poly Haven, Iconify, Google Fonts, Openverse, Coverr). Fetched content is treated as reference data and licence metadata — never executed, and no credentials, API keys or logins are involved. Skip phases 0–1 entirely if you don't want outbound requests; every other phase works offline.

Non-negotiables

These apply to every register, every phase, always — even if no reference file has been loaded. Match-and-refuse: if you are about to produce one of these, stop and restructure the element.

Banned (rewrite, don't tweak)

A ban may be overridden only through a written auteur-allow (see Verification) with a real reason — a deliberate, argued choice is voice; a default is slop.

Critical numbers (memorize; full context in reference files)

• Body text contrast ≥ 4.5:1 (large text ≥ 3:1). Placeholders too. Muted-gray-on-tinted-white is the #1 AI readability failure.
• Body line length 65–75ch. Display heading ceiling: clamp max ≤ 6rem for headings in prose flow — a wordmark or a deliberately type-led hero is exempt and the commit-sheet must say so. Display letter-spacing ≥ −0.04em.
• Durations: button 100–160ms · tooltip 125–200ms · dropdown 150–250ms · modal/drawer 200–500ms · any UI >300ms needs a written reason.
• Enter/exit easing = ease-out. ease-in is banned on UI.
• Animate only transform and opacity. Stagger 30–80ms.
• Motion budget: ≤ 3 scroll-triggered pattern families per page; one primary wow peak, supporting scenes at lower intensity.
• Scrub smoothing 0.3–0.8. Hero video ≤ 2MB. LCP < 2.5s. CLS < 0.1.
• Fullscreen passes (bloom, grain, DoF, any full-frame shader) are priced per pixel, not per object — they, not geometry, are what blows the frame budget. A perf number counts only when measured at DPR 2 on a production build: DPR 1 quarters the cost of every such pass, and a dev server roughly doubles the frame.
• prefers-reduced-motion = an alternative art direction (gentler, not zero), never an afterthought.
• Content must be readable with JS disabled: reveals enhance an already-visible default, never gate visibility.

Routing

Read the argument / brief and route:

1. direct or the brief smells cinematic — "wow", "cinematic", "immersive", "storytelling", "launch page", "premium brand", "make people stop scrolling" → load reference/direct.md and follow its phases. This is the flagship register.
2. build or the brief is ONE conventional surface — a marketing page, a landing, a single product page → load reference/build.md.
3. system or the brief has more than one screen that must feel like one product — app, dashboard, admin, settings, onboarding, a docs or content site with real navigation → load reference/system.md. The unit of design becomes the component × state, the failure mode becomes drift rather than boredom, and there is deliberately no peak. If you are already in build and a second screen appears, stop and switch: half a system is worse than either.
4. edit or the request modifies a page this skill built (the project contains design/DESIGN.md) — "add a section", "change the pricing", "swap the hero copy" → read design/DESIGN.md FIRST and follow its Editing protocol: reuse its tokens, section-opening patterns, and motion families; after the change run slopscan and re-shoot the affected viewports. An edit that ignores DESIGN.md is a regression even if it looks good in isolation.
5. recon <brief> or the ask is only for reference material — "найди референсы", "собери мудборд", "what's the state of the art for X sites" → load reference/recon.md and run just that phase: scout live sites, build the moodboard, hand back design/refs/REFERENCES.md (with the steal: lines filled) and design/moodboard/contact-sheet.png (with the read filled). No commit-sheet, no build.
6. audit <path-or-url> → load reference/verify.md and run the verification pipeline on an auteur-built page. If the target is an existing UI auteur didn't build and the user wants it polished rather than rebuilt, say that /impeccable is the right tool and offer to continue only if they want a rebuild.
7. Ambiguous (e.g. plain "сделай лендинг") → ask exactly one question: "Обычный отличный лендинг или кино-режим со scroll-режиссурой и генерацией ассетов?" Then route. (Multi-screen briefs are not ambiguous — they are system.) Don't ask anything else yet — each register runs its own intake.

All three registers share phase zero, and its centre of gravity is the commit-sheet. Order differs: build runs recon → commit-sheet → mockup; direct runs recon → storyboard → commit-sheet → mockup, because the film's scenes are what the six decisions get made about; system runs recon → system-sheet (route map + component inventory) → commit-sheet → mockup, because the six decisions get made about a product, not a page. Either way nothing is coded before the sheet is full.

The commit-sheet (before any code, both registers)

Slop is what happens when defaults make the decisions. The commit-sheet forces seven real decisions onto paper before the first line of code. Copy templates/COMMIT-SHEET.md into the project (e.g. design/COMMIT-SHEET.md) and fill all seven fields with non-defaults:

1. Peak — the ONE primary wow moment (direct) or signature element (build). One sentence. If you can't name it, you're not ready to build.
2. Color — primary as OKLCH + commitment tier (restrained / committed / full-palette / drenched) + one line: why this is not lavender, not cream, and not the category reflex + the background lightness as a number (target mean L), because "dark feels premium" is where this skill drifts, and a number can be checked afterwards where a mood cannot.
3. Type — display + text pairing on a contrast axis (serif+sans, geometric+humanist, mono+serif...) + one line: why not Inter.
4. Grid break — the one concrete thing that breaks the symmetric-grid default: an overlap, an asymmetric split, a diagonal flow, a full-bleed interruption. Name it specifically.
5. Motion budget — how many scroll-pattern families (≤3) and what they are.
6. Reflex check — write down: (a) what a generic AI would do for this category (first-order reflex), (b) what a generic AI avoiding (a) would do (second-order reflex — e.g. fintech → "terminal dark mode" is also saturated now), (c) your chosen deviation from both. If recon ran, (a) is not a guess: whatever design/refs/REFERENCES.md showed five times is the reflex, dated and with receipts.
7. House tells broken — name the two (minimum) items from taste.md §2.5 you are deliberately not doing this time, and what replaces each. Fields 6a/6b are the reflexes of the category; these are the reflexes of this skill, which recur across unrelated projects and are invisible from inside any one of them: near-black backgrounds, mono service labels, the logo/status/action header, the scroll-instruction footer, amber-or-acid accents, the wordmark-as-hero, glow standing in for lighting. Measured across nine showcase builds, eight were dark and three landed within 0.002 of the same lightness. A tell that genuinely belongs here can stay — say why, as with an auteur-allow.

Gate: every field filled with a specific, non-default answer. An empty or generic field ("modern, clean look") means stop and decide. This artifact is checked again at verification.