dsh-desktop-kit 0.0.0-stage → 2.0.0

package/skills/skills-router/SKILL.md

@@ -0,0 +1,53 @@
+---
+name: skills-router
+description: "Старт любой задачи: классифицировать работу и загрузить все применимые скиллы до действий — код, дизайн, SEO, БД, тесты, безопасность, релиз, плагины."
+whenToUse: "В начале КАЖДОЙ задачи, даже мелкой правки: определить тип работы и загрузить нужные скиллы через tool skill до чтения кода и правок."
+user-invocable: true
+---
+
+# Skills-router — навыки применяются сами
+> ≈1 600 токенов. Это ядро; детали — по ссылкам и только когда реально нужны.
+
+## 0. Когда применять
+- В начале ЛЮБОЙ задачи — до чтения кода, данных, конфигов; сомневаешься — загрузи и просмотри.
+- «Маленькая задача» — тоже: мелочи ломают данные, дизайн и SEO.
+
+## 1. Протокол (жёсткие правила)
+1. **Триаж до действий:** что меняем; стек; риски (данные, доступ, деньги, прод, необратимость); что увидит пользователь; как проверим; артефакты (вопросы — `references/routing-matrix.md`).
+2. **Загрузи ВСЕ применимые скиллы** через tool `skill` ДО работы; 2–3 — норма. Несколько типов — всё: «лендинг» = `wow-design` + `seo` + `testing-strategy`.
+3. В плане/первом сообщении **перечисли скиллы и почему**.
+4. В отчёте — **какие гейты пройдены**: тесты, скриншоты, SEO, бэкап, ревью; ни один не применим — скажи прямо.
+5. Проектные скиллы уточняют универсальные; при конфликте побеждает проектный — но не в ущерб безопасности.
+6. Актуальное/сегодня/цены/версии/законы — `web-research` (`web_search` + `web_fetch`, дата и ссылки): память модели не источник свежих фактов.
+
+### Быстрая маршрутизация
+| Триггер | Скиллы |
+|---|---|
+| Любая задача: старт → финал | `skills-router` + `dev-workflow`; в конце `code-review-checklist` |
+| Планирование, ТЗ, анализ, оценка, сравнение вариантов | `requirements-and-planning` (+ `dev-workflow`) |
+| Факты, новости, цены, версии, законы, документация | `web-research` + профильный по теме |
+| Вёрстка, UI, компонент, лендинг, дашборд, адаптив | `wow-design`; ревью — `design-critique`; стили и токены — `ui-design-system` |
+| Любой веб-артефакт: страница, шаблон, URL, мета, блог | `seo` (+ `wow-design`, если UI) |
+| Laravel / PHP / Blade / Eloquent | `php-laravel` (если установлен) + `wow-design`/`seo` по задаче |
+| Bitrix / Aspro / шаблоны сайта | `bitrix-aspro` (если установлен) + `seo` |
+| React / JS / TS / Node / плагины DSH | `javascript-typescript` (если установлен) + `security-review` + `testing-strategy` |
+| БД, SQL, миграции, импорт/восстановление | `database-safety` (+ `service-desk-db-safety`); бэкап до миграций |
+| Тесты, baseline, баг | `testing-strategy` / `service-desk-testing`; баг — `debugging-playbook` |
+| Права, аутентификация, загрузки, секреты | `security-review` (+ `code-review-checklist`) |
+| Релиз, деплой, git, CI, откат | `release-and-deploy` + `git-and-ci` (+ `service-desk-release`) |
+| Word/Excel/PDF, изображения | `office` / `img` (если установлены) |
+
+> Навыки с пометкой «если установлен» не входят в `dsh-desktop-kit`. Вызывай их, только когда они есть в каталоге навыков сессии; иначе применяй правила из профиля/памяти проекта, не тратя вызов на ошибку.
+
+## 2. Куда грузить дальше
+| Нужно | Файл | ≈токенов |
+|---|---|---|
+| Триаж, полная матрица, минимум по артефактам | references/routing-matrix.md | ≈1 700 |
+| Что считается «применил скилл», антипаттерны | references/applying-skills.md | ≈810 |
+
+## 3. Гейт перед сдачей
+- [ ] Триаж выполнен в начале, скиллы зафиксированы в плане.
+- [ ] Все применимые загружены и использованы, а не только `description`.
+- [ ] Взяты их гейты: тесты, скриншоты 1440/768/390 + light/dark, SEO, бэкап, ревью.
+- [ ] В отчёте — скиллы и результаты гейтов.
+- [ ] Пропущенный скилл — осознанное решение, не забывчивость.

package/skills/skills-router/references/applying-skills.md

