Auteur

Проектирование и сборка кинематографичных веб-страниц уровня наград.

Метаданные навыка

Справочник: полный SKILL.md

Навык Auteur

Портирован из agiwhitelist/auteur (MIT), снимок коммита 9bca227d — см. LICENSE. Скрипты, шаблоны и справочные файлы взяты из апстрима как есть (CRLF→LF); единственные правки — заметки об адаптации под Hermes и исправленные пути references/.

Auteur проектирует и собирает веб-страницы так, как режиссёр снимает фильм: сначала сценарий, потом реквизит, потом съёмка, потом монтаж. У навыка три регистра — build (отличный сайт в привычном формате), direct (кинематографичный сайт, управляемый скроллом) и system (многоэкранный продукт как единая дизайн-система) — и одно общее ядро вкуса. Ничего не уходит в релиз, пока страница не пройдёт исполняемый анти-слоп-гейт и навык сам не посмотрит на собственный результат.

Когда использовать

• Нужно собрать или переделать лендинг, маркетинговый сайт, hero-секцию, портфолио или страницу продукта — и «выглядит как у всех» не вариант.
• В брифе просят скролл-анимацию, сторителлинг или сайт, который ощущается как фильм.
• Продукт занимает несколько экранов, которые должны выглядеть одним целым — приложение, дашборд, админка, онбординг, документация.
• Кто-то говорит сделай красиво, сделай вау, кинематографично или дизайн-система, не называя конкретной техники.

Не для полировки чужого UI и не для чисто бэкенд-задач.

Требования

• Node 18+ — каждый QA-гейт — это .mjs-скрипт, который запускается через node в инструменте terminal.
• Playwright (для QA-гейтов) — в каталоге проекта: npm install playwright, затем npx playwright install chromium. Нужен для scripts/shoot.mjs, motionqa.mjs, systemscan.mjs, refscout.mjs, chromadiff.mjs, moodboard.mjs (скрипты импортируют playwright во время выполнения; у slopscan.mjs и source.mjs зависимостей почти нет).
• ffmpeg — опционально; только для видео- и звуковых сценариев из references/assets.md и references/scroll-flight.md.
• Инструменты Hermes — image_generate для генерации и редактирования изображений, terminal для node/ffmpeg/npm, write_file/read_file для файлов проекта, vision_analyze, чтобы по-настоящему смотреть на скриншоты, и browser_exec для осмотра живой страницы, когда скрипт не подходит.

Как запускать

Что навык делает на самом деле

1. Фиксирует арт-дирекшн письменно, до первой строки разметки — один оттенок, одна типографическая система, бюджет движения, названные анти-референсы.
2. Генерирует или подбирает ассеты: инструмент Hermes image_generate, Blender, карты глубины, CC0-меши и HDRI с записанными лицензиями.
3. Собирает по проверенным рецептам — один контекст WebGL, движение только через transform/opacity, конечные автоматы для скролла.
4. Прогоняет результат через гейты: slopscan валит сборку на конкретном слопе, motionqa — на выпавших кадрах, systemscan — на расхождении между маршрутами.

Доступ к сети

Скрипты разведки и подбора ассетов читают живые страницы (awwwards, поиск картинок Bing/Pinterest/are.na, Poly Haven, Iconify, Google Fonts, Openverse, Coverr). Загруженный контент используется только как референсы и метаданные лицензий — он никогда не исполняется, и никакие учётные данные, API-ключи или логины в процессе не участвуют. Если исходящие запросы нежелательны, полностью пропустите фазы 0–1; все остальные фазы работают офлайн. moodboard.mjs дополнительно скачивает картинки по URL, которые вернули поисковые хосты, чтобы собрать контактный лист.

Маршрутизация

Прочитайте аргумент / бриф и выберите маршрут:

