# Site Quality

> Проверяет готовую вёрстку сайта на ремесло, доступность и «дешевизну» перед сдачей. Используй после сборки лендинга, страницы или интернет-магазина, чтобы поймать проблемы до публикации. Держит токены, состояния, контраст, иерархию, формы, UX-тексты, Core Web Vitals и ловит главные признаки дешёвого AI-сайта. Работает в связке с site-director и site-motion.

- Skill: `yelpin/site-quality` (Agent Skill, multi-file: 8 files)
- Install (CLI): `npx skillmds@latest add yelpin/site-quality`
- Raw SKILL.md: https://api.skillmd.com/api/skills/yelpin/site-quality/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: Yelpin (https://skillmd.com/u/yelpin)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/yelpin/site-quality

---


# 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-шаблон.