@@ -0,0 +1,25 @@
+# Что значит «применил скилл» и антипаттерны
+
+> Часть навыка skills-router. ≈810 токенов. Читать, когда: нужно понять, засчитано ли применение скилла, или проверить себя на антипаттерны перед сдачей.
+
+## Что считается «применил скилл»
+- Прочитал `SKILL.md` и релевантные `references/` (не только каталог).
+- Взял оттуда конкретные правила/шаблоны/чек-листы и применил их в работе.
+- Прошёл гейт/DoD из скилла: тесты, скриншоты, SEO-аудит, бэкап, ревью и т.д.
+- Указал в отчёте: «Применено: wow-design (гейт рубрики 4.6), seo (title/meta/schema), testing-strategy (unit+E2E)».
+
+## Антипаттерны (не делать)
+- «Загружу скилл, если вспомню» — триаж обязателен в начале.
+- Прочитать только `description` и считать, что применил.
+- Пропустить `seo`, потому что «это просто правка шаблона» — именно шаблоны ломают индексацию.
+- Пропустить `database-safety`, потому что «миграция аддитивная» — бэкап всё равно обязателен.
+- Игнорировать `wow-design`, потому что «это внутренняя админка» — качество UI влияет на скорость работы.
+- Применять веб-скиллы (`css-scss`, `seo`) к не-веб задачам (скрипт, документ, БД) — шум и потеря времени.
+- Загрузить 5 скиллов и не применить ни один.
+
+## Самопроверка перед сдачей
+- [ ] Триаж выполнен в начале, список скиллов зафиксирован.
+- [ ] Все применимые скиллы загружены и реально использованы.
+- [ ] Гейты пройдены: тесты / скриншоты / SEO / бэкап / ревью — что применимо.
+- [ ] В отчёте перечислены применённые скиллы и результаты гейтов.
+- [ ] Если скилл не применим — это осознанное решение, а не забывчивость.

package/skills/skills-router/references/routing-matrix.md

@@ -0,0 +1,52 @@
+# Триаж и матрица маршрутизации
+
+> Часть навыка skills-router. ≈1 700 токенов. Читать, когда: нужно классифицировать задачу, выбрать скиллы по типу работы или по артефакту.
+>
+> Внешние навыки (`php-laravel`, `bitrix-aspro`, `css-scss`, `javascript-typescript`, `react`, `office`, `img`) вызывай только если они есть в каталоге навыков сессии; иначе применяй правила из профиля/памяти проекта.
+
+## Триаж за 60 секунд
+- **Что создаём/меняем?** Код, интерфейс, контент, данные, конфиг, документ, инфраструктура, плагин.
+- **Какой стек?** PHP/Laravel, Bitrix/Aspro, JS/TS/React, Python, PowerShell, SQL, HTML/CSS.
+- **Какие риски?** Данные/БД, безопасность/доступ, деньги, публичный контент, прод, необратимость.
+- **Что пользователь увидит/измерит?** UI, SEO, скорость, отчёты, API.
+- **Как проверим?** Тесты, скриншоты, аудит, ручной сценарий, бэкап/восстановление.
+- **Какие артефакты на выходе?** Файлы, архив, релиз, документация, скриншоты.
+
+## Полная матрица «тип задачи → скиллы»
+
+| Тип задачи / триггер | Обязательные скиллы |
+|---|---|
+| **Любая задача** (старт и финал) | `skills-router`, `dev-workflow`; в конце — `code-review-checklist` |
+| Планирование, ТЗ, анализ, декомпозиция, оценка, исследование | `requirements-and-planning` (+ `dev-workflow`) |
+| Актуальные факты, новости, «что сейчас», цены, версии, законы, документация, конкуренты | `web-research` (+ профильный: `content-writing` / `seo` / `php-laravel` / `bitrix-aspro` по теме) |
+| Любая вёрстка, UI, компонент, лендинг, дашборд, тема, адаптив | `wow-design`; ревью/апгрейд — `design-critique`; стили/каскад — `css-scss` |
+| Любой веб-артефакт: страница, шаблон, URL, мета, контент, миграция сайта, лендинг, блог | `seo` (SEO по умолчанию) + `wow-design` (если UI) |
+| Laravel / PHP / Blade / Eloquent / artisan | `php-laravel`; при UI — `wow-design`; при контенте — `seo` |
+| Bitrix / Aspro / шаблоны сайта | `bitrix-aspro` + `seo` (+ `css-scss` при стилях) |
+| React / JS / TS / Vite / Node / плагины DSH | `javascript-typescript` (+ `react` для React, `security-review` для плагинов) |
+| БД, SQL, миграции, импорт/экспорт, восстановление | `database-safety` (+ проектный `service-desk-db-safety`); перед миграциями — бэкап |
+| Тесты (unit/feature/E2E/визуальные), baseline | `testing-strategy` (+ `service-desk-testing` для Service Desk) |
+| Баг, падение теста, «не работает» | `debugging-playbook`; тесты — `testing-strategy` |
+| Аутентификация, авторизация, роли, загрузки, платежи, секреты | `security-review` (+ `code-review-checklist`) |
+| Релиз, деплой, версия, архив, откат | `release-and-deploy` (+ `git-and-ci`, `service-desk-release` при необходимости) |
+| Git, ветки, CI, теги, коммиты | `git-and-ci` |
+| Документы Word/Excel/PowerPoint/PDF | `office` + соответствующий `office-*` |
+| Генерация изображений | `img` |
+| Проверка/аудит готового кода/UI | `code-review-checklist` + `design-critique` (UI) + `seo` (веб) |
+| Анализ/исследование/сравнение вариантов | `requirements-and-planning` + `dev-workflow`; выводы фиксировать в память |
+
+Несколько строк применимы одновременно — загрузи все: «новый лендинг на Laravel» → `php-laravel` + `wow-design` + `seo` + `testing-strategy` + `code-review-checklist`.
+
+## Минимальный набор по артефактам
+
+| Артефакт | Минимум |
+|---|---|
+| Новая страница/лендинг | `wow-design` + `seo` (+ `css-scss`, если правятся стили) |
+| Новый компонент/UI-кит | `wow-design` (+ `react` / `javascript-typescript`) |
+| Правка шаблона Bitrix | `bitrix-aspro` + `seo` (+ `wow-design` для UI) |
+| Миграция/изменение схемы | `database-safety` + `php-laravel` (+ бэкап) |
+| Новый API/форма/авторизация | `php-laravel` + `security-review` + `testing-strategy` |
+| Плагин/скрипт автоматизации | `javascript-typescript` + `security-review` + `testing-strategy` |
+| Релизный архив/выкатка | `release-and-deploy` + `git-and-ci` (+ `code-review-checklist`) |
+| Тексты/статьи/анкеты для сайта | `seo` + `requirements-and-planning` (+ `wow-design`, если вёрстка) |
+| Аудит существующего | `code-review-checklist` (+ `design-critique` / `seo` по объекту) |