1. direct или бриф пахнет кино — «вау», «кинематографично», «иммерсивно», «сторителлинг», «страница запуска», «премиальный бренд», «чтобы люди перестали листать» → загрузите references/direct.md и следуйте его фазам. Это флагманский регистр.
2. build или в брифе ОДНА обычная поверхность — маркетинговая страница, лендинг, отдельная страница продукта → загрузите references/build.md.
3. system или в брифе больше одного экрана, которые должны ощущаться одним продуктом — приложение, дашборд, админка, настройки, онбординг, документация или контентный сайт с настоящей навигацией → загрузите references/system.md. Единицей дизайна становится компонент × состояние, режимом отказа — расползание (drift), а не скука, и пика здесь намеренно нет. Если вы уже в build, а на горизонте появился второй экран, — остановитесь и переключитесь: половина системы хуже любого из двух вариантов.
4. edit или запрос меняет страницу, которую собрал этот навык (в проекте есть design/DESIGN.md) — «добавь секцию», «поменяй цены», «замени текст в hero» → СНАЧАЛА прочитайте design/DESIGN.md и следуйте его протоколу редактирования: переиспользуйте токены, паттерны открытия секций и семейства движения; после правки запустите slopscan и переснимите затронутые вьюпорты. Правка, игнорирующая DESIGN.md, — регрессия, даже если сама по себе выглядит хорошо.
5. recon <brief> или просят только референсы — «найди референсы», «собери мудборд», «что сейчас считается передним краем для сайтов X» → загрузите references/recon.md и выполните только эту фазу: разведайте живые сайты, соберите мудборд, верните design/refs/REFERENCES.md (с заполненными строками steal:) и design/moodboard/contact-sheet.png (с заполненным разбором). Без commit-sheet, без сборки.
6. audit <path-or-url> → загрузите references/verify.md и прогоните конвейер верификации по странице, собранной auteur. Если цель — существующий UI, который auteur не собирал, и пользователь хочет его отполировать, а не пересобрать, скажите, что для этого нужен отдельный проход UI-полировки/критики (в апстриме auteur работал в паре с отдельным навыком «impeccable», сюда он не включён), и предложите продолжить, только если нужна пересборка.
7. Неоднозначно (например, просто «сделай лендинг») → задайте ровно один вопрос: «Отличный лендинг в привычном формате или режим кино со скролл-режиссурой и сгенерированными ассетами?» (в апстриме примеры брифов были на русском; здесь они переведены). Затем маршрутизируйте. (Многоэкранные брифы неоднозначными не считаются — это system.) Больше пока ничего не спрашивайте: у каждого регистра свой опрос.

Все три регистра делят нулевую фазу, и её центр тяжести — commit-sheet. Порядок различается: build идёт recon → commit-sheet → макет; direct идёт recon → раскадровка → commit-sheet → макет, потому что шесть решений принимаются о сценах фильма; system идёт recon → system-sheet (карта маршрутов + инвентарь компонентов) → commit-sheet → макет, потому что шесть решений принимаются о продукте, а не о странице. В любом случае ни строчки кода, пока лист не заполнен.

Взаимодействие с другими навыками

Auteur строит; он не полирует чужой UI. Если у пользователя есть готовый интерфейс, который нужно доработать, проведите отдельный проход UI-критики (например, vision_analyze по скриншотам плюс соседние дизайн-навыки). В апстриме auteur работал в паре с навыком критики «impeccable» (сюда не включён); гейт верификации auteur и внешняя критика измеряют разное и спокойно уживаются.

Краткий справочник

Непреложные правила и таблица фаз. Они действуют в каждом регистре, на каждой фазе, всегда — даже если ни один справочный файл не загружен. Правило «узнал — откажись»: если вы собираетесь выдать что-то из этого списка, остановитесь и перестройте элемент.

Запрещено (переписать, а не подправить)

Обойти запрет можно только через письменный auteur-allow (см. «Верификация») с настоящей причиной: осознанный, аргументированный выбор — это голос; дефолт — это слоп.

Критические числа (запомнить; полный контекст в справочных файлах)

