Web Design Reviewer

Этот навык позволяет визуально инспектировать и проверять качество дизайна сайта, выявлять и исправлять проблемы на уровне исходного кода.

Область применения

Статические сайты (HTML/CSS/JS)
SPA-фреймворки, такие как React / Vue / Angular / Svelte
Фреймворки полного стека, такие как Next.js / Nuxt / SvelteKit
CMS-платформы, такие как WordPress / Drupal
Любые другие веб-приложения

Требования

Обязательные

Целевой сайт должен быть запущен
- Локальный сервер разработки (например, http://localhost:3000)
- Стейджинг-среда
- Продакшен-среда (только для проверок без изменений)
Должна быть доступна автоматизация браузера
- Захват скриншотов
- Навигация по страницам
- Получение информации о DOM
Доступ к исходному коду (при внесении исправлений)
- Проект должен находиться в рабочей области

Обзор рабочего процесса

flowchart TD
    A[Шаг 1: Сбор информации] --> B[Шаг 2: Визуальная инспекция]
    B --> C[Шаг 3: Исправление проблем]
    C --> D[Шаг 4: Повторная проверка]
    D --> E{Остались проблемы?}
    E -->|Да| B
    E -->|Нет| F[Отчёт о завершении]

Шаг 1: Фаза сбора информации

1.1 Подтверждение URL

Если URL не указан, спросите пользователя:

Пожалуйста, укажите URL сайта для проверки (например, http://localhost:3000)

1.2 Понимание структуры проекта

При внесении исправлений соберите следующую информацию:

Пункт	Пример вопроса
Фреймворк	Используете ли вы React / Vue / Next.js и т.п.?
Метод стилизации	CSS / SCSS / Tailwind / CSS-in-JS и т.п.
Расположение исходников	Где находятся файлы стилей и компоненты?
Область проверки	Только конкретные страницы или весь сайт?

1.3 Автоматическое определение проекта

Попытайтесь автоматически определить по файлам в рабочей области:

Цели обнаружения:
├── package.json     → Фреймворк и зависимости
├── tsconfig.json    → Использование TypeScript
├── tailwind.config  → Tailwind CSS
├── next.config      → Next.js
├── vite.config      → Vite
├── nuxt.config      → Nuxt
└── src/ или app/    → Каталог исходников

1.4 Определение метода стилизации

Метод	Обнаружение	Цель редактирования
Чистый CSS	Файлы `*.css`	Глобальный CSS или CSS компонентов
SCSS/Sass	Файлы `.scss`, `.sass`	SCSS-файлы
CSS Modules	Файлы `*.module.css`	Модульные CSS-файлы
Tailwind CSS	Файл `tailwind.config.*`	className в компонентах
styled-components	`styled.` в коде	JS/TS файлы
Emotion	Импорты `@emotion/`	JS/TS файлы
CSS-in-JS (другие)	Инлайновые стили	JS/TS файлы

Шаг 2: Фаза визуальной инспекции

2.1 Обход страниц

Перейти по указанному URL
Сделать скриншоты
Получить структуру/снимок DOM (если возможно)
Если есть дополнительные страницы, пройти по навигации

2.2 Проверяемые элементы

Работайте с references/visual-checklist.md во время инспекции и повторной проверки после исправлений.

Проблемы с версткой

Проблема	Описание	Важность
Выход за пределы элемента	Контент выходит за пределы родительского элемента или окна	Высокая
Перекрытие элементов	Нежелательное перекрытие элементов	Высокая
Проблемы с выравниванием	Проблемы с сеткой или flex-выравниванием	Средняя
Несогласованность отступов	Несоответствие padding/margin	Средняя
Обрезка текста	Длинный текст отображается некорректно	Средняя

Проблемы с адаптивностью

Проблема	Описание	Важность
Неадаптивный дизайн	Верстка ломается на маленьких экранах	Высокая
Проблемы с брейкпоинтами	Неестественные переходы при изменении размера экрана	Средняя
Размер элементов для касания	Кнопки слишком малы на мобильных устройствах	Средняя

Проблемы доступности

Проблема	Описание	Важность
Недостаточный контраст	Низкое соотношение контраста текста и фона	Высокая
Отсутствие состояния фокуса	Невозможно определить состояние при навигации с клавиатуры	Высокая
Отсутствует alt-текст	Нет альтернативного текста для изображений	Средняя

Визуальная согласованность

Проблема	Описание	Важность
Несогласованность шрифтов	Смешение разных шрифтов	Средняя
Несогласованность цветов	Несоблюдение брендовых цветов	Средняя
Несогласованность отступов	Нерегулярные отступы между похожими элементами	Низкая

2.3 Тестирование вьюпорта (адаптивность)

Проверить на следующих размерах экрана:

Название	Ширина	Представительное устройство
Мобильный	375px	iPhone SE/12 mini
Планшет	768px	iPad
Десктоп	1280px	Стандартный ПК
Широкий	1920px	Большой дисплей

Шаг 3: Фаза исправления проблем

3.1 Приоритизация проблем

block-beta
    columns 1
    block:priority["Матрица приоритетов"]
        P1["P1: Исправить немедленно\n(Проблемы с версткой, влияющие на функциональность)"]
        P2["P2: Исправить далее\n(Визуальные проблемы, ухудшающие UX)"]
        P3["P3: Исправить при возможности\n(Незначительные визуальные несоответствия)"]
    end

3.2 Определение исходных файлов

Определите исходные файлы по проблемным элементам:

Поиск по селекторам
- Поиск по классу или ID в кодовой базе
- Поиск определений стилей с помощью grep_search
Поиск по компонентам
- Определение компонентов по тексту или структуре элемента
- Поиск связанных файлов с помощью semantic_search

Фильтрация по шаблонам файлов

Файлы стилей: src/**/*.css, styles/**/*
Компоненты: src/components/**/*
Страницы: src/pages/**, app/**

3.3 Применение исправлений

Руководство по исправлениям для конкретных фреймворков

См. references/framework-fixes.md для деталей.

Принципы исправлений

Минимальные изменения: Вносить только необходимые изменения для решения проблемы
Соблюдение существующих паттернов: Следовать стилю кода проекта
Избегать нарушений: Не влиять на другие области
Добавлять комментарии: Объяснять причины исправлений там, где это уместно

Шаг 4: Фаза повторной проверки

4.1 Подтверждение после исправлений

Перезагрузить браузер (или дождаться HMR сервера разработки)
Сделать скриншоты исправленных участков
Сравнить до и после

4.2 Регрессионное тестирование

Проверить, что исправления не повлияли на другие области
Подтвердить, что адаптивность не нарушена

4.3 Решение о повторении

flowchart TD
    A{Остались проблемы?}
    A -->|Да| B[Вернуться к Шагу 2]
    A -->|Нет| C[Перейти к отчёту о завершении]

Лимит итераций: Если для одной проблемы требуется более 3 попыток исправления, проконсультируйтесь с пользователем

Формат вывода

Отчёт о результатах проверки

# Результаты проверки дизайна сайта

## Итоги

| Пункт | Значение |
|-------|----------|
| Целевой URL | {URL} |
| Фреймворк | {Обнаруженный фреймворк} |
| Стилизация | {CSS / Tailwind / и т.п.} |
| Проверенные вьюпорты | Десктоп, Мобильный |
| Обнаружено проблем | {N} |
| Исправлено проблем | {M} |

## Обнаруженные проблемы

### [P1] {Название проблемы}

- **Страница**: {Путь страницы}
- **Элемент**: {Селектор или описание}
- **Проблема**: {Подробное описание}
- **Исправленный файл**: `{Путь к файлу}`
- **Детали исправления**: {Описание изменений}
- **Скриншоты**: До/После

### [P2] {Название проблемы}
...

## Неисправленные проблемы (если есть)

### {Название проблемы}
- **Причина**: {Почему не было исправлено/не удалось исправить}
- **Рекомендуемые действия**: {Рекомендации для пользователя}

## Рекомендации

- {Предложения по дальнейшему улучшению}

Необходимые возможности

Возможность	Описание	Обязательно
Навигация по страницам	Доступ к URL, переходы по страницам	✅
Захват скриншотов	Снимки страниц	✅
Анализ изображений	Обнаружение визуальных проблем	✅
Получение DOM	Получение структуры страницы	Рекомендуется
Чтение/запись файлов	Чтение и редактирование исходного кода	Обязательно для исправлений
Поиск по коду	Поиск в проекте	Обязательно для исправлений

Референсная реализация

Реализация с Playwright MCP

Playwright MCP рекомендуется как референсная реализация для этого навыка.

Возможность	Инструмент Playwright MCP	Назначение
Навигация	`browser_navigate`	Доступ к URL
Снимок	`browser_snapshot`	Получение структуры DOM
Скриншот	`browser_take_screenshot`	Изображения для визуальной инспекции
Клик	`browser_click`	Взаимодействие с элементами
Изменение размера	`browser_resize`	Тестирование адаптивности
Консоль	`browser_console_messages`	Обнаружение ошибок JS

Пример конфигурации (MCP Server)

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest", "--caps=vision"]
    }
  }
}

Другие совместимые инструменты автоматизации браузера

Инструмент	Особенности
Selenium	Широкая поддержка браузеров, многоязычная поддержка
Puppeteer	Ориентирован на Chrome/Chromium, Node.js
Cypress	Легкая интеграция с E2E тестированием
WebDriver BiDi	Стандартизованный протокол следующего поколения

Тот же рабочий процесс можно реализовать с этими инструментами. Главное — наличие необходимых возможностей (навигация, скриншот, получение DOM).

Лучшие практики

НЕ РЕКОМЕНДУЕТСЯ (DON'T)

❌ Масштабный рефакторинг без согласования
❌ Игнорирование дизайн-систем или брендовых гайдлайнов
❌ Исправления, игнорирующие производительность
❌ Исправление нескольких проблем одновременно (сложно проверить)

Устранение неполадок

Проблема: Файлы стилей не найдены

Проверьте зависимости в package.json
Учтите возможность CSS-in-JS
Учтите CSS, генерируемый во время сборки
Спросите пользователя о методе стилизации

Проблема: Исправления не отображаются

Проверьте работу HMR сервера разработки
Очистите кэш браузера
Пересоберите проект, если требуется сборка
Проверьте проблемы с приоритетом CSS

Проблема: Исправления влияют на другие области

Откатите изменения
Используйте более специфичные селекторы
Рассмотрите использование CSS Modules или scoped styles
Согласуйте с пользователем область влияния изменений

SKILL.md