package/skills/testing-strategy/SKILL.md

@@ -0,0 +1,52 @@
+---
+name: testing-strategy
+description: "Тесты до и после правки: baseline, пирамида unit/feature/E2E, герметичная БД, регрессия на баг, скриншоты, axe, CI."
+whenToUse: "Когда меняешь код и нужен baseline, выбираешь уровень теста, настраиваешь CI, чинишь упавший/flaky тест или проверяешь UI и права."
+user-invocable: true
+---
+
+# Стратегия тестирования (любой стек)
+
+## 0. Когда применять
+- Перед правкой — baseline; после — сравнение.
+- Выбор уровня теста, настройка/починка CI, flaky или медленный набор.
+
+## 1. Главное
+
+**Baseline (до правки):** команда, число тестов/assertion, падения и skip; после — не хуже. Типовые: `vendor/bin/phpunit`, `npm test`, `npx playwright test`; вывод — в файл.
+
+**Пирамида:**
+1. **Unit** — чистая логика, без БД/сети.
+2. **Feature** — HTTP/сценарии, валидация, права; та же СУБД, что прод; отдельная тестовая БД, миграции с нуля.
+3. **E2E/UI** — Playwright: вход, ключевые сценарии, ошибки форм; Chromium + мобильный viewport.
+4. **Визуальные** — `toHaveScreenshot`; обновлять осознанно, дифф смотреть.
+5. **Доступность** — axe-core: контраст, aria, клавиатура, фокус.
+6. **Smoke** — 5–10 проверок после деплоя (вход, список, создание, права).
+
+**Правила:**
+- **Герметичность:** не боевой `.env`, не сеть, не текущая дата; отдельная БД, фабрики, фиксированное время.
+- Проверяй поведение, не реализацию; приватные методы не трогай.
+- Баг → воспроизводящий тест (красный), затем фикс (зелёный).
+- Flaky не игнорируй и не «лечи» retry: ищи гонку/время/данные.
+- Быстро: без `sleep`, реальных писем/очередей (`Mail::fake`, `Queue::fake`).
+- Нет необязательного сервиса/файла → `markTestSkipped('причина')`, не падение.
+- Тестовые данные без PII; после теста — очистка или транзакция.
+- Ассерты значимые; один тест — одно поведение; негативный сценарий тоже.
+- Не отключай auth/CSRF/права ради зелёного теста.
+
+**Фича:** feature (happy path + права admin/user/guest + валидация/границы), unit на логику, E2E/скриншот+axe для UI, миграции — на копии.
+
+**CI:** линтер (`php -l`, `npm run lint`) → статанализ → unit+feature на реальной СУБД → E2E на стенде → артефакты при падении. Падение = красный CI; без `|| true` и «известных падений» без тикета.
+
+**Отчёт:** команды, тесты/assertion, упало/скипнуто и почему, что проверено руками.
+
+## 2. Куда грузить дальше
+Смежные: `debugging-playbook` (баг), `pg-upgrade-verify` (БД), `code-review-checklist` (финал).
+
+## 3. Гейт перед сдачей
+- [ ] Baseline снят, после — не хуже.
+- [ ] Тест на баг падал до фикса и проходит после (или причина, почему нельзя).
+- [ ] Герметично: отдельная БД, без сети/времени/боевого `.env`, без PII.
+- [ ] Полный набор зелёный; flaky разобран; skip объяснён.
+- [ ] UI: E2E/скриншоты/axe.
+- [ ] В отчёте — команды, цифры, непокрытое и почему.

