Yelpin site-quality — ворота качества
Часть сборника site-studio. Финальные ворота: вызывается site-director перед находимостью и деплоем; при провале — возврат на переделку.
Отделяет «красивую картинку» от рабочего сайта и ловит «дёшево» до того, как это увидит клиент. Прогоняй перед сдачей; нарушение — возврат на исправление.
Ремесло
- Токены: 4–6 именованных цветов, одна шкала кегля (12/14/16/20/28/44/72), один шаг отступов (8/16/24/40/64/96). Всё из них, ничего «на глаз». Сверь с
DESIGN.md— вёрстка не должна расходиться со спекой. - Состояния: у каждого интерактива
hover,focus-visible,active,disabled; у полей —error. Кнопка без состояний — картинка. Полный разбор контейнеров и обратной связи —references/interaction-patterns.md. - Иерархия: один главный акцент на экран; размер, вес, контраст и воздух ведут взгляд. «Почему» за проверками —
references/craft-laws.md(законы UX, гештальт). - UX-текст: активный залог; глагол+объект на кнопках; ошибка — как направление. Полный чек —
references/ux-writing.md. - Формы: отдельные ворота —
references/forms-and-inputs.md(меньше полей, валидация на blur, ошибка как направление, экран успеха).
Доступность (WCAG 2.2 AA)
- Контраст — не на глаз, а скриптом. Прогони
node "${CLAUDE_PLUGIN_ROOT}/skills/site-quality/scripts/contrast-check.js" "#ink" "#bg"для каждой текст-на-фоне пары, или собери токены в JSON и добавь--tokens tokens.json. (Если${CLAUDE_PLUGIN_ROOT}не определён — установка junction'ом, — зови по относительномуscripts/contrast-check.js.) Порог: обычный текст ≥ 4.5:1, крупный (≥ 24px или ≥ 19px bold) ≥ 3:1. Коды возврата: 0 — прошло, 1 — контраст провален (возврат на переделку), 2 — ошибка ввода (битый hex или путь: чини команду, а не палитру). - Тап-цель ≥ 44px; видимый
focus-visible; логичный порядок фокуса. - Все изображения с
alt;prefers-reduced-motionуважается. - Полный аудит (клавиатура, семантика, landmarks, цвет-не-единственный-носитель, ловушки фокуса) —
references/accessibility.md.
Анти-дёшево (главные тэллы AI-сайта)
- Есть реальные изображения, а не текст на плоском цвете? Флэт-цвет = дёшево.
- Формат сломан под тему, а не тот же скелет «заголовок → строки → цифры → CTA»?
- Один сигнатурный элемент есть?
- Движение осмысленное и ≤ 3 точек (не трюк ради трюка)?
- Тексты свои, не «Lorem»/«Ваш заголовок»?
- Ничего из стоп-листа (фиолетовый градиент + Inter + карточки-эмодзи; кремовый + serif + терракота)?
Техника перед сдачей
- На 390px ничего не разъезжается.
- 3D/видео — с лёгким запасным вариантом на мобильном.
- Все ссылки и кнопки ведут куда должны.
- SEO-основа закрыта (site-seo): title/description, OG, JSON-LD, sitemap, robots.
Перф — Core Web Vitals (пороги, а не «на глаз»)
«Красиво» на разогнанном ноуте ≠ быстро на телефоне. Пороги Lighthouse ≥ 90 и:
- LCP ≤ 2.5 c — герой-картинка оптимизирована и грузится приоритетно (
fetchpriority="high", без lazy на первом экране). - INP ≤ 200 мс — интерактив отвечает сразу; тяжёлый JS не блокирует поток.
- CLS ≤ 0.1 — под картинки/медиа/шрифты зарезервировано место (
width/heightилиaspect-ratio); ничего не прыгает при загрузке. - Картинки: современный формат (WebP/AVIF), нужный размер (не 4000px в слот 400px),
loading="lazy"на некритичных. - Шрифты:
font-display: swap, подгружается только используемое начертание; текст не мигает и не сдвигается.
Воспринимаемая скорость (скелеты, оптимистичный UI, приоритет первого экрана) — references/performance-ux.md.
Библиотека (references — читай по требованию)
Глубина за каждым пунктом чек-листа. Не грузи всё сразу — открывай нужный модуль:
references/craft-laws.md— законы UX (Фиттс/Хик/Миллер/Джейкоб), гештальт, иерархия, числовые ориентиры.references/accessibility.md— WCAG 2.2 AA: клавиатура, фокус, семантика, landmarks, медиа.references/forms-and-inputs.md— поля, валидация, ошибки-направления, состояния, экран успеха.references/ux-writing.md— микрокопи: кнопки, ошибки, пустые экраны, тон = характер бренда.references/interaction-patterns.md— тултип/модалка/панель/страница, обратная связь, состояния.references/performance-ux.md— воспринимаемая скорость + чинилка CWV.
Стиль, структура, визуальная система, эмоция, адаптив — у site-director в его references/.
Вердикт
Хоть один пункт «анти-дёшево» провален — сайт не готов, даже если «в целом красиво». Дешевизна дороже орфографии: лучше вернуть на переделку, чем выпустить очередной AI-шаблон.