auteur – skill Thiết kế & UI cho agent AI

Auteur Skill

> Ported from [agiwhitelist/auteur](https://github.com/agiwhitelist/auteur) (MIT), snapshot

> commit [9bca227d](https://github.com/agiwhitelist/auteur/commit/9bca227df9877e60dc45d49783c8cbd885eccd9b)

> — see LICENSE. Scripts, templates and references are the upstream files (CRLF→LF), with

> Hermes adaptation notes and references/ path fixes as the only edits.

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.

When to Use

• 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.

Prerequisites

• Node 18+ — every QA gate is a .mjs script run with node via the terminal tool.
• Playwright (for the QA gates) — in the project directory: npm install playwright then npx playwright install chromium. Required by scripts/shoot.mjs, motionqa.mjs, systemscan.mjs, refscout.mjs, chromadiff.mjs, moodboard.mjs (the scripts import playwright at runtime; slopscan.mjs and source.mjs are dependency-light).
• ffmpeg — optional; only for the video/score paths in references/assets.md and references/scroll-flight.md.
• Hermes tools — use image_generate for image generation/editing, terminal for node/ffmpeg/npm, write_file/read_file for project files, vision_analyze to actually look at screenshots, and browser_exec for live-page inspection when a script isn't the right fit.

How to Run

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: Hermes' image_generate tool, 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. moodboard.mjs also downloads the image URLs returned by those search hosts to build the contact sheet.

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 references/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 references/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 references/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 — "find references", "put together a moodboard", "what's the state of the art for X sites" → load references/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 references/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 a dedicated UI-polish/critique pass (upstream paired auteur with a separate 'impeccable' skill, not vendored here) is the right tool and offer to continue only if they want a rebuild.

7. Ambiguous (e.g. plain "make a landing page") → ask exactly one question: "A great conventional landing page, or cinema mode with scroll direction and generated assets?" (upstream phrased these example briefs in Russian; translated here.) 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.

Working relationship with other skills

Auteur *builds*; it does not re-polish foreign UI. If the user has an existing interface that needs refinement, run a separate UI-critique pass (e.g. vision_analyze on screenshots plus the sibling design skills). Upstream paired auteur with an 'impeccable' critique skill (not vendored here); auteur's verify gate and an outside critique measure different things and coexist happily.

Quick Reference

The non-negotiables and the phase table. They 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 |

… (nội dung đầy đủ có trong gói tải về)