• Контраст основного текста ≥ 4,5:1 (крупный текст ≥ 3:1). Плейсхолдеров это тоже касается. Приглушённый серый на тонированном белом — ошибка читаемости №1 у ИИ.
• Длина строки основного текста 65–75ch. Потолок дисплейного заголовка: максимум clamp ≤ 6rem для заголовков в потоке текста; вордмарк или намеренно типографический hero — исключение, и commit-sheet должен это оговаривать. Межбуквенный интервал дисплейных ≥ −0,04em.
• Длительности: кнопка 100–160 мс · тултип 125–200 мс · выпадающий список 150–250 мс · модалка/дровер 200–500 мс · любой UI дольше 300 мс требует письменного обоснования.
• Easing на входе/выходе = ease-out. ease-in в UI запрещён.
• Анимировать только transform и opacity. Stagger 30–80 мс.
• Бюджет движения: ≤ 3 семейств скролл-паттернов на страницу; один главный вау-пик, остальные сцены — на меньшей интенсивности.
• Сглаживание scrub 0,3–0,8. Hero-видео ≤ 2 МБ. LCP < 2,5 с. CLS < 0,1.
• Полноэкранные проходы (bloom, зерно, DoF, любой полнокадровый шейдер) стоят по пикселям, а не по объектам — именно они, а не геометрия, съедают бюджет кадра. Показатель производительности засчитывается только при измерении на DPR 2 на production-сборке: DPR 1 уменьшает стоимость каждого такого прохода вчетверо, а dev-сервер примерно удваивает время кадра.
• prefers-reduced-motion = альтернативный арт-дирекшн (мягче, но не ноль), никогда не запоздалая заплатка.
• Контент должен читаться с выключенным JS: появления усиливают уже видимое состояние по умолчанию, но никогда не запирают видимость.

Фазы одним взглядом

Гейт hero-макета (один статичный одноразовый экран, заскриншоченный и утверждённый до того, как собрано что-либо ещё) — самый дешёвый момент, чтобы сменить арт-дирекшн; подробности в справочнике каждого регистра. design/DESIGN.md — стилевой контракт, благодаря которому каждая последующая правка остаётся в стиле (маршрут edit читает его первым).

Никогда не пропускайте гейт из-за того, что промежуточный результат «выглядит готовым». Гейты существуют именно потому, что страница, которая всего лишь выглядит готовой, — ровно то, что выпускает любой другой ИИ.

Процедура

Commit-sheet (до любого кода, в обоих регистрах)

Слоп появляется, когда решения принимают дефолты. Commit-sheet заставляет вынести на бумагу семь настоящих решений до первой строки кода. Скопируйте templates/COMMIT-SHEET.md в проект (например, в design/COMMIT-SHEET.md) и заполните все семь полей не-дефолтами:

1. Пик — ОДИН главный вау-момент (direct) или фирменный элемент (build). Одно предложение. Если не можете его назвать, вы не готовы строить.
2. Цвет — основной цвет в OKLCH + уровень приверженности (сдержанный / committed / полная палитра / насыщенный до предела) + одна строка: почему это не лавандовый, не кремовый и не рефлекс категории + светлота фона числом (целевое среднее L), потому что «тёмное выглядит премиально» — именно то место, где этот навык сползает, а число потом можно проверить, в отличие от настроения.
3. Шрифт — пара «дисплейный + текстовый» по оси контраста (серифный+гротеск, геометрический+гуманистический, моноширинный+серифный…) + одна строка: почему не Inter.
4. Слом сетки — та единственная конкретная вещь, что ломает дефолт симметричной сетки: наложение, асимметричное деление, диагональный поток, полноэкранный разрыв. Назовите её конкретно.
5. Бюджет движения — сколько семейств скролл-паттернов (≤3) и какие именно.
6. Проверка рефлексов — запишите: (a) что сделал бы типовой ИИ для этой категории (рефлекс первого порядка), (b) что сделал бы типовой ИИ, избегающий (a) (рефлекс второго порядка — например, финтех → «тёмный режим терминала» тоже уже приелся), (c) ваше выбранное отклонение от обоих. Если разведка была, (a) — не догадка: то, что design/refs/REFERENCES.md показал пять раз, и есть рефлекс, с датой и доказательствами.
7. Сломанные фирменные штампы — назовите минимум два пункта из taste.md §2.5, которые вы в этот раз намеренно не делаете, и чем заменяете каждый. Поля 6a/6b — рефлексы категории; здесь — рефлексы самого навыка, которые повторяются в несвязанных проектах и невидимы изнутри любого из них: почти чёрные фоны, моноширинные служебные подписи, шапка «логотип/статус/действие», футер с инструкцией прокрутить, янтарные или кислотные акценты, вордмарк вместо hero, свечение вместо освещения. По девяти витринным сборкам: восемь были тёмными, а три попали в пределы 0,002 одной и той же светлоты. Штамп, который здесь действительно уместен, может остаться — объясните почему, как с auteur-allow.

