dsh-desktop-kit 1.0.0 → 2.0.1

package/skills/design-critique/SKILL.md

@@ -1,118 +1,65 @@
 ---
 name: design-critique
-description: "Дизайн-критик: аудит существующего интерфейса по 12 критериям, скриншоты, axe, приоритетные правки «до/после». Использовать для оценки и апгрейда готового UI."
-whenToUse: "Нужно оценить, «почему выглядит дёшево», провести дизайн-ревью страницы/дашборда/формы, сравнить варианты, поднять существующий UI до WOW-уровня."
+description: "Дизайн-критик: аудит готового UI по 12 критериям, скриншоты, axe, правки «до/после»; вердикт SHIP/NEEDS WORK/REDESIGN."
+whenToUse: "Оценить интерфейс, понять «почему выглядит дёшево», ревью страницы/дашборда/формы, сравнить варианты, поднять UI до WOW."
 user-invocable: true
 ---
 
 # DESIGN-CRITIQUE — дизайн-критик
 
-> Ты — строгий, но справедливый арт-директор. Твоя задача — увидеть проблемы, которые не видит автор,
-> и превратить «нормально» в «дорого». Критика всегда конкретная: что вижу → почему плохо → как исправить.
-
-## Когда использовать
-- Пользователь просит: «оцени дизайн», «почему выглядит дёшево», «сделай ревью», «докрути до WOW».
-- Перед сдачей любой UI-работы (второй взгляд на свой же результат).
-- Для сравнения 2–3 вариантов дизайна.
-
-## Процесс (не пропускай шаги)
-
-### 1. Зафиксируй контекст
-Кто пользователь, какая задача экрана, что важнее (скорость / доверие / конверсия / плотность данных)? Без этого
-«красиво» не существует. Запиши 1–2 строки.
-
-### 2. Собери «до»
-Скриншоты текущего состояния:
-```
-node ~/.dsh/skills/wow-design/assets/scripts/capture.mjs <file|url> --name before --out <outdir>
-node ~/.dsh/skills/wow-design/assets/scripts/audit.mjs  <file|url> --out <outdir>
-```
-Нужны: desktop 1440 (light), mobile 390, тёмная тема (если есть). Для живого сайта — URL; для локального файла — путь.
-Смотри PNG глазами через `read_image`.
-
-### 3. Быстрые тесты (10 минут)
-| Тест | Как | Что ловит |
-|---|---|---|
-| 5 секунд | Открыл, отвернулся, посмотрел | Непонятно, что это и куда нажать |
-| Squint test | Прищуриться / блюр 8px | Провалы иерархии, «серую кашу» |
-| Grayscale | Убрать цвет (DevTools) | Всё держится только на цвете, нет структуры |
-| 200% zoom | Увеличить | Мелкий текст, поломки сетки |
-| 390px | Мобильный вьюпорт | Горизонтальный скролл, обрезанные таблицы, мелкие тапы |
-| Tab | Пройти клавиатурой | Нет фокуса, ловушки, неработающие кнопки |
-| Dark | Тёмная тема | Инверсия вместо палитры, нечитаемый контраст |
-
-### 4. Оценка по рубрике
-12 критериев, шкала 1–5, веса; порог 4.4/5 и ни один критерий < 4. Полная рубрика с дескрипторами:
-`~/.dsh/skills/wow-design/references/critique-rubric.md`.
-
-| # | Критерий | Вес |
-|---|---|---|
-| 1 | Первое впечатление / концепция | 15% |
-| 2 | Визуальная иерархия и маршрут взгляда | 12% |
-| 3 | Типографика | 12% |
-| 4 | Цвет и контраст | 10% |
-| 5 | Сетка, выравнивание, ритм | 10% |
-| 6 | Воздух и плотность | 8% |
-| 7 | Компоненты и состояния | 8% |
-| 8 | Консистентность | 7% |
-| 9 | Детали и полировка | 6% |
-| 10 | Адаптив и мобильный | 5% |
-| 11 | Доступность | 4% |
-| 12 | Оригинальность vs польза | 3% |
-
-Считай средневзвешенное. 5 — уровень Linear/Stripe/Apple, 4 — крепкий профессиональный, 3 — «нормально, но без
-характера», 2 — заметно дёшево, 1 — сломано.
-
-### 5. Приоритизируй правки
-- **P0 (блокеры):** нечитаемый контраст, сломанный мобильный, нет иерархии, «AI-slop»-маркеры, нерабочие состояния,
-  критичные axe-нарушения. Без них нельзя сдавать.
-- **P1 (важное):** типографика, воздух, ритм, тени/радиусы, неконсистентные отступы, слабый первый экран.
-- **P2 (полировка):** микродетали, motion, selection/scrollbar/focus, редакционные штрихи.
-
-Каждый пункт: **что вижу (со скриншотом/координатой) → почему проблема → конкретное исправление (значения в px/rem/токенах) → приоритет.**
-Не пиши «сделать современнее». Пиши «H1 48→72px, tracking −0.02em; убрать 3 карточки с иконками, заменить
-редакционным нумерованным списком; радиус карточек 24→14px; добавить 48px воздуха до секции».
-
-### 6. Правки и «после»
-Внеси P0+P1, пересними скриншоты, сравни «до/после», проверь рубрику снова. Если правит другой исполнитель —
-отдай ему список P0/P1 с точными значениями и критериями приёмки.
-
-## Частые диагнозы и лекарства
-
-| Симптом | Диагноз | Лечение |
+> Строгий, но справедливый арт-директор: видишь то, что не видит автор, и превращаешь «нормально»
+> в «дорого». Формула: что вижу → почему плохо → как исправить (в px/rem/токенах).
+
+## 1. Контекст и «до»
+Когда: оценка, второй взгляд перед сдачей, сравнение 2–3 вариантов.
+Аудитория, задача экрана, что важнее (скорость/доверие/конверсия/плотность) — без этого «красиво» нет.
+Собери «до»:
+`node ../wow-design/assets/scripts/capture.mjs <file|url> --name before --out <dir>`
+`node ../wow-design/assets/scripts/audit.mjs <file|url> --out <dir>`
+Нужны 1440 light, 390, dark; смотри PNG через `read_image`.
+
+## 2. Быстрые тесты (10 минут)
+5 секунд · squint/blur 8px · grayscale · zoom 200% · 390/768 · Tab/Escape · dark · axe.
+Что ловит и пороги — `references/quick-tests.md`.
+
+## 3. Рубрика: 12 критериев, 1–5
+К1 впечатление 15% · К2 иерархия 12% · К3 типографика 12% · К4 цвет/контраст 10% · К5 сетка 10% ·
+К6 воздух 8% · К7 компоненты/состояния 8% · К8 консистентность 7% · К9 детали 6% · К10 адаптив 5% ·
+К11 доступность 4% · К12 оригинальность 3%.
+Балл = Σ(оценка×вес); 5 — Linear/Stripe/Apple, 3 — «нормально», 1 — сломано.
+**Сдача: ≥4.4/5 и все ≥4.** Блокеры вне баллов: axe critical/serious, overflow 390, контраст <4.5,
+сломанные состояния. Дескрипторы — `references/rubric-fast.md`.
+
+## 4. Приоритеты и фиксы
+P0: нечитаемый контраст, сломанный мобильный, нет иерархии, AI-slop, нерабочие состояния, axe.
+P1: типографика, воздух, ритм, тени/радиусы, отступы, слабый первый экран.
+P2: микродетали, motion, selection/scrollbar/focus.
+Каждый пункт: что вижу (скрин/координата) → почему → фикс со значениями → приоритет.
+Не «современнее», а «H1 48→72px; радиус 24→14; +48px воздуха». P0+P1 → переснять → «до/после».
+Диагнозы — `references/diagnoses.md`.
+
+## 5. Доступность
+Контраст 4.5:1 (крупный/границы 3:1); Tab/focus-visible/Escape/focus trap; alt, `aria-label`, `<label>`;
+не только цветом; reduced-motion; axe 0 critical/serious. Детали — `references/a11y.md`.
+
+## 6. Нужно → файл → ≈токенов
+| Нужно | Файл | ≈токенов |
 |---|---|---|