package/skills/ui-design-system/SKILL.md

@@ -0,0 +1,50 @@
+---
+name: ui-design-system
+description: "Правила интерфейса: дизайн-токены, компоненты, все состояния, адаптивность, темы, доступность и визуальная проверка."
+whenToUse: "Любая работа с UI: страница, компонент, форма, стили, адаптив, темы, доступность, дизайн-апгрейд, проверка UX."
+user-invocable: true
+---
+
+# UI/UX и дизайн-система (универсально)
+
+> ≈1 450 токенов. Минимум для интерфейса; детали — §2.
+
+## 0 Когда применять
+- Любая вёрстка и правка стилей: страница, лендинг, дашборд, форма, компонент, тема, адаптив.
+- До кода сверить токены и состояния, после — §3.
+- WOW — `wow-design`, аудит готового интерфейса — `design-critique`; здесь минимум, который нельзя пропустить.
+
+## 1 Главное
+
+**Токены.** Цвета, отступы, радиусы, типографика, тени, z-index — в переменных; одна шкала отступов 4/8/12/16/24/32, выравнивание, ограничение ширины. В разметке нет hex и магических px.
+
+**Компоненты.** Кнопки, поля, селекты, чекбоксы, бейджи, карточки, таблицы, модалки — один вид и поведение.
+
+**Состояния:** default, hover, focus-visible, active, disabled, loading, empty, error (+ selected/checked). Не только цветом — текстом или иконкой.
+
+**Типографика.** 2–3 размера + заголовки, строка 60–75 символов, один H1, ясная иерархия.
+
+**UX.** Один главный сценарий; действия заметны и в конце пути взгляда; подписи по-человечески; ошибки у поля и с решением; пустые состояния объясняют, что будет и что делать; не заставлять запоминать (подсказки, умолчания, автосохранение); не блокировать — прогресс и скелетоны.
+
+**Адаптив.** Точки 560/960, проверка 360/390/768/1440; таблицы скроллятся внутри контейнера; кнопки на mobile — на всю ширину; тач-цели ≥ 40–44px; важное не только по hover.
+
+**Темы и доступность.** Light/dark/contrast, контраст ≥ 4.5:1, без цветов в разметке. Keyboard-first: focus-visible, Tab-порядок, Escape, aria у иконок и модалок; не только цветом.
+
+**Проверка.** Скриншоты desktop+mobile, «до/после»; axe critical/serious = 0; длинные тексты, кириллица, числа, переполнение, ошибки сети.
+
+**«ВАУ» без вреда.** Спокойная палитра, аккуратные акценты, анимации 120–200 мс на действиях; сначала ясность, потом эффекты.
+
+## 2 Куда грузить дальше
+| Когда нужно | Файл | ≈токенов |
+|---|---|---|
+| Токены, компоненты, состояния, формы, таблицы | references/tokens-and-components.md | ≈2 100 |
+| Доступность, клавиатура, контраст, адаптив | references/accessibility-and-responsive.md | ≈1 400 |
+| Скриншоты и визуальное QA | references/visual-qa.md | ≈1 100 |
+
+## 3 Гейт перед сдачей
+- [ ] Только токены: нет hex и произвольных px.
+- [ ] Все 8 состояний у интерактивных элементов.
+- [ ] 360/390/768/1440 без горизонтального скролла; тач-цели ≥ 40px.
+- [ ] Обе темы, контраст ≥ 4.5:1, focus-visible виден, проход с клавиатуры.
+- [ ] axe critical/serious = 0; пустое, ошибочное и загрузочное состояния осмысленны.
+- [ ] Скриншоты приложены (desktop+mobile, light/dark), замечания исправлены.

package/skills/ui-design-system/references/accessibility-and-responsive.md