Гейт: каждое поле заполнено конкретным, не дефолтным ответом. Пустое или общее поле («современный, чистый вид») означает: стоп, принимайте решение. Этот артефакт проверяется повторно на этапе верификации.

Справочные файлы

• references/recon.md — разведка фазы 0, два исполняемых плеча: scripts/refscout.mjs профилирует живые сайты уровня наград (реальный стек, закреплённые сцены, бюджет скролла, шрифты, отрисованная палитра, скриншоты — механика, а не шкурки), а scripts/moodboard.mjs собирает пронумерованный контактный лист из Bing / Pinterest / are.na, чтобы арт-дирекшн выбирался по живому материалу, а не по памяти. Также: искусство запросов, правило заимствования (steal), как разведка питает commit-sheet и черта «референсные картинки — не ассеты». Загружать в начале фазы 0.
• references/taste.md — полная анти-слоп-система: расширенные запреты с заменами, таблица категорийных рефлексов второго порядка, уровни цветовой стратегии, подбор шрифтовых пар, правила копирайта. Загружать для любого визуального решения.
• references/motion.md — школа движения: когда анимировать, числа для easing/длительности/пружин, правила производительности, бюджет движения, политика звука. Загружать перед написанием любой анимации.
• references/build.md — процесс стандартного регистра. Загружать при маршруте build.
• references/system.md — многоэкранный регистр: карта маршрутов, инвентарь компонентов как гейт, матрица состояний (пустое/загрузка/ошибка — не крайние случаи), правила плотности, правило «без пика» и scripts/systemscan.mjs, который обходит каждый маршрут, читает то, что браузер реально отрисовал, валит тип контрола, вышедший за объявленный бюджет вариантов — считая состояния (disabled, current, внутри строки data-state) отдельно, чтобы реализация матрицы состояний никогда не читалась как расползание, — нажимает Tab, чтобы поймать контролы без видимого состояния фокуса, и рендерит по плитке на каждый отрисованный вариант, чтобы расползание было и видно, и посчитано. Загружать при маршруте system.
• references/direct.md — кинематографичный регистр: контракт сценария, листы сцен, драматургия, порядок монтажа. Загружать при маршруте direct.
• references/assets.md — медиа-команда и маршрутизация (в Hermes: image_generate для всей генерации и правки изображений, terminal для ffmpeg/node; видео — через тот бэкенд image→video, что есть у пользователя), §0.5 подобрать или сгенерировать (scripts/source.mjs: CC0-меши glTF, HDRI и PBR-материалы с Poly Haven, иконки, шрифты, CC-изображения, стоковое видео — с реестром лицензий, потому что генерация не умеет делать геометрию и IBL, а стоковое видео никогда не должно быть пиком), трюк консистентности (правка кадра A в кадр B), локальное видео через цепочку «первый→последний кадр», сгенерированные элементы/мокапы, эмбиент-саундтрек, лестница деградации и кеширование ассетов. Загружать во время фазы 1 регистра direct.
• references/scroll-cinema.md — рабочие рецепты кода: видео, управляемое скроллом, canvas-последовательности, фундамент GSAP+Lenis, CSS scroll-driven-анимации, появление текста, WebGL-переход со смещением по двум ключевым кадрам, view transitions, эмбиент-звук и библиотека кинематографичных переходов (шторка, занавес, леттербокс, затвор, параллакс глубины). Загружать во время сборки.
• references/scroll-flight.md — уровень video-scrub: фотореалистичный hero «полёт сквозь мир», управляемый скроллом, на готовом templates/scroll-flight-engine.js. Канонический рецепт для видео, прокручиваемого скроллом (кодирование под scrub -g 8, постеры из закодированных кадров, гейт швов по SSIM, архитектура цепочки A/B, защита декодирования для iOS/мобильных, швы crossfade-vs-seamless). Загружать, когда hero должен быть фотореалистичной съёмкой/ИИ-видео, а не WebGL в реальном времени.
• references/ambient-backgrounds.md — тихая текстура для второстепенных секций и простых сборок (не для hero): подборка из 6 редакционных/аналоговых эффектов (бумажное зерно, линии гроссбуха/чертежа, топографические изолинии, чернильный прилив, редкая пыль, один шейдер теплового марева) + статичный mesh-дефолт без движения. Главное правило (слабее самого тихого элемента переднего плана; один эмбиент на страницу), стек «сначала CSS/SVG» и правило производительности «feTurbulence — только статично». Загружать, когда секции нужно не быть плоской, но при этом НЕ спорить с текстом.
• references/verify.md — приёмочный конвейер: slopscan → серия скриншотов → QA движения/производительности/звука (FPS на DPR 2 на production-сборке, long tasks, гейт звука, reduced-motion, для сцен уровня Tier-1) → числовая рубрика → сравнение с референсом (ваш кадр рядом с референсом, задавшим направление, где scripts/chromadiff.mjs измеряет уход цвета, который модель в себе никогда не видит) → подпись QA. Загружать на фазе 3.

