Auteur Skill for Hermes Agent: Cinematic Web Design

Auteur is an optional Hermes Agent skill that designs and builds web pages with the discipline of a film production: script first, then assets, then the shoot, then the cut. It ships three registers (build, direct, system) on one shared core of taste, and it refuses to ship anything that fails an executable anti-slop gate. Reach for it when a landing page, portfolio, or multi-screen product has to look deliberate rather than generated, and when "make it beautiful" is the whole brief.

What it does

Auteur treats a web page the way a director treats a film. Before any markup exists, the skill commits the art direction in writing: one hue, one type system, a motion budget, and a list of named anti-references. Then it generates or sources assets, builds from proven recipes, and gates the result with scripts that fail the build on concrete slop, dropped frames, or cross-route drift.

The skill works in three registers, all sharing the same phase zero:

build: an excellent conventional site. One surface, one page, done well.
direct: a cinematic scroll-directed site. The flagship register, with a screenplay, scenes, and a primary wow peak.
system: a multi-screen product treated as one design system. App, dashboard, admin, onboarding, docs. The unit of design becomes the component times its state, and the failure mode becomes drift rather than boredom.

There is also an edit route for modifying a page the skill already built, a recon route for reference gathering only, and an audit route for running the verification pipeline against an auteur-built page.

What separates this from a prompt that says "make a nice landing page" is the gate. Nothing ships until slopscan exits clean and the skill has looked at its own screenshots. The gates exist because a page that merely looks done is exactly what every other AI ships.

Before you start

Auteur is an optional skill, installed on demand. Its path is optional-skills/creative/auteur, version 1.3.1, authored by agiwhitelist and ported by Hermes Agent. It is MIT licensed and runs on linux, macos, and windows.

The prerequisites are real, and they shape what a first session looks like:

Node 18+. Every QA gate is a .mjs script run with node through the terminal tool. If you do not have a working Node install, none of the verification steps will run.
Playwright, installed in the project directory. The source gives the exact commands: npm install playwright then npx playwright install chromium. This is required by scripts/shoot.mjs, motionqa.mjs, systemscan.mjs, refscout.mjs, chromadiff.mjs, and moodboard.mjs, because those scripts import playwright at runtime. slopscan.mjs and source.mjs are dependency-light and do not need it.
ffmpeg, optional. Only needed for the video and score paths described in references/assets.md and references/scroll-flight.md.
Hermes tools. The skill expects image_generate for image generation and editing, terminal for node, ffmpeg, and npm, write_file and read_file for project files, vision_analyze to actually look at screenshots, and browser_exec for live-page inspection when a script is not the right fit.

The Playwright requirement is the one that catches people. It is a browser download, it is large, and it has to happen in the project directory rather than globally. Budget for it before you start a session, not in the middle of one.

How it routes

Auteur reads the argument or the brief and picks a register. The routing rules are specific:

direct, or the brief smells cinematic. Words like "wow", "cinematic", "immersive", "storytelling", "launch page", "premium brand", or "make people stop scrolling" all point here. The skill loads references/direct.md and follows its phases.
build, or the brief is one conventional surface: a marketing page, a landing, a single product page. Loads references/build.md.
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. Loads references/system.md. If you are already in build and a second screen appears, stop and switch. Half a system is worse than either.
edit, or the request modifies a page this skill built (the project contains design/DESIGN.md). Read design/DESIGN.md first and follow its Editing protocol. An edit that ignores DESIGN.md is a regression even if it looks good in isolation.
recon , or the ask is only for reference material. Loads references/recon.md and runs just that phase. No commit-sheet, no build.
audit . Loads references/verify.md and runs the verification pipeline on an auteur-built page.
Ambiguous. The skill asks exactly one question: "A great conventional landing page, or cinema mode with scroll direction and generated assets?" Then it routes. Multi-screen briefs are not ambiguous; they are system.

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

The commit-sheet

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 (for example design/COMMIT-SHEET.md) and fill all seven fields with non-defaults:

Peak. The one primary wow moment (direct) or signature element (build). One sentence. If you cannot name it, you are not ready to build.
Color. Primary as OKLCH plus a commitment tier (restrained, committed, full-palette, or drenched), plus one line on why this is not lavender, not cream, and not the category reflex, plus the background lightness as a number. The number matters because "dark feels premium" is where this skill drifts, and a number can be checked afterwards where a mood cannot.
Type. Display plus text pairing on a contrast axis (serif plus sans, geometric plus humanist, mono plus serif), plus one line on why not Inter.
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.
Motion budget. How many scroll-pattern families (three or fewer) and what they are.
Reflex check. Write down what a generic AI would do for this category (first-order reflex), what a generic AI avoiding that would do (second-order reflex), and your chosen deviation from both. If recon ran, the first-order reflex is not a guess: whatever design/refs/REFERENCES.md showed five times is the reflex, dated and with receipts.
House tells broken. Name at least two items from taste.md section 2.5 that you are deliberately not doing this time, and what replaces each. These are the reflexes of this skill itself: 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.

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