@@ -0,0 +1,50 @@
+# Доступность, клавиатура и адаптивность
+
+> Часть навыка ui-design-system. ≈1 400 токенов. Читать, когда: проверяешь контраст, клавиатуру, ARIA, тач-цели, брейкпоинты и поведение на 360–1440.
+
+## 1. Контраст и цвет
+- Текст ≥ 4.5:1 к фону; крупный (≥ 24px или ≥ 19px bold) ≥ 3:1.
+- Границы полей, иконки и индикаторы ≥ 3:1; focus-ring заметен и на светлом, и на тёмном.
+- Проверять обе темы и состояния hover/disabled; полупрозрачный текст считать по итоговому цвету.
+- Смысл не передавать только цветом: ошибка — текст + иконка, статус — подпись.
+
+## 2. Клавиатура
+- Всё интерактивное доступно Tab в визуальном порядке; нет ловушек и «мёртвых» элементов.
+- `:focus-visible` виден всегда (2px, offset 2px); не убирать outline без замены.
+- Enter/Space активируют, Escape закрывает модалку/меню, стрелки ходят внутри списков и табов.
+- Модалка: фокус переходит внутрь, Tab не выходит наружу, после закрытия фокус возвращается на кнопку.
+- Skip-link к основному контенту; скрытые меню не ловят фокус.
+
+## 3. Семантика и ARIA
+- Нативные элементы вместо `div` с role: `button`, `a`, `input`, `label`, `table`, `dialog`.
+- `label` связан с полем; иконочные кнопки — `aria-label`; изображения — `alt` (декоративные — `alt=""`).
+- `aria-expanded` для аккордеонов/меню, `aria-current` для активной навигации, `aria-live` для toast и счётчиков.
+- Ошибки полей — текстом и через `aria-describedby`; не только красная рамка.
+- Заголовки по уровням (H1 → H2 → H3), один H1; landmark-зоны (`header`, `nav`, `main`, `footer`).
+
+## 4. Указатель и тач
+- Тач-цели ≥ 44×44 px (минимум по WCAG 2.2 — 24×24), между соседними — зазор.
+- Важные действия не только по hover/right-click/drag: дублировать кнопкой.
+- Курсор pointer у кликабельного; disabled — `cursor: not-allowed` и понятная причина.
+
+## 5. Адаптив
+- Брейкпоинты: mobile ≤ 560, tablet ≤ 960, desktop > 960; проверять 360/390/768/1440.
+- Контент в max-width, поля не «прилипают» к краям на планшете.
+- Таблицы: скролл-контейнер или карточки на mobile; не обрезать колонки.
+- Кнопки на mobile — на всю ширину; меню — бургер с `aria-expanded` и закрытием по Escape.
+- Изображения — с `width/height` или aspect-ratio, `object-fit`, без скачков layout.
+- Не фиксировать высоту текстовых блоков; длинные слова — `overflow-wrap: anywhere`.
+- Проверить zoom 200% и системный крупный шрифт: ничего не обрезается и не наезжает.
+
+## 6. Движение и время
+- `prefers-reduced-motion` отключает необязательные анимации.
+- Без мигания чаще 3 раз в секунду и автопрокрутки, которую нельзя остановить.
+- Таймауты сессий и форм — предупреждать и давать продлить.
+
+## 7. Быстрый чек-лист
+- [ ] Контраст в light/dark, включая disabled и placeholder.
+- [ ] Проход только с клавиатуры: Tab, Enter, Space, Escape, стрелки.
+- [ ] Фокус виден и возвращается после модалок.
+- [ ] Все поля с label, ошибки — текстом.
+- [ ] 360/390/768/1440 без горизонтального скролла.
+- [ ] zoom 200% и длинный контент не ломают вёрстку.

package/skills/ui-design-system/references/tokens-and-components.md