-| «Выглядит как шаблон» | Нет характера: дефолтные радиусы/цвета/шрифт | 1 signature-деталь, serif display, свой акцент, асимметрия |
-| «Дёшево» | Мало воздуха, всё в рамках, мелкие заголовки | ×1.5–2 к отступам секций, H1 больше на 30–60%, контрастнее иерархия |
-| «Каша» | Нет маршрута взгляда, всего поровну | 1 главный акцент на экран, приглушить второстепенное (muted), убрать лишние рамки |
-| «Серо и скучно» | Только нейтрали, нет тёплого/акцента | 1 акцент + тёплый полутон (медь/терракота), тонкие линии, зерно 2% |
-| «Пёстро» | Много акцентов и цветов | 60-30-10: нейтрали 60%, вторичный 30%, акцент 10% |
-| «Тяжело читать» | Длинная строка, мелкий текст, низкий контраст | 60–72ch, 16–18px body, 1.6 line-height, контраст ≥ 4.5 |
-| «Дёргается» | Анимации ради анимаций, разные easing | Только hover/reveal, 160–260ms, один easing, reduced-motion |
-| «Неудобно» | Нет состояний, мелкие тапы, таблица ломается | states, 44px тапы, `.table-wrap`, явные CTA |
-| «Мобильный ужас» | Десктопный layout сжат | Мобильная композиция: стек, порядок, скрыть декор, sticky CTA |
-
-## Чек-лист доступности (обязательный)
-- [ ] Контраст текста ≥ 4.5:1, крупного ≥ 3:1, иконок/границ ≥ 3:1.
-- [ ] Все интерактивные элементы доступны с клавиатуры, `focus-visible` видим, порядок логичен.
-- [ ] У изображений alt, у иконок-кнопок aria-label, у модалок — focus trap и Escape.
-- [ ] Нет информации только цветом (статусы дублируются текстом/иконкой).
-- [ ] `prefers-reduced-motion` уважается.
-- [ ] axe: 0 critical/serious (если есть — блокер).
-
-## Формат отчёта
-
-```
-# Дизайн-ревью: <объект>
-Контекст: <аудитория, задача>
-Вердикт: SHIP / NEEDS WORK / REDESIGN
-Оценка: <средний балл>/5 (ниже 4: <критерии>)
-Первое впечатление (5 сек): <что понятно/непонятно>
-## P0 — блокеры
-1. <что вижу> → <почему> → <фикс> (скрин: path)
-## P1 — важное
-...
-## P2 — полировка
-...
-Что уже хорошо: <3–5 пунктов — обязательно>
-После правок: <новые скриншоты, повторная оценка>
-```
+| Рубрика, дескрипторы, подсчёт | `rubric-fast.md` | 2.2k |
+| Тесты за 10 минут | `quick-tests.md` | 0.9k |
+| Симптом → лечение | `diagnoses.md` | 1k |
+| Доступность | `a11y.md` | 0.7k |
+| Шаблон отчёта | `report-template.md` | 1k |
+| Полная рубрика | `../wow-design/references/critique-rubric.md` | 7.4k |
+
+## 7. Гейт
+- [ ] Скриншоты 1440/768/390, light/dark.
+- [ ] Рубрика ≥4.4, все ≥4.
+- [ ] Axe 0 critical/serious.
+- [ ] 390: overflow 0, тапы ≥44.
+- [ ] P0 закрыты; есть «до/после».
+- [ ] «Что уже хорошо» — 3–5 пунктов.
+
+## 8. Отчёт
+Вердикт SHIP/NEEDS WORK/REDESIGN · балл и минимум · впечатление за 5 сек · P0/P1/P2 с фиксами ·
+что хорошо · проверено · после правок. Формат — `references/report-template.md`.

