/auteur

name: auteur
description: Design and build complete web experiences from scratch — award-level product and marketing pages, cinematic scroll-directed sites where the page is directed like a film, and multi-screen products (app, dashboard, admin, settings, onboarding, docs site) built as one design system with every component, state and route in one style. Use whenever the user wants to create or redesign a landing page, website, hero section, portfolio, promo or product page; wants scroll animations, storytelling pages, or a site that feels like a movie; or says "make it beautiful", "make it wow", "cinematic", or "design system" — even if they name no technique. Generates its own assets via local CLIs (images, video frames, depth maps, 3D), and gates every ship with an executable anti-slop linter and a screenshot verification loop. Not for polishing a UI someone else built, and not for backend-only work.
version: 1.3.1
user-invocable: true
argument-hint: "[build|direct|system|edit|audit|recon] <brief or target>"
allowed-tools:
  - Bash(node scripts/*)
  - Bash(npx playwright *)
  - Bash(agy *)
  - Bash(codex *)
  - Bash(grok *)
  - Bash(ffmpeg *)

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)

| # | Ban | Instead | |---|-----|---------| | 1 | `border-left`/`border-right` >1px as a colored accent on cards, callouts, alerts | full border, background tint, leading icon, or nothing | | 2 | Gradient text (`background-clip: text` + gradient) | one solid color; emphasis via weight or size | | 3 | Glassmorphism as default (decorative `backdrop-filter` cards) | rare and purposeful, or solid surfaces | | 4 | The hero-metric template (big number, small label, stat row, gradient accent) | evidence in prose, one committed visual | | 5 | Identical card grids (same-size icon+heading+text, repeated) | vary size, structure, or drop the cards entirely | | 6 | Eyebrow kickers (tiny uppercase tracked label) above every section | one deliberate kicker max as a brand system; vary section openings | | 7 | Numbered section scaffolding (01 / 02 / 03) when order carries no meaning | numbers only for a real sequence | | 8 | `Inter` or `Space Grotesk` as the *first* font choice | pick from a contrast-axis pair (see taste.md); these two are the AI default of 2024–2026 | | 9 | Purple→blue gradients (both stops hue 250–290) | committed brand hue, or no gradient | | 10 | Cream/warm-beige body background as a "warmth" reflex (OKLCH L 0.84–0.97, C <0.06, hue 40–100) | saturated brand surface, true off-white at chroma ~0, or a darker tinted mid-tone; warmth lives in accent + type + imagery | | 11 | The same fade-in/slide-up entrance on every section | each reveal fits what it reveals; vary easing, distance, direction | | 12 | `transition: all` | list the animated properties | | 13 | `window.addEventListener('scroll', ...)` | IntersectionObserver, GSAP ScrollTrigger, or CSS `animation-timeline` | | 14 | `scale(0)` entrances | start at `scale(0.95)` + opacity | | 15 | Bento grids of near-identical or empty cells; white-card-on-white bento | bento only with real visual variation per cell, else a different layout | | 16 | Copy tells: "Revolutionize", "Seamless", "Effortless", "Unleash", "Elevate", em-dash–heavy sentences, decoration strips like "BRAND. MOTION. SPATIAL." | concrete claims in plain words | | 17 | More than one marquee per page | one, or none | | 18 | Instrument Serif / Playfair Display as the reflex "elegant serif" | serifs chosen for the brand, not from the AI shortlist |

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 t