@@ -0,0 +1,67 @@
+# Токены и компоненты интерфейса
+
+> Часть навыка ui-design-system. ≈2 100 токенов. Читать, когда: нужно завести или проверить токены, собрать компоненты и их состояния, оформить формы, таблицы, модалки и уведомления.
+
+## 1. Токены: что заводить
+- **Цвета — по роли, не по оттенку:** `--color-bg`, `--color-surface`, `--color-text`, `--color-text-muted`, `--color-border`, `--color-accent`, `--color-accent-hover`, `--color-danger`, `--color-success`, `--color-focus-ring`. В разметке — только `var(--…)`.
+- **Отступы:** одна шкала 4/8/12/16/24/32 (+48/64 для секций). Никаких 7px и 13px «на глаз».
+- **Радиусы:** 2–3 значения (4/8/12/16). **Тени:** 2–3 уровня (карточка, поповер, модалка), одно направление света.
+- **Типографика:** H1–H3 + body + caption; шаг размеров 1.2–1.33; line-height 1.2–1.25 для заголовков и 1.5–1.6 для текста; вес 400/500/600, не больше.
+- **Прочее:** z-index-шкала (dropdown/popover/modal/toast), длительности 120–200 мс, общий easing (на входе — ease-out).
+- **Темы:** одни имена токенов, разные значения для light/dark/contrast; переключение через `data-theme` или `prefers-color-scheme`. Цвета не дублировать в компонентах и не зашивать в HTML.
+
+## 2. Компоненты: единый вид и поведение
+
+| Группа | Что должно быть согласовано |
+|---|---|
+| Кнопки | primary/secondary/ghost/danger, 2–3 размера, одинаковая высота, иконка слева/справа |
+| Поля | input/textarea/select, label сверху, подсказка и ошибка под полем |
+| Выбор | checkbox, radio, switch — зона клика на весь label, явное состояние |
+| Данные | таблица, список, карточка, бейдж/тег, пагинация |
+| Обратная связь | alert, toast, tooltip, skeleton, пустое состояние |
+| Навигация | табы, хлебные крошки, меню, модалка/диалог |
+
+- Одинаковые радиусы, отступы, высота строки и focus-ring у всех интерактивных элементов.
+- Иконки — один набор и одна толщина линии; в интерфейсе не эмодзи.
+- Компонент описывается состояниями и вариантами, а не «нарисован один раз под макет».
+
+## 3. Состояния: матрица
+
+| Состояние | Что проверять |
+|---|---|
+| default | базовый вид, читаемость, размеры |
+| hover | усиление фона/границы и курсор; не единственный сигнал действия |
+| focus-visible | видимое кольцо 2px + offset, работает и в тёмной теме |
+| active/pressed | короткое затемнение или сдвиг, без «прыжка» вёрстки |
+| disabled | приглушение + запрет клика + причина/подсказка, не только opacity |
+| loading | спиннер/скелетон, ширина не скачет, повторный клик заблокирован |
+| empty | объяснение, что здесь будет, и действие |
+| error | текст ошибки рядом и что делать; поле подсвечено, но не только цветом |
+
+- Для выбора и переключателей добавить selected/checked/indeterminate.
+- Для ссылок и иконочных кнопок — свои hover/focus, а не «как у кнопки».
+
+## 4. Формы
+- Label всегда видимый (placeholder — не label), обязательность помечена и в подписи.
+- Валидация — после отправки и на blur; не ругать за поле, которое ещё не трогали.
+- Ошибка конкретная и с решением: «Введите телефон в формате +7…», не «Ошибка».
+- Ввод не сбрасывать при ошибке; для длинных форм — черновик/автосохранение.
+- Связанные поля группировать, на мобильном — один столбец, кнопка отправки одна и заметная.
+
+## 5. Таблицы и списки
+- Числа — по правому краю и с одинаковым числом знаков; даты — в одном формате.
+- Заголовок таблицы закреплён при скролле, сортировка явная (стрелка + `aria-sort`).
+- Горизонтальный скролл — внутри контейнера таблицы, страница не «едет».
+- Пустое состояние: что тут появится и как добавить; фильтры не дают «пусто без объяснений».
+
+## 6. Модалки и уведомления
+- Модалка: заголовок, закрытие (крестик + Escape), фокус внутрь и возврат после закрытия, блокировка фона.
+- Не вкладывать модалку в модалку; длинный контент — скролл внутри.
+- Toast — 3–5 с, не перекрывает главное действие, важное дублируется в интерфейсе.
+- Tooltip — подсказка, а не место для обязательной информации.
+
+## 7. Мелочи, которые видно
+- Выравнивание по одной сетке; одинаковые внутренние отступы карточек.
+- Длинные заголовки переносятся, а не обрезаются многоточием без `title`.
+- Кнопки-иконки имеют `aria-label` и одинаковый размер.
+- Тени и бордеры не спорят: либо тень, либо рамка.

package/skills/ui-design-system/references/visual-qa.md

@@ -0,0 +1,44 @@
+# Визуальная проверка UI
+
+> Часть навыка ui-design-system. ≈1 100 токенов. Читать, когда: снимаешь скриншоты, оцениваешь экран глазами и закрываешь UI-задачу.
+
+## 1. Что снять
+- Экраны: 1440 (desktop), 768 (tablet), 390 (mobile); дополнительно 360, если интерфейс узкий.
+- Темы: light и dark; contrast — если есть.
+- Состояния: default, пустое, ошибка, загрузка, открытая модалка/меню, фокус на поле.
+- «До/после» — для правок существующего интерфейса.
+
+## 2. Чем снимать
+- Playwright или headless Chrome/Edge; полный экран и отдельные блоки крупно.
+- Один масштаб и размер окна при сравнении; не ресайзить вручную между кадрами.
+- PNG с понятными именами (`home-1440-light.png`) — чтобы приложить к отчёту.
+
+## 3. На что смотреть
+- Иерархия: один H1, понятный главный CTA, второй план не спорит.
+- Воздух и ритм: одна шкала отступов, блоки не «слипаются» и не разъезжаются.
+- Выравнивание: края, базовые линии, одинаковые внутренние отступы карточек.
+- Адаптив: нет горизонтального скролла, ничего не обрезано, меню работает.
+- Читаемость: контраст, длина строки, размер текста, переносы длинных заголовков.
+- Состояния: hover/focus/disabled/error действительно отличаются.
+- Мелочи: иконки одного стиля, без эмодзи; тени и бордеры не спорят.
+
+## 4. Автопроверки
+- axe-core: critical и serious = 0; остальное — осознанно в бэклог.
+- Консоль без ошибок; шрифты и картинки загрузились, нет «прыжков» layout.
+- Клавиатурный проход и доступные имена кнопок.
+
+## 5. Стресс контента
+- Длинные ФИО, адреса, названия организаций; числа с разрядами; латиница + кириллица.
+- Пустое поле, очень длинный список, нулевые данные, ошибка сети.
+- Кнопки с длинным текстом; подписи в узкой колонке.
+
+## 6. «ВАУ» без вреда
+- Спокойная палитра и 1–2 акцента; микроанимации 120–200 мс только на действиях.
+- Красота не снижает скорость, контраст и понятность: сначала ясность, потом эффект.
+- Не тащить эффект, если он ломает адаптив, доступность или производительность.
+
+## 7. Приёмка
+- [ ] Скриншоты 1440/768/390, обе темы, ключевые состояния.
+- [ ] Нет горизонтального скролла и обрезанного контента.
+- [ ] axe critical/serious = 0.
+- [ ] Замечания исправлены и проверены повторным кадром.