package/skills/design-critique/references/a11y.md

@@ -0,0 +1,25 @@
+# Доступность: обязательный чек-лист
+
+> Часть навыка design-critique. ≈0.7k токенов. Читать, когда: проверяешь доступность и нужно
+> не забыть ни один пункт; axe critical/serious — блокер сдачи.
+
+- [ ] **Контраст:** текст ≥4.5:1; крупный (≥24px или ≥18.66px bold) ≥3:1; иконки и границы
+  контролов ≥3:1. `--faint` — только декор.
+- [ ] **Клавиатура:** все интерактивные элементы доступны, `focus-visible` видим, порядок логичен.
+  Модалка держит фокус (focus trap), закрывается Escape, после закрытия фокус возвращается.
+- [ ] **Семантика:** landmarks (`header/nav/main/footer`), один `h1`, порядок заголовков без
+  пропусков, `lang="ru"`, skip-link; кнопка — `<button>`, ссылка — `<a>`.
+- [ ] **Изображения и иконки:** у изображений alt (декоративное — `alt=""`), у иконок-кнопок
+  `aria-label`, декоративные иконки — `aria-hidden="true"`.
+- [ ] **Не только цветом:** статусы дублируются текстом/иконкой; проверить grayscale.
+- [ ] **Формы:** `<label for>` у каждого поля, ошибки программно связаны (`aria-invalid`,
+  `aria-describedby`), placeholder не заменяет лейбл, `autocomplete` где уместно.
+- [ ] **Motion:** `prefers-reduced-motion` уважается; контент виден без анимации.
+- [ ] **axe:** 0 critical/serious; critical/serious — блокер, minor — в P1/P2.
+
+## Частые провалы
+- `outline:none` без замены — клавиатура «слепая».
+- Серый текст 2.4–4.3:1 на фоне; акцентный мелкий текст <4.5:1.
+- `<div onclick>` вместо кнопки; действия только по hover.
+- Ошибка только цветом/тостом, без текста у поля.
+- Модалка без `role="dialog"`, `aria-modal` и возврата фокуса.

package/skills/design-critique/references/diagnoses.md

