Как создать скилл Claude Code для проверки сайта перед публикацией

Как создать скилл Claude Code для проверки сайта перед публикацией

Создайте скилл Claude Code как короткую инструкцию для проверки сайта: что запустить, какие страницы открыть и как сообщить об ошибках. Начните с формы заявки, мобильного экрана и оформления заказа, если оно есть. Затем добавьте проверки проекта, которые уже умеете запускать. Ниже — порядок работы и текст инструкции, который можно перенести в файл. Скилл поможет повторять одну и ту же проверку после правок, но окончательное решение о публикации останется за человеком.

Что поручить скиллу в первую очередь?

Откройте сайт так, как его откроет клиент: с телефона, без знания структуры проекта. Найдите страницу услуги, нажмите основную кнопку и пройдите путь до сообщения об успешной отправке заявки или заказа. Запишите этот путь. Именно его стоит дать Claude Code в качестве первого сценария: он привязан к вашему сайту, а результат можно проверить вручную.

Для сайта малого бизнеса начните с короткого списка:

  • Основная кнопка видна на узком экране и открывает нужную страницу или форму.
  • Форма показывает понятную ошибку при пустом обязательном поле и подтверждает успешную отправку.
  • При оформлении заказа итоговая цена совпадает с ценой, которую видит покупатель на предыдущем шаге; валюта указана как BYN, если сайт показывает цены в белорусских рублях.
  • После правок страница по-прежнему открывается, а её заголовок и основные ссылки остаются на месте.

Не нужно сразу поручать скиллу проверку всего сайта. Если сейчас важнее форма, возьмите одну страницу с формой и один экран телефона. Для подробного прохода по кнопкам и полям пригодится чек-лист мобильной версии сайта после вайбкодинга. Так вы получите конкретный сценарий для инструкции, а не расплывчатую просьбу «проверь качество».

Где хранить инструкцию и что в неё написать?

Создайте в проекте файл .claude/skills/site-preflight/SKILL.md. Если папок нет, добавьте их. Название site-preflight подскажет назначение скилла; сам файл храните рядом с проектом, чтобы при следующей правке проверять ту же версию инструкции. Руководство по Claude Code описывает скиллы и шаблоны CLAUDE.md как отдельные способы организации работы (GitHub, «Руководство по Claude Code на русском»).

В начале файла укажите имя site-preflight и описание: «Проверяет сайт перед публикацией, сообщает о сбоях и не меняет код без запроса». Дальше запишите действия обычным языком. Достаточно такого порядка:

  1. Прочитай инструкции проекта в CLAUDE.md, если файл есть. Выясни из проекта, как запустить сайт и доступные тесты.
  2. Запусти доступные проверки. Если команда не работает или её нет, сообщи об этом; не подменяй проверку предположением.
  3. Проверь путь посетителя: открой нужную страницу, найди основную кнопку, пройди форму или оформление заказа. Проверь узкий экран, если у тебя есть средство для просмотра страницы.
  4. Составь отчёт: что проверено, что не удалось проверить и как повторить каждую найденную ошибку. Укажи страницу, действие и наблюдаемый результат.
  5. Не публикуй сайт и не исправляй код без отдельного запроса.

Если Claude Code в вашей настройке не открывает страницу в браузере, так и запишите в отчёте: «Мобильный сценарий не проверен». Проверка кода не подтверждает, что палец попадёт по кнопке или что клавиатура телефона не закроет поле ввода. Такие пункты остаются для ручного прохода.

Общие правила проекта удобно держать в CLAUDE.md: как запускать сайт, какие команды уже приняты и какие файлы не менять. Сценарий проверки перед публикацией оставьте в скилле. Аналогом файла с общими инструкциями для ряда других инструментов служит AGENTS.md (журнал «Код», «Harness для ИИ-агента: что это и как собрать свой на Python»).

Как проверить, что скилл помогает, а не пишет общий отчёт?

После сохранения файла дайте Claude Code конкретную задачу: «Проверь сайт перед публикацией по скиллу site-preflight. Сначала проверь страницу с формой заявки. Код не меняй. В отчёте раздели выполненные проверки и пункты, для которых нужен мой ручной проход». Если инструмент не находит скилл, укажите путь к SKILL.md и попросите следовать инструкции из файла. Это позволит проверить сам текст инструкции до поиска причин в настройках инструмента.

Посмотрите на отчёт как владелец сайта. По каждой проблеме должно быть ясно, где она возникла и что нажать, чтобы её увидеть. Фраза «проверьте адаптивность» не помогает; запись «на узком экране кнопка заказа перекрывает поле телефона» даёт точку для исправления. Если скилл сообщает об успешной отправке формы, попросите показать, по какому признаку он сделал вывод: увидел сообщение на странице или лишь проверил код.

Для магазина добавьте отдельный сценарий цены. Сначала зафиксируйте, где покупатель видит цену товара, доставку и итог; затем попросите сравнить эти значения на соседних шагах. Подробный список мест для такой проверки есть в материале о расчёте цен в BYN после вайбкодинга с Claude Code. Если после правок менялись заголовки или ссылки страниц, отдельно пройдите проверку SEO сайта после правок; она не должна теряться среди замечаний о форме.

Какие ошибки мешают проверке перед публикацией?

  • Писать «проверь весь сайт» без маршрута посетителя. Исправление: назвать страницу, кнопку и ожидаемый результат.
  • Принимать просмотр кода за проверку страницы. Исправление: отдельно отметить, какие действия прошли в браузере, а какие остались для ручного теста.
  • Просить скилл сразу чинить найденное. Исправление: сначала получить отчёт; после правки повторить тот же сценарий и сравнить результат.
  • Передавать в задачу рабочие пароли или ключи. Исправление: использовать предусмотренный проектом способ доступа и не включать секреты в текст скилла или отчёта.
  • Публиковать сайт после отчёта без своего прохода. Исправление: открыть страницу на телефоне и самостоятельно отправить тестовую заявку или пройти тестовый заказ доступным способом.

Начните с одного маршрута, который приносит бизнесу заявки или заказы. Создайте файл .claude/skills/site-preflight/SKILL.md и запишите в нём первую проверку: страницу, основную кнопку и ожидаемый результат нажатия.