| 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
- Commits the art direction in writing before any markup — one hue, one type system, a motion budget, named anti-references.
- Generates or sources the assets: local image/video CLIs, Blender, depth maps, CC0 meshes and HDRIs with their licences recorded.
- Builds from proven recipes — one WebGL context, transform/opacity motion, scroll state machines.
- 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)