@@ -0,0 +1,33 @@
+# Частые диагнозы и лечение
+
+> Часть навыка design-critique. ≈1k токенов. Читать, когда: слышишь «выглядит дёшево/шаблонно/каша»
+> и нужен точный диагноз с конкретными правками.
+
+| Симптом | Диагноз | Лечение |
+|---|---|---|
+| «Выглядит как шаблон» | нет характера: дефолтные радиусы/цвета/шрифт | 1 signature-деталь, serif display, свой акцент, асимметрия |
+| «Дёшево» | мало воздуха, всё в рамках, мелкие заголовки | ×1.5–2 к отступам секций, H1 больше на 30–60%, контрастнее иерархия |
+| «Каша» | нет маршрута взгляда, всего поровну | 1 главный акцент на экран, приглушить второстепенное (muted), убрать лишние рамки |
+| «Серо и скучно» | только нейтрали, нет тёплого/акцента | 1 акцент + тёплый полутон (медь/терракота), тонкие линии, зерно 2% |
+| «Пёстро» | много акцентов и цветов | 60-30-10: нейтрали 60%, вторичный 30%, акцент 10% |
+| «Тяжело читать» | длинная строка, мелкий текст, низкий контраст | 60–72ch, 16–18px body, 1.6 line-height, контраст ≥4.5 |
+| «Дёргается» | анимации ради анимаций, разные easing | только hover/reveal, 160–260ms, один easing, reduced-motion |
+| «Неудобно» | нет состояний, мелкие тапы, таблица ломается | states, 44px тапы, `.table-wrap`, явные CTA |
+| «Мобильный ужас» | десктопный layout сжат | мобильная композиция: стек, порядок, скрыть декор, sticky CTA |
+
+## Быстрая проверка «AI-slop» за 5 секунд
+1. Фиолетово-синий градиент / цветные блобы? → нет.
+2. Три одинаковые карточки с иконками в первом экране? → нет.
+3. Заголовок 20–24px при body 16px? → нет иерархии.
+4. Серый текст ниже 4.5:1 / подписи `#999`? → нечитаемо.
+5. Отступы 13/17/22px? → несогласованно.
+6. Эмодзи, иконки-ракеты, стекло, радиусы 24px у всего? → шаблон.
+7. Lorem ipsum / «инновационные решения»? → нет контента.
+8. Нет focus-visible / только hover? → недоступно.
+
+Хотя бы один пункт «да» — P0-блокер: до рубрики 4.4 не допускается.
+
+## Не переусердствуй
+- **Стерильный минимализм** — тоже дёшево: без иерархии и характера белый экран не спасает.
+- **Погоня за «дорого»** — всё serif и бежевое без акцента и цифр = «йога-студия», а не клиника.
+- **Красота в ущерб функции** — контраст, кегль, состояния и доступность не приносятся в жертву.

package/skills/design-critique/references/quick-tests.md

@@ -0,0 +1,30 @@
+# Быстрые тесты за 10 минут
+
+> Часть навыка design-critique. ≈0.9k токенов. Читать, когда: проводишь 10-минутную диагностику
+> перед оценкой по рубрике и нужны пороги.
+
+| Тест | Как | Что ловит | Порог |
+|---|---|---|---|
+| **5 секунд** | Открыть, отвернуться, посмотреть | Непонятно, что это и что делать | за 5 сек читаются смысл + главное действие |
+| **Squint** | Прищуриться / blur 8px | Провалы иерархии, «серая каша» | главный акцент виден, блоки различимы |
+| **Grayscale** | DevTools → Rendering → Grayscale / `filter:grayscale(1)` | Всё держится только на цвете | структура и статусы понятны без цвета |
+| **200% zoom** | Ctrl+= до 200% | Мелкий текст, поломки сетки | текст читаем, ничего не обрезано |
+| **390px** | DevTools device mode 390×844 | Overflow, мелкие тапы, обрезка | `scrollWidth ≤ innerWidth`, тапы ≥44px |
+| **768px** | Планшет | Промежуточные поломки сетки | плитки не рвутся, меню работает |
+| **Dark** | Переключить `data-theme=dark` | Инверсия, нечитаемый акцент, белые SVG | контраст AA, слои и тени читаются |
+| **Keyboard** | Tab/Shift+Tab/Escape/Enter | Нет фокуса, ловушки, нерабочие действия | фокус виден везде, Escape закрывает модалку |
+| **axe** | `node ~/.dsh/skills/wow-design/assets/scripts/audit.mjs <file>` | Контраст, alt, aria, landmarks | critical/serious = 0 |
+| **Reduced motion** | DevTools → Emulate prefers-reduced-motion | Контент, скрытый анимацией | контент виден, анимаций нет |
+
+## Как смотреть скриншоты
+1. `read_image` каждого PNG — не «по памяти», а реально открыть.
+2. Первый взгляд 5 секунд: что это, для кого, куда нажать; что цепляет первым.
+3. Squint: видна ли иерархия или всё слилось.
+4. Grayscale: остаётся ли структура без цвета.
+5. 390: нет обрезаний, скролла вбок, мелких тапов, «сжатого десктопа».
+6. Dark: фон/поверхности/контраст/акцент — отдельная палитра, не инверсия.
+7. Сравни с референсом из брифа: тот же уровень «дорого»?
+8. Выпиши 5–10 правок с числами, а не «сделать красивее».
+
+## Мини-набор, если времени нет
+5 секунд + 390px + контраст/axe + keyboard. Эти четыре теста ловят большинство P0.

package/skills/design-critique/references/report-template.md

