Directs a website like a film: a commitment sheet before code, generated assets, a slop linter and motion checks for award-level marketing pages.
$ npx skills add https://craftwork.design/skills/auteur -a claude-code -y
Installs into .claude/skills/auteur. Add -g for every project.
SKILL.md
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)
#
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)
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 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.
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:
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.
build or the brief is ONE conventional surface — a marketing page, a landing, a single product page → load reference/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 → 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.
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.
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.
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.
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:
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.
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.
Type — display + text pairing on a contrast axis (serif+sans, geometric+humanist, mono+serif...) + one line: 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 (≤3) and what they are.
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.
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.
The hero mockup gate (one static throwaway screen, screenshotted and approved before anything else is built) is the cheapest moment to change art direction — details in each register's reference. design/DESIGN.md is the style contract that makes every later edit stay in style (the edit route reads it first).
Never skip a gate because the intermediate result "looks done". The gates exist because a page that merely looks done is exactly what every other AI ships.
Reference files
reference/recon.md — phase 0 scouting, two executable legs: scripts/refscout.mjs profiles live award-level sites (real stack, pinned scenes, scroll budget, fonts, painted palette, screenshots — mechanics, not skins) and scripts/moodboard.mjs builds a numbered contact sheet from Bing / Pinterest / are.na so the art direction is decided from live material instead of memory. Also: query craft, the steal rule, how recon feeds the commit-sheet, and the "reference images are not assets" line. Load at the top of phase 0.
reference/taste.md — the full anti-slop system: extended bans with replacements, second-order category reflex table, color strategy tiers, typography pairing, copy rules. Load for any visual decision-making.
reference/motion.md — the motion school: when to animate, easing/duration/spring numbers, performance rules, motion budget, sound policy. Load before writing any animation.
reference/build.md — the standard register process. Load when routed to build.
reference/system.md — the multi-screen register: route map, the component inventory as a gate, the state matrix (empty/loading/error are not edge cases), density rules, the no-peak rule, and scripts/systemscan.mjs — which crawls every route, reads what the browser actually painted, fails a control type over its declared variant budget — counting 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. Load when routed to system.
reference/direct.md — the cinematic register: screenplay contract, scene-sheets, dramaturgy, assembly order. Load when routed to direct.
reference/assets.md — the media crew and routing (agy / codex / grok-4.5 for images, grok for video, MiniMax for score, ffmpeg), §0.5 source-vs-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 (edit frame A into frame B), local video via the first→last-frame chain, generated elements/mockups, the ambient score, the degradation ladder, and asset caching. Load during direct phase 1.
reference/scroll-cinema.md — working code recipes: scroll-scrubbed video, canvas sequences, GSAP+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). Load during assembly.
reference/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/mobile decode hardening, crossfade-vs-seamless seams). Load when the hero should be photoreal footage/AI-video rather than real-time WebGL.
reference/ambient-backgrounds.md — quiet texture for secondary sections and simpler builds (not a hero): a curated 6 editorial/analog effects (paper grain, ledger/blueprint rules, topographic contour, ink tide, sparse dust, one heat-haze shader) + a zero-motion static-mesh default. The governing rule (weaker than the quietest foreground element; one ambient per page), the CSS/SVG-first stack, and the feTurbulence-static perf rule. Load when a section needs to not be flat but must NOT compete with copy.
reference/verify.md — the acceptance pipeline: slopscan → screenshot journey → motion/perf/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) → QA sign-off. Load at phase 3.
Verification is part of the build
The page is not done when the code compiles. It is done when:
node scripts/slopscan.mjs <src-dir> exits 0 (fails are fixed, not suppressed — /* auteur-allow: RULE_ID -- reason */ exists for deliberate choices and demands a real reason);
node scripts/shoot.mjs <url> has produced screenshot journeys at 390 / 768 / 1440 and you have looked at every frame — text overflow, blank scenes, broken reveals, layout collapse are found by eyes, not by grep;
the numeric rubric in reference/verify.md passes (contrast, LCP, CLS, reduced-motion journey, scene variety);
for direct register: CINEMA-QA.md (from templates) is filled with PASS on every row.
If any gate fails — fix and re-run. Report results honestly: "slopscan clean, 21 screenshots reviewed, LCP 1.9s" beats "looks great".
Working relationship with other skills
Auteur builds; it does not re-polish foreign UI. If the user has an existing interface that needs refinement, recommend /impeccable. If auteur's own output needs an outside critique, /impeccable critique on the built page is a compatible second opinion — auteur's verify gate and impeccable's critique measure different things and coexist happily.
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; 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).
