Словами самого skill
Web Design Reviewer проводит работающий сайт через инструмент браузерной автоматизации, визуально его осматривает и исправляет найденное в исходном коде. Он охватывает статичные сайты, SPA на React, Vue, Angular или Svelte, full-stack фреймворки, такие как Next.js и Nuxt, CMS-платформы, такие как WordPress и Drupal, и любые другие веб-приложения.
Workflow состоит из четырёх фаз: сбор контекста и автоопределение фреймворка и метода стилизации, проверка страниц по визуальному чек-листу, исправление проблем с приоритетом от P1 до P3, затем повторная проверка и повтор цикла. Находки группируются по категориям: layout, адаптивность, доступность и визуальная согласованность, каждая с уровнем серьёзности. Исправления следуют принципу минимальных изменений и завершаются отчётом о проверке в формате markdown.
Что он выдаёт
- Отчёт о результатах проверки в формате markdown под названием Web Design Review Results.
- Сводная таблица, охватывающая целевой URL, обнаруженный фреймворк, стилизацию, протестированные вьюпорты, обнаруженные проблемы и исправленные проблемы.
- Записи по каждой проблеме с приоритетом, страницей, элементом, описанием, путём к исправленному файлу, деталями исправления и скриншотами до/после.
- Раздел неисправленных проблем с указанием причины, по которой каждая проблема была оставлена, и рекомендуемого действия для пользователя, а также общими рекомендациями.
Как это работает
- 01Сбор контекста и определение стека
Если URL не указан, он запрашивается, затем выполняется попытка автоматического определения по файлам workspace, таким как package.json, tsconfig.json, tailwind.config, next.config, vite.config и nuxt.config, после чего уточняется, какие страницы входят в область проверки.
- 02Навигация и захват
Он открывает целевой URL, делает скриншоты, извлекает структуру DOM или снимок, когда это возможно, и переходит по дальнейшим страницам через навигацию сайта.
- 03Проверка по визуальному чек-листу
Проблемы с макетом, адаптивностью, доступностью и визуальной согласованностью проверяются по эталонному чек-листу, который снова используется после внесения исправлений.
- 04Определение источника каждой проблемы
Проблемные элементы отслеживаются до источника путём поиска в кодовой базе по именам классов или ID, поиска компонента по тексту или структуре элемента, а также фильтрации по паттернам файлов стилей, компонентов и страниц.
- 05Исправление, затем повторная проверка
Исправления применяются в соответствии с рекомендациями для конкретного фреймворка, затем страница перезагружается или выполняется ожидание HMR dev-сервера, исправленные участки повторно снимаются на скриншот, и результаты «до» и «после» сравниваются.