@@ -0,0 +1,63 @@
+# Шаблон отчёта дизайн-ревью
+
+> Часть навыка design-critique. ≈1k токенов. Читать, когда: оформляешь ревью и нужен формат
+> с оценкой, вердиктом, P0/P1/P2 и «до/после».
+
+```markdown
+# Дизайн-ревью: <страница / компонент / продукт>
+**Контекст:** <аудитория; задача экрана; что важнее — доверие / скорость / плотность / конверсия>
+**Материалы:** <пути к скриншотам: 1440 light, 390, dark; ссылка/файл>
+**Вердикт:** SHIP / NEEDS WORK / REDESIGN
+
+## Оценка
+| # | Критерий | Вес | Балл | Комментарий (1 строка) |
+|---|---|---|---|---|
+| К1 | Первое впечатление / концепция | 15% | 5 | ... |
+| К2 | Иерархия и маршрут взгляда | 12% | 4 | ... |
+| К3 | Типографика | 12% | 4 | ... |
+| К4 | Цвет и контраст | 10% | 4 | ... |
+| К5 | Сетка, выравнивание, ритм | 10% | 4 | ... |
+| К6 | Воздух и плотность | 8% | 5 | ... |
+| К7 | Компоненты и состояния | 8% | 4 | ... |
+| К8 | Консистентность | 7% | 5 | ... |
+| К9 | Детали и полировка | 6% | 4 | ... |
+| К10 | Адаптив и мобильный | 5% | 4 | ... |
+| К11 | Доступность | 4% | 4 | ... |
+| К12 | Оригинальность vs польза | 3% | 4 | ... |
+**Итог:** X.XX / 5 · минимум по критериям: Y · блокеры: нет/есть
+
+## Первое впечатление (5 секунд)
+<Что понятно сразу; что пришлось искать; какое чувство производит экран>
+
+## P0 — блокеры (без них не сдаём)
+1. **Что вижу:** <...> (скрин: <путь>)
+   **Почему:** <...>
+   **Фикс:** <селектор/значение/токен: H1 48→72px, contrast #999→--ink-2>
+2. ...
+
+## P1 — важное (до сдачи)
+1. ...
+
+## P2 — полировка (после сдачи, если есть время)
+1. ...
+
+## Что уже хорошо (обязательно 3–5 пунктов)
+- ...
+
+## Проверено
+- [ ] 1440 desktop light · [ ] 390 mobile · [ ] 768 tablet · [ ] dark
+- [ ] 5 сек / squint / grayscale / 200% zoom
+- [ ] keyboard/focus · [ ] axe critical/serious = 0 · [ ] reduced-motion
+- [ ] нет horizontal overflow на 390
+
+## После правок
+<новые скриншоты, повторный балл, что исправлено>
+```
+
+## Тон и формат
+- Пиши в терминах экрана, а не кода: «три равных акцента», а не «bad hierarchy».
+- Всегда давай значение: «H1 до 72–88px», «радиус 24→14px», «строка 110→66ch».
+- Не больше 5–7 правок за итерацию.
+- Оценивай результат, а не намерение.
+- «Что уже хорошо» — обязательно 3–5 пунктов, иначе ревью не принимается.
+- Если правит другой исполнитель — отдай P0/P1 с точными значениями и критериями приёмки.

package/skills/design-critique/references/rubric-fast.md