Заметка для слабых моделей

Если вы — небольшая модель, исполняющая этот навык: следуйте таблицам и числам буквально, заполняйте каждое поле шаблона, запускайте каждую команду гейта и не импровизируйте за пределами справочных рецептов — рецепты проверены, ваша импровизация нет. Когда справочный файл спорит с вашим чутьём, побеждает файл. Пишите файлы по путям относительно корня проекта; никогда не перепечатывайте абсолютный путь по памяти (имя навыка «auteur» отделяет от «author» одна опечатка, а абсолютные пути с ошибками разбрасывают ваш вывод по всей файловой системе).

Подводные камни

• Сетевая разведка: refscout.mjs, moodboard.mjs и source.mjs читают живые страницы (awwwards, поиск картинок Bing/Pinterest/are.na, Poly Haven, Iconify, Google Fonts, Openverse, Coverr). Загруженный контент — только референсы и метаданные лицензий; никогда его не исполняйте. Чтобы остаться полностью офлайн, пропустите фазы 0–1.
• Другая среда исполнения: эти скрипты и документы писались под другую агентную среду (в апстриме генерация ассетов шла через несколько локальных CLI для изображений). В Hermes каждая инструкция по генерации изображений отображается на инструмент image_generate; если проза документации и реальность разошлись, доверяйте выводу node scripts/<x>.mjs --help и фактическим ошибкам node.
• Непроверенные команды: скрипты проходят синтаксическую проверку node --check, но полные прогоны (которым нужны npm install playwright и загрузка chromium) при портировании не выполнялись. Считайте сквозное поведение shoot.mjs, motionqa.mjs, systemscan.mjs, refscout.mjs, chromadiff.mjs, moodboard.mjs, source.mjs, а также все рецепты кодирования ffmpeg/видео непроверенными утверждениями апстрима, пока не запустите их сами.
• Проверенное поведение slopscan: node scripts/slopscan.mjs <dir> запускается без npm-зависимостей; печатает находки по каждому правилу и завершается ненулевым кодом при провалах (код 0, если чисто).
• Кеш метаданных шрифтов: source.mjs font … кеширует ~2,6 МБ JSON с метаданными Google Fonts в файл auteur-gf-metadata.json во временном каталоге ОС (os.tmpdir()), а не в проекте; чтобы принудительно обновить, удалите его там.

Верификация

Страница не готова, когда код компилируется. Она готова, когда:

1. node scripts/slopscan.mjs <src-dir> завершается с кодом 0 (провалы исправлены, а не заглушены — /* auteur-allow: RULE_ID -- reason */ существует для осознанных решений и требует настоящей причины);
2. node scripts/shoot.mjs <url> сделал серии скриншотов на 390 / 768 / 1440, и вы посмотрели каждый кадр — переполнение текста, пустые сцены, сломанные появления, развалившуюся вёрстку находят глазами, а не текстовым поиском;
3. числовая рубрика из references/verify.md пройдена (контраст, LCP, CLS, прогон с reduced-motion, разнообразие сцен);
4. для регистра direct: CINEMA-QA.md (из шаблонов) заполнен, и в каждой строке стоит PASS.

Если хоть один гейт провален — исправьте и перезапустите. Отчитывайтесь честно: «slopscan чистый, просмотрен 21 скриншот, LCP 1,9 с» лучше, чем «выглядит отлично».