Скилл для проверки интерфейсов после вайбкодинга
SKILL.md: агент проверяет экраны на телефоне и ноутбуке до того, как это сделает клиент
Какую задачу решает
Проверить реальный интерфейс после вайбкодинга
Что будет на выходе
Установленный скилл и отчёт о проблемах интерфейса
- Кому подойдёт
Вайбкодер, у которого агент собрал интерфейс, но непонятно, что в нём сломано
- Тема
- Агенты и Claude Code
- Инструменты
- Claude CodeCursorCodex
Агент говорит «готово, всё работает», ты открываешь страницу на ноутбуке, и правда красиво. Потом открываешь на телефоне: кнопка оплаты уехала за край экрана, длинное название тарифа ломает карточку, а при пустом списке заявок вместо подсказки белый экран. Агент проверял код, который написал, и не смотрел на экран глазами человека.
Ниже готовый скилл ui-quality-check: SKILL.md, который заставляет агента открыть интерфейс на трёх ширинах экрана, прогнать пустые, длинные и ошибочные данные, пройти страницу с клавиатуры и записать каждую проблему с приоритетом и шагами воспроизведения. Чинит он только после твоего «да» и потом перепроверяет те же экраны.
Кладёшь SKILL.md в проект, называешь экраны и главное действие на каждом. Получаешь отчёт: что сломано на 360, 768 и 1440 пикселях, в каких состояниях, с приоритетом P0–P3, и план починки, который агент выполнит после подтверждения.
Что внутри
- 📄Полный SKILL.md
Что нужно на входе, шесть проверок, правила приоритетов, формат отчёта и самопроверка.
- 📱Три ширины экрана
360, 768 и 1440 пикселей: телефон, планшет, ноутбук. Каждая проблема привязана к ширине.
- 🧪Неудобные данные
Пусто, очень много, очень длинно, ошибка сервера. На них ломается то, что агент «проверил».
- 🚦Приоритеты P0–P3
Сначала чинится то, что мешает пользователю сделать главное действие.
Как использовать
- 1Сохрани скилл
Положи файл в
.claude/skills/ui-quality-check/SKILL.mdв папке проекта. - 2Дай агенту глаза
Лучше всего, если у агента есть доступ к браузеру, например через Playwright MCP: он сам откроет страницы и сделает скриншоты. Если нет, сделай скриншоты на трёх ширинах сам и положи в папку
screens/. - 3Назови экраны и главное действие
Например: «Главная — оставить заявку, Тарифы — выбрать тариф, Кабинет — посмотреть свои заявки».
- 4Прочитай отчёт и подтверди план
Агент сначала только проверяет. Чинить P0 и P1 он начнёт, когда ты согласуешь план, и после починки перепроверит те же экраны.
Если хочешь сначала понять, какие состояния вообще должны быть у экрана, загляни в бесплатный гайд четыре состояния, без которых интерфейс разваливается.
Рядом по теме: Скилл для прототипа интерфейса на Tailwind, Скилл: тест-кейсы из PRD с привязкой к требованиям, Свой скилл переупаковки: одна статья — пять форматов, статья «Cursor или Claude Code» и 12 модов Claude Code для вайбкодера (490 ₽).
Дальше — для участников
Регистрация бесплатная и занимает минуту. Часть закрытых материалов откроется сразу, без карты.
Что дальше
- Если основная беда в мобильной вёрстке, пошагово разобрано в гайде почини вёрстку на телефоне и не устрой редизайн.
- Клавиатуру, контраст и подписи подробно проверяет гайд сайт, которым удобно всем.
- Чтобы интерфейс изначально собирался по шагам и проверялся на каждом, пройди Первый экран за 990 ₽.