@@ -0,0 +1,73 @@
+# Рубрика-инструмент: 12 критериев, дескрипторы, подсчёт
+
+> Часть навыка design-critique. ≈2.2k токенов. Читать, когда: оцениваешь UI по 12 критериям, нужны
+> дескрипторы уровней 5/3/1, формула балла, блокеры и правила критика.
+
+## Правила критика
+1. **Контекст раньше красоты:** аудитория, задача экрана, приоритет (доверие/скорость/плотность).
+2. **Каждое замечание — с доказательством:** что вижу (скрин/координата) → почему → фикс в px/rem/токенах.
+3. **Сначала блокеры:** P0 до P1/P2, даже если P2 «обиднее».
+4. **Хвалить обязательно:** 3–5 пунктов, что уже работает.
+5. **5–7 правок за итерацию**, не больше: иначе исполнитель распыляется.
+6. **Оценивай результат, а не намерение.** «Задумано красиво» не считается.
+7. **Сомневаешься 4/3 — ставь 3; 4/5 — ставь 4.** 5 — только уровень Linear/Stripe/Apple.
+8. Каждая итерация заканчивается скриншотом; без «до/после» критика не принимается.
+
+Шкала: **5** — уровень Linear/Stripe/Apple; **4** — крепкий профессиональный; **3** — «нормально,
+без характера»; **2** — заметно дёшево; **1** — сломано.
+
+## Веса и что проверяет
+| # | Критерий | Вес | Что проверяет |
+|---|---|---|---|
+| К1 | Первое впечатление / концепция | 15% | понятно ли за 5 секунд, есть ли идея и характер |
+| К2 | Иерархия и маршрут взгляда | 12% | одна главная точка, 3 уровня, путь к CTA |
+| К3 | Типографика | 12% | шкала, строка 60–72ch, интерлиньяж, трекинг, кириллица |
+| К4 | Цвет и контраст | 10% | 60-30-10, один акцент, AA, семантика статусов |
+| К5 | Сетка, выравнивание, ритм | 10% | 12 колонок, единые отступы, «ничего не гуляет» |
+| К6 | Воздух и плотность | 8% | дышит ли страница, группировка, нет «каши» |
+| К7 | Компоненты и состояния | 8% | все состояния, формы, таблицы, модалки, empty |
+| К8 | Консистентность | 7% | один язык на экранах и в обеих темах |
+| К9 | Детали и полировка | 6% | оптика, иконки, цифры, фокус, скроллбар |
+| К10 | Адаптив и мобильный | 5% | 390/768/1440, overflow, тач-цели, композиция |
+| К11 | Доступность | 4% | контраст, клавиатура, семантика, alt/aria, motion |
+| К12 | Оригинальность vs польза | 3% | не шаблон, но и не арт ради арта |
+
+## Дескрипторы: 5 / 3 / 1 и типичный провал
+| # | 5 | 3 | 1 | Провал |
+|---|---|---|---|---|
+| К1 | смысл и характер сразу, signature-деталь | понятно, но нейтрально/шаблонно, фокус размыт | хаос или пустота, доверия нет | центрированный hero с общими словами и 3 равными CTA |
+| К2 | H1 → lead → CTA, один акцент | много равных элементов, маршрут ищешь | иерархии нет, «серая каша» | два primary-CTA, акцентные заголовки секций |
+| К3 | ясная шкала, 60–72ch, безупречная кириллица | нерегулярная шкала, длинная строка | 5 размеров, 4 жирности, капс в абзацах | один гротеск на всё, одинаковые размеры |
+| К4 | спокойная палитра, акцент ≤10%, AA, ч/б держит структуру | 2–3 акцента, спорный контраст | кислотная палитра, текст нечитаем | `#999` на белом, 4 акцентных цвета |
+| К5 | одна сетка, ровные края, предсказуемый ритм | края гуляют, отступы «на глаз» | всё рассыпано, нет осей | три карточки разной высоты, «плавающие» CTA |
+| К6 | воздух идеален, группы читаются | местами прилипло/пусто | контент свален в кучу | 24px между секциями, 0 внутри карточек |
+| К7 | все состояния, живые формы, empty/loading | базовые есть, focus/disabled спорные | нет подписей, div-кнопки, формы без валидации | красивые кнопки без состояний, empty «Нет данных» |
+| К8 | один визуальный язык, темы без сюрпризов | разные радиусы/тени/иконки от экрана к экрану | три набора кнопок и два шрифта | showcase и dashboard как разные продукты |
+| К9 | уровень Linear/Stripe, ничего не обрезано | недокручено: оптика, отступы, сырые детали | небрежно, сломанные иконки | иконка ниже базовой линии во всех кнопках |
+| К10 | 390 читается, тапы крупные, таблица внутри | сжатый десктоп, мелкий текст, узкие отступы | на 390 неюзабельно | overflow из-за таблицы и 12px текст |
+| К11 | AA, видимый фокус, семантика, reduced-motion | фокус частичный, подписи слабые, axe minor | axe critical, недоступно с клавиатуры | `outline:none` и серый текст 2.4:1 |
+| К12 | запоминается одной деталью, но очевиден | «видел у 20 компаний», детали нет | копия или дизайн мешает пользоваться | необычный hero, скрывающий, чем занимается клиника |
+
+## Приоритеты
+- **P0 (блокеры):** нечитаемый контраст, сломанный мобильный, нет иерархии, AI-slop, нерабочие
+  состояния, критичные axe-нарушения. Без них нельзя сдавать.
+- **P1 (важное):** типографика, воздух, ритм, тени/радиусы, неконсистентные отступы, слабый первый экран.
+- **P2 (полировка):** микродетали, motion, selection/scrollbar/focus, редакционные штрихи.
+
+## Подсчёт и пороги
+```
+Итог = Σ(оценка_i × вес_i), i = 1..12
+Сдача: Итог ≥ 4.40  И  min(оценка_i) ≥ 4  И  нет P0-блокеров
+```
+Итог округляй до 2 знаков. Пример: 5,4,5,4,4,5,4,5,4,4,4,3 → 4.39, но К12=3 → **не сдано**
+(ни один критерий <4).
+4.44 без блокеров — сдано. 4.6 с axe critical — **не сдано**.
+
+**Блокеры вне баллов:** axe critical/serious > 0; горизонтальный overflow на 390; смысловой текст
+ниже 4.5:1; сломанные состояния (кнопка без фокуса, форма без ошибок); битые шрифты/изображения,
+ошибки в консоли на ключевых страницах.
+
+## Вердикт
+- **SHIP** — гейт пройден: ≥4.4, все ≥4, блокеров нет.
+- **NEEDS WORK** — есть P0/P1 или балл ниже порога, но основа рабочая.
+- **REDESIGN** — несколько P0 в структуре/иерархии: нужна переработка, а не полировка.

package/skills/dev-workflow/SKILL.md

@@ -1,41 +1,48 @@
 ---
 name: dev-workflow
-description: "Универсальный процесс разработки для любого проекта — этапы, качество, Definition of Done, работа с памятью и командой."
-whenToUse: "Начало любой задачи по коду в любом проекте; чтобы выбрать правильный порядок действий и не забыть проверки."
+description: "Универсальный процесс разработки: разведка, план, безопасные правки, проверки, ревью, релиз, память и Definition of Done."
+whenToUse: "В начале любой задачи по коду, данным, конфигам или релизу: какой порядок шагов и какие проверки нельзя забыть."
 user-invocable: true
 ---
 
 # Универсальный процесс разработки
 