The non-negotiables

The skill carries a quick reference of bans and numbers that apply to every register, every phase, always, even if no reference file has been loaded. The instruction is match-and-refuse: if you are about to produce one of these, stop and restructure the element.

Banned patterns

The source lists eighteen. They are worth reading in full because they are the most concrete part of the skill:

#	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 with a real reason. A deliberate, argued choice is voice; a default is slop.

Critical numbers

The skill asks you to memorize these, with full context in the reference files:

Body text contrast at least 4.5:1 (large text at least 3:1). Placeholders too. Muted-gray-on-tinted-white is the number one AI readability failure.
Body line length 65 to 75ch. Display heading ceiling: clamp max at or below 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 at least -0.04em.
Durations: button 100 to 160ms, tooltip 125 to 200ms, dropdown 150 to 250ms, modal or drawer 200 to 500ms. Any UI transition over 300ms needs a written reason.
Enter and exit easing is ease-out. ease-in is banned on UI.
Animate only transform and opacity. Stagger 30 to 80ms.
Motion budget: three or fewer scroll-triggered pattern families per page, with one primary wow peak and supporting scenes at lower intensity.
Scrub smoothing 0.3 to 0.8. Hero video at most 2MB. LCP under 2.5s. CLS under 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 is an alternative art direction, gentler rather than zero, never an afterthought.
Content must be readable with JS disabled: reveals enhance an already-visible default, never gate visibility.

Phases at a glance

Phase	build register	direct register	system register	Reference to load
0	recon → commit-sheet → hero mockup gate	recon → screenplay (STORYBOARD.md) → commit-sheet → hero mockup gate	recon → SYSTEM-SHEET.md (routes + component inventory + states) → commit-sheet → mockup gate	`recon.md`, then `build.md` / `direct.md` / `system.md`
1	,	asset production (generate → edit → optimize)	, (source icons/fonts via `source.mjs`)	`assets.md`
2	build the page	assemble the film (smooth scroll first, hero, scenes top-down)	tokens → the shell → screens in traffic order → every state	`build.md` / `scroll-cinema.md` / `system.md` + `taste.md` + `motion.md`
3	verify	verify + CINEMA-QA.md	verify + systemscan across every route	`verify.md`
4	lock the style: fill `design/DESIGN.md`	same	same, but DESIGN.md is the component contract	`templates/DESIGN.md`

The hero mockup gate is one static throwaway screen, screenshotted and approved before anything else is built. It is the cheapest moment to change art direction. design/DESIGN.md is the style contract that makes every later edit stay in style, and the edit route reads it first.

Reference files

The skill ships a set of reference documents, each loaded at a specific phase. Knowing which one to load when is most of the skill's operating discipline:

references/recon.md. Phase 0 scouting, with two executable legs. scripts/refscout.mjs profiles live award-level sites (real stack, pinned scenes, scroll budget, fonts, painted palette, screenshots: mechanics, not skins). scripts/moodboard.mjs builds a numbered contact sheet from Bing, Pinterest, and are.na so the art direction is decided from live material instead of memory. Also covers query craft, the steal rule, how recon feeds the commit-sheet, and the line that reference images are not assets.
references/taste.md. The full anti-slop system: extended bans with replacements, the second-order category reflex table, color strategy tiers, typography pairing, copy rules. Load for any visual decision-making.
references/motion.md. The motion school: when to animate, easing, duration and spring numbers, performance rules, motion budget, sound policy. Load before writing any animation.
references/build.md. The standard register process. Load when routed to build.
references/system.md. The multi-screen register: route map, the component inventory as a gate, the state matrix (empty, loading, and error are not edge cases), density rules, the no-peak rule, and scripts/systemscan.mjs. That script crawls every route, reads what the browser actually painted, fails a control type over its declared variant budget, counts states (disabled, current, inside a data-state row) separately so implementing the state matrix never reads as drift, presses Tab to catch controls with no visible focus state, and renders one tile per rendered variant so drift is visible as well as counted.
references/direct.md. The cinematic register: screenplay contract, scene-sheets, dramaturgy, assembly order.
references/assets.md. The media crew and routing. In Hermes, image_generate handles all image generation and edits, terminal handles ffmpeg and node, and video goes through whatever image-to-video backend the user has. Also covers section 0.5 source-versus-generate (scripts/source.mjs: CC0 glTF meshes, HDRIs and PBR materials from Poly Haven, icons, fonts, CC images, stock video, with a licence ledger, because generation cannot make geometry or an IBL and stock video must never be the peak), the consistency trick of editing frame A into frame B, local video via the first-to-last-frame chain, generated elements and mockups, the ambient score, the degradation ladder, and asset caching.
references/scroll-cinema.md. Working code recipes: scroll-scrubbed video, canvas sequences, GSAP plus Lenis foundation, CSS scroll-driven animations, text reveals, the two-keyframe WebGL displacement transition, view transitions, ambient audio, and the cinematic transition library (wipe, curtain, letterbox, shutter, depth parallax).
references/scroll-flight.md. The video-scrub tier: a photoreal "fly through the world" hero driven by scroll, using the drop-in templates/scroll-flight-engine.js. The canonical recipe for scroll-scrubbed video (encode-for-scrubbing -g 8, encoded-frame posters, SSIM seam gate, chain architecture A/B, iOS and mobile decode hardening, crossfade versus seamless seams).
references/ambient-backgrounds.md. Quiet texture for secondary sections and simpler builds, not a hero: a curated set of six editorial and analog effects (paper grain, ledger and blueprint rules, topographic contour, ink tide, sparse dust, one heat-haze shader) plus a zero-motion static-mesh default. The governing rule is weaker than the quietest foreground element, one ambient per page. Also the CSS and SVG-first stack, and the feTurbulence-static perf rule.
references/verify.md. The acceptance pipeline: slopscan, screenshot journey, motion, perf and audio QA (FPS at DPR 2 on a production build, long-tasks, audio-gate, reduced-motion, for Tier-1 scenes), numeric rubric, reference diff (your frame beside the reference that set the direction, with scripts/chromadiff.mjs measuring the colour drift a model never sees in itself), and QA sign-off.