package/skills/web-research/SKILL.md

@@ -0,0 +1,47 @@
+---
+name: web-research
+description: "Живой поиск в интернете: актуальные факты, новости, цены, версии, законы и документация — 2+ источника, дата «актуально на» и ссылки."
+whenToUse: "Нужны свежие или внешние данные: новости, «что сейчас», цены, версии ПО, законы, документация, конкуренты; просьба «поищи в интернете»."
+user-invocable: true
+---
+
+# Живой веб-поиск (реальное время)
+
+> ≈1 450 токенов. Только `web_search` + `web_fetch`: память — не источник свежих фактов; рецепты и формат — §2.
+
+## 0 Когда применять
+- Вопрос про **сейчас/сегодня/последние**: новости, курсы, цены, релизы, версии, тарифы.
+- Проверка факта, цитаты, даты, имени, закона, медицинской или правовой нормы.
+- Документация перед кодом: версии API, breaking changes.
+- Конкуренты и рынок для SEO, свежие исследования для статьи.
+- Прямая просьба «поищи в интернете»; при важной свежести обязателен, даже если ответ «кажется известным».
+
+## 1 Главное
+
+**Только живой поиск.** `web_search` + `web_fetch`; сниппетов мало для деталей и цифр; никаких URL, цифр и дат «по памяти».
+
+**Запросы.** 2–4 формулировки: рус/англ, синонимы, официальные термины; для версий и цен — `site:` официального домена.
+
+**Источники.** 2–3 независимых, сначала официальные: документация, госсайты, производитель, крупные СМИ. Факт подтверждают **2+ источника**; расхождения — показать оба и объяснить.
+
+**Даты.** Фиксировать дату поиска и публикации источника; по умолчанию данные не старше 12 месяцев (кроме исторических справок); в ответе — **«актуально на YYYY-MM-DD»**.
+
+**Ссылки.** Markdown-ссылки (название + URL). URL и цифры не выдумывать: нет ссылки — нет утверждения.
+
+**Достоверность.** Факт отличать от мнения и маркетинга; медицина и право — только официальные источники и осторожные формулировки; платный источник — сказать прямо, не выдавать пересказ за первоисточник; результата нет — честно сообщить и уточнить запрос; устаревшее — предупредить, при смене версии/цены — оба значения с датами.
+
+**Формат.** Вывод (1–3 предложения) → детали с датами и версиями → «Источники:» (название, URL, дата) → «Актуально на: YYYY-MM-DD».
+
+**Связки.** `content-writing` и `seo` — факты только после проверки; версии API — перед кодом; вводные для `requirements-and-planning` — со ссылками.
+
+## 2 Куда грузить дальше
+| Когда нужно | Файл | ≈токенов |
+|---|---|---|
+| Запросы, источники, версии и цены | references/query-recipes.md | ≈1 450 |
+| Ответ со ссылками, расхождения, медицина/право | references/answer-and-citations.md | ≈1 500 |
+
+## 3 Гейт перед сдачей
+- [ ] Поиск вживую; ≥ 2 независимых источника.
+- [ ] Дата поиска и публикаций зафиксированы; «актуально на YYYY-MM-DD» в ответе.
+- [ ] Каждое утверждение со ссылкой; URL и цифры не выдуманы.
+- [ ] Расхождения, устаревшее и платные источники раскрыты.

package/skills/web-research/references/answer-and-citations.md