-## Шаг 0 — триаж навыков (обязательно)
-В начале задачи открой `skills-router`, определи тип работы и загрузи **все** применимые скиллы
-(`requirements-and-planning`, `wow-design`, `seo`, `php-laravel`, `database-safety`, `testing-strategy`,
-`security-review`, `release-and-deploy`, проектные и т.д.). Без этого не начинай разведку и правки.
-
-## Этапы (всегда в этом порядке)
-1. **Разведка:** прочитать память проекта, найти затронутые файлы/маршруты/модели, выявить риски.
-2. **План:** короткий список шагов + критерии приёмки; для крупного — todo/план и команда.
-3. **Бэкап/безопасность:** копия затрагиваемых файлов или git; для БД — дамп; план отката.
-4. **Реализация:** минимальные локальные правки; не менять чужие зоны без причины; соблюдать инварианты.
-5. **Проверки:** линтер + статанализ + тесты (unit/feature) + E2E/UI (если затронут интерфейс) + визуально.
-6. **Ревью:** пройтись по чек-листу (данные, безопасность, тесты, стиль) — см. скилл `code-review-checklist`.
-7. **Документация/версия:** обновить документацию/CHANGELOG, поднять версию по правилам проекта.
-8. **Релиз:** по скиллу `release-and-deploy` (артефакт → проверка → выкатка → smoke → откат при проблеме).
-9. **Память:** записать итог (что сделано, как проверено, риски) в файлы памяти проекта.
-
-## Definition of Done
-- [ ] Применимые скиллы загружены на старте и реально использованы; гейты пройдены (в отчёте перечислены).
-- [ ] Задача решена по критериям; поведение проверено вживую (не только тестами).
-- [ ] Автотесты: существующие зелёные, новые добавлены и падают без правки.
-- [ ] Линтер/статанализ без новых ошибок.
-- [ ] Интерфейс: скриншоты «до/после», светлая/тёмная тема, mobile (если UI).
-- [ ] Нет секретов, отладочного кода и случайных файлов в диффе.
-- [ ] Данные защищены (бэкап/аддитивные миграции), план отката есть.
-- [ ] Документация/версия/память обновлены.
-
-## Принципы
-- Сначала понять — потом менять. Одна задача — один связный дифф.
-- Не ломать чужие зоны; при необходимости — договариваться о границах.
-- Необратимые действия (удаление данных, деплой, публикация) — только с явного разрешения.
-- Если застрял: сузить проблему, собрать факты, написать минимальный репро; см. `debugging-playbook`.
-- Контекст не терять: ключевые факты — в память, длинные сессии — компактить.
+> ≈1 450 токенов. Ядро процесса для любого проекта; этапы и расширенный DoD — §2.
+
+## 0 Когда применять
+- Любая задача по коду, данным, конфигам, инфраструктуре или релизу — даже «мелкая правка».
+- Сначала триаж навыков (`skills-router`), затем шаги по §1; проектные скиллы уточняют этот.
+- Исследование или текст без правок — профильный скилл и его гейты.
+
+## 1 Главное
+
+**Шаг 0 — триаж (обязателен).** `skills-router`: тип работы → все применимые скиллы — до разведки и правок.
+
+**Этапы — всегда в этом порядке:**
+1. **Разведка:** память проекта, затронутые файлы/маршруты/модели, риски, критерии приёмки.
+2. **План:** шаги и способ проверки; крупная задача — todo и договорённость с командой.
+3. **Бэкап/безопасность:** git или копия файлов, для БД — дамп; заранее решить, как откатывать.
+4. **Реализация:** минимальные локальные правки, чужие зоны не трогать, держать инварианты.
+5. **Проверки:** линтер, статанализ, тесты (unit/feature), E2E/UI и визуальная проверка при задетом интерфейсе.
+6. **Ревью:** `code-review-checklist` — данные, доступ, безопасность, тесты, стиль, дифф.
+7. **Документация/версия:** документация и CHANGELOG, версия — по правилам проекта.
+8. **Релиз:** `release-and-deploy` — артефакт → проверка → выкатка → smoke → откат.
+9. **Память:** итог (что сделано, как проверено, риски) — в память проекта.
+
+**Принципы.** Сначала понять — потом менять; одна задача — один связный дифф; чужие зоны не ломать; необратимое (удаление данных, деплой, публикация) — только с явного разрешения; застрял — `debugging-playbook`; ключевые факты — в память, длинные сессии — компактить.
+
+## 2 Куда грузить дальше
+| Когда нужно | Файл | ≈токенов |
+|---|---|---|
+| Этапы: входы, артефакты, стоп-условия, ошибки | references/stages.md | ≈2 000 |
+| Полный DoD, гейты по типам работ, шаблон отчёта | references/definition-of-done.md | ≈1 000 |
+| Память, контекст, границы, необратимые действия | references/memory-and-boundaries.md | ≈950 |
+
+## 3 Гейт перед сдачей
+- [ ] Скиллы загружены и использованы; гейты перечислены в отчёте.
+- [ ] Критерии приёмки выполнены; проверено вживую, не только тестами.
+- [ ] Тесты: существующие зелёные, новые падают без правки.
+- [ ] Линтер и статанализ без новых ошибок; в диффе нет секретов, отладки и случайных файлов.
+- [ ] UI — скриншоты «до/после», 1440/390, light/dark.
+- [ ] Данные защищены (бэкап, аддитивные миграции), план отката есть.
+- [ ] Документация, версия и память проекта обновлены.