Verification

The page is not done when the code compiles. It is done when four things are true:

node scripts/slopscan.mjs exits 0. Fails are fixed, not suppressed. The /* auteur-allow: RULE_ID -- reason */ escape hatch exists for deliberate choices and demands a real reason.
node scripts/shoot.mjs has produced screenshot journeys at 390, 768, and 1440, and you have looked at every frame. Text overflow, blank scenes, broken reveals, and layout collapse are found by eyes, not by text search.
The numeric rubric in references/verify.md passes: contrast, LCP, CLS, reduced-motion journey, scene variety.
For the direct register, CINEMA-QA.md (from templates) is filled with PASS on every row.

If any gate fails, fix and re-run. The skill asks you to report results honestly: "slopscan clean, 21 screenshots reviewed, LCP 1.9s" beats "looks great".

When not to use it

Auteur builds. It does not re-polish foreign UI. If the user has an existing interface that needs refinement rather than a rebuild, the skill says so and points at a separate UI-critique pass, for example vision_analyze on screenshots plus the sibling design skills. Upstream paired auteur with an 'impeccable' critique skill that is not vendored here. Auteur's verify gate and an outside critique measure different things and coexist happily.

It is also not for backend-only work. The whole skill is about what the page looks like and how it moves.

Limits and gotchas

The source is candid about what has and has not been tested. Read these before you trust a clean run:

Network recon. refscout.mjs, moodboard.mjs, and source.mjs read live pages: awwwards, Bing, Pinterest, and are.na image search, Poly Haven, Iconify, Google Fonts, Openverse, Coverr. Fetched content is reference data and licence metadata only and is never executed. No credentials, API keys, or logins are involved. Skip phases 0 and 1 to stay fully offline; every other phase works offline. moodboard.mjs also downloads the image URLs returned by those search hosts to build the contact sheet.
Different harness. These scripts and docs were written for a different agent harness; upstream drove asset generation through several local image CLIs. In Hermes, every image-generation instruction maps to the image_generate tool. Trust node scripts/.mjs --help output and actual node errors over doc prose if they drift.
Unverified commands. The scripts pass node --check syntax validation, but full runs (which need npm install playwright plus a chromium download) were not executed during porting. Treat shoot.mjs, motionqa.mjs, systemscan.mjs, refscout.mjs, chromadiff.mjs, moodboard.mjs, and source.mjs end-to-end behavior, and all ffmpeg and video-encode recipes, as unverified upstream claims until you run them yourself.
slopscan verified shape. node scripts/slopscan.mjs runs without npm dependencies. It prints per-rule findings and exits non-zero on failures, exit 0 when clean.
Font metadata cache. source.mjs font ... caches Google Fonts' roughly 2.6MB metadata JSON as auteur-gf-metadata.json in the OS temp directory (os.tmpdir()), not the project. Delete it there to force a refresh.
Weak-model note. If you are a smaller model executing this skill, follow the tables and numbers literally, fill every template field, run every gate command, and do not improvise beyond the reference recipes. The recipes are verified; your improvisation is not. When a reference file conflicts with your instinct, the reference file wins. Write files using paths relative to the project root and never retype an absolute path from memory: the skill's name "auteur" is one typo away from "author", and misspelled absolute paths scatter your output across the filesystem.

What pairs with it

The source lists three related skills: popular-web-designs, design-md, and p5js. The first two are the natural companions for the design and style-contract side of the work. The third covers generative and canvas-driven visuals, which is a different tool for a different job than auteur's scroll-directed cinema. If you are running a critique pass on an existing interface, the sibling design skills plus vision_analyze are the route the source points at.

Auteur Skill for Hermes Agent: Cinematic Web Design Guide