@@ -0,0 +1,60 @@
+# Ответ, ссылки и спорные случаи
+
+> Часть навыка web-research. ≈1 500 токенов. Читать, когда: собираешь ответ с цитатами, источники расходятся, данные устарели или тема медицинская/юридическая.
+
+## 1. Каркас ответа
+```
+1. Вывод — 1–3 предложения.
+2. Детали — даты, версии, цифры, условия.
+3. Источники — название + URL + дата публикации.
+4. Актуально на: YYYY-MM-DD.
+```
+
+- Дату брать из системного времени и дат источников, не придумывать.
+- Ссылки — markdown, кликабельные: `[Название](https://…)`.
+- Источник на английском — цитировать оригинал и пересказать суть по-русски.
+
+## 2. Как цитировать
+- На каждое фактическое утверждение — ссылка на страницу, где это сказано.
+- Ссылка ведёт на конкретную страницу или раздел, а не на главную.
+- Дата публикации — если есть; если нет, писать «дата не указана».
+- Не смешивать своё мнение с цитатой: «По данным X…», «Рекомендую…».
+
+## 3. Источники расходятся
+- Показать оба значения и оба источника, объяснить вероятную причину: разные даты, методики, регионы.
+- Выбрать более свежий и официальный как основной, но не скрывать второй.
+- Если вопрос критичный — сказать, что нужно уточнение у владельца данных.
+
+## 4. Данные устарели
+- Предупредить: «данные за <год>, актуальнее не найдено».
+- При смене версии или цены — «было → стало» с датами.
+- Историческую справку помечать как историческую и не требовать от неё свежести.
+
+## 5. Платные и закрытые источники
+- Сказать прямо: «полный текст платный или по подписке», дать видимую часть.
+- Не выдавать пересказ за первоисточник.
+- Не обходить paywall и не искать пиратские копии.
+
+## 6. Медицина и право
+- Только официальные источники и осторожные формулировки: «по клиническим рекомендациям…», «согласно ст. …».
+- Не ставить диагнозы и не заменять консультацию врача или юриста; для решений направлять к специалисту.
+- Указывать редакцию закона и дату вступления в силу.
+- Не переносить зарубежные нормы на РФ без оговорки.
+
+## 7. Если ничего не найдено
+- Честно: «надёжных источников не найдено».
+- Коротко: что пробовал — запросы, домены.
+- Что уточнить у пользователя: город, год, версия, организация.
+- Не заполнять пробел догадкой и не выдумывать ссылку.
+
+## 8. Примеры
+- Плохо: «Новая версия вышла недавно» — без номера, ссылки и даты.
+- Хорошо: «Версия X.Y — [release notes](https://…), опубликовано <дата>; актуально на <дата>».
+- Плохо: «Врачи советуют…» — без источника.
+- Хорошо: «Согласно клиническим рекомендациям ([ссылка], <год>)…».
+
+## 9. Связка с другими навыками
+- `content-writing` — факты и цитаты только после `web-research`, ссылки — в черновике.
+- `seo` — свежая семантика, конкуренты, тренды и проверка выдачи.
+- Стековые скиллы (PHP/Laravel, JS/TS, Bitrix и т. п.) — версии и API сверять с официальной документацией.
+- `requirements-and-planning` — рыночные и правовые вводные подтверждать источниками.

package/skills/web-research/references/query-recipes.md

@@ -0,0 +1,44 @@
+# Рецепты запросов и иерархия источников
+
+> Часть навыка web-research. ≈1 450 токенов. Читать, когда: поиск даёт мусор, нужен первоисточник, версия/цена/закон или сравнение нескольких источников.
+
+## 1. Как формулировать запросы
+- 2–4 варианта на один вопрос: русский и английский, синонимы, официальные термины («Правительство Москвы», а не «мэрия»).
+- Короткие запросы лучше длинных: 3–6 значимых слов; убрать «подскажите», «срочно», «пожалуйста».
+- Уточнять контекст: город, организация, год, редакция, версия продукта.
+- Для кода и документации: `site:` официального домена, имя функции или текст ошибки в кавычках.
+- Для законов: номер, дата, «действующая редакция», официальный портал правовой информации.
+- Для цен и тарифов: название продукта + «тарифы» + год и `site:` вендора.
+- Точные фразы — в кавычках; исключения — минусом; операторами не злоупотреблять.
+
+## 2. Иерархия источников
+1. **Первоисточник:** официальная документация, закон, приказ, пресс-релиз вендора, статистика ведомства.
+2. **Профильные авторитетные:** отраслевые издания, крупные СМИ, рецензируемые журналы.
+3. **Агрегаторы, обзоры, форумы** — подсказка, где искать, но не доказательство.
+
+- Медицина: Минздрав, Росздравнадзор, клинические рекомендации, ВОЗ; не сайты-обзоры о здоровье.
+- Право: текст закона и официальные разъяснения; статьи юристов — вторичны.
+- Софт: CHANGELOG, документация, страницы релизов; блоги-пересказы — вторичны.
+
+## 3. Как найти первоисточник
+- Начать с официального домена, затем смотреть, кто ссылается на оригинал, а не на пересказ.
+- В статье искать ссылку на документ или исследование и открывать её.
+- Проверить, что страница та самая: версия, дата, нужный раздел, а не редирект на главную.
+- Для цифр искать таблицу или методику расчёта, а не только число в тексте.
+
+## 4. Версии, цены, законы
+- Версия: CHANGELOG, release notes, тег в репозитории; фиксировать номер и дату.
+- Цена/тариф: официальная страница тарифов; указывать дату, валюту и условия (регион, НДС).
+- Закон: действующая редакция и дата вступления в силу; проверить, не отменён ли.
+- Изменение: показывать «было → стало» с датами, а не только текущее значение.
+
+## 5. Если результатов нет
+- Переформулировать: убрать жаргон, сменить язык, добавить год или организацию.
+- Проверить официальный сайт напрямую и поиск по нему.
+- После 2–3 попыток честно сказать, что надёжных данных нет; не подменять догадкой.
+
+## 6. Чего не делать
+- Не цитировать сниппет как источник, не открыв страницу.
+- Не брать цифры из SEO-статей без первоисточника.
+- Не выдавать старую версию за текущую; не игнорировать дату публикации.
+- Не выдумывать URL «по шаблону» и не собирать домены на глаз.