package/skills/dev-workflow/references/definition-of-done.md

@@ -0,0 +1,44 @@
+# Definition of Done и шаблон отчёта
+
+> Часть навыка dev-workflow. ≈1 000 токенов. Читать, когда: закрываешь задачу, готовишь отчёт или принимаешь чужую работу.
+
+## 1. Полный чек-лист
+- [ ] Применимые скиллы загружены на старте и реально использованы; гейты перечислены в отчёте.
+- [ ] Критерии приёмки выполнены и проверены вживую.
+- [ ] Тесты: существующие зелёные, новые добавлены и падают без правки.
+- [ ] Линтер и статанализ без новых ошибок.
+- [ ] UI (если задет): скриншоты «до/после», 1440/390, light/dark; axe critical/serious = 0.
+- [ ] Нет секретов, отладочного кода и случайных файлов в диффе.
+- [ ] Данные защищены: бэкап, аддитивные миграции, известный откат.
+- [ ] Документация и CHANGELOG обновлены.
+- [ ] Версия поднята по правилам проекта.
+- [ ] Память проекта обновлена: итог, риски, следующие шаги.
+- [ ] Необратимые и внешние действия согласованы.
+
+## 2. Гейты по типу работы
+
+| Тип | Обязательные гейты |
+|---|---|
+| Код/бэкенд | тесты, линтер, статанализ, ревью, версия |
+| UI/вёрстка | скриншоты 1440/768/390, обе темы, axe, адаптив |
+| БД/миграции | бэкап до, проверка на копии, откат, инварианты |
+| Релиз/деплой | артефакт, checksums, smoke, план отката |
+| SEO/контент | мета, структура, schema, ссылки, проверка фактов |
+| Плагин/инфраструктура | изоляция, конфиг, совместимость, откат |
+
+## 3. Шаблон отчёта
+```
+1. Что сделано — 2–5 пунктов, без пересказа кода.
+2. Как проверено — команды, тесты, скриншоты, ручные сценарии.
+3. Гейты — какие скиллы и проверки пройдены, что не применимо и почему.
+4. Риски и ограничения — честно, включая непроверенное.
+5. Дальше — что осталось и рекомендации.
+```
+
+## 4. Признаки, что сдавать рано
+- «Работает у меня» без воспроизводимой проверки.
+- Скриншоты только desktop и только светлой темы.
+- Тесты не запускались или упали, а «потом починим».
+- В диффе секреты, дампы, `.env`, случайные файлы.
+- Не описан путь отката для миграции или деплоя.
+- В отчёте нет гейтов — непонятно, что именно проверено.

package/skills/dev-workflow/references/memory-and-boundaries.md

@@ -0,0 +1,31 @@
+# Память, границы и необратимые действия
+
+> Часть навыка dev-workflow. ≈950 токенов. Читать, когда: работаешь в чужом или большом проекте, нужно сохранить контекст или принять рискованное решение.
+
+## 1. Память проекта
+- В начале: прочитать досье и журнал проекта; не угадывать архитектуру по именам файлов.
+- В конце: записать итог — что сделано, как проверено, риски, следующий шаг, нужные команды.
+- Писать факты, а не эмоции: решения, ловушки, инварианты, пути к артефактам.
+- Секреты, пароли, токены и персональные данные в память не писать.
+- Не дублировать одно и то же: обновлять существующую секцию, а не плодить копии.
+
+## 2. Контекст
+- Длинная сессия → компактить; ключевые факты — в память до сжатия.
+- Читать только нужные фрагменты больших файлов, не грузить всё «на всякий случай».
+- Ссылки на артефакты (скриншоты, отчёты, логи) — вместо их содержимого в чате.
+
+## 3. Границы
+- Не менять чужие зоны без причины; если правка неизбежна — сказать об этом в отчёте.
+- Соблюдать соглашения проекта (структура, стиль, команды), даже если «так красивее».
+- Одна задача — один связный дифф; не смешивать рефакторинг и фичу.
+- Проектные скиллы уточняют универсальные; при конфликте — проектный, но не в ущерб безопасности и данным.
+
+## 4. Необратимые действия
+- Удаление данных, `migrate:fresh/reset`, `db:wipe`, `TRUNCATE`, деплой, публикация, рассылка — только с явного разрешения.
+- Перед действием: бэкап, проверка окружения (прод или тест), понятный откат.
+- Сомневаешься — остановись и спроси; «потом восстановим» — не план.
+
+## 5. Команда
+- Договариваться о границах файлов и модулей до правок.
+- В отчёте — что изменилось и что проверять коллеге.
+- Не менять молча общие конфиги, CI и зависимости.