Skills в Claude Code: создаём повторяемую проверку фронтенд-компонента

Сохраните проверку формы в SKILL.md, чтобы Claude Code каждый раз сверял одинаковые критерии. В упражнении навык найдёт несвязанный label и неправильный тип кнопки, а затем проверит исправную форму без выдуманных замечаний.

Определите, что должна повторять инструкция

Skills — инструкции, которые Claude Code загружает для определённой задачи. В русской части текста будем называть такую инструкцию навыком, а имена файлов и поля конфигурации оставим как в документации.

Для упражнения нужны установленный Claude Code, рабочая сессия и редактор файлов. Достаточно базового HTML: назначения формы, поля и кнопки. Установку здесь не повторяем; она описана в официальном руководстве. Формулировки разовых запросов можно освежить в статье о промптах для фронтендеров.

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

У нашей проверки четыре критерия. У каждого элемента label атрибут for должен указывать на существующий id поля. Поле почты получает подходящий type. Кнопка отправки имеет явный type="submit". Наконец, отчёт отделяет видимые в коде факты от поведения, которое требует запуска браузера.

Это учебная проверка формы. Полный аудит доступности включает больше требований: фокус, сообщения об ошибках, навигацию и работу со вспомогательными технологиями.

Разместите навык внутри проекта

Создайте папку form-skill-demo. Внутри подготовьте структуру:

form-skill-demo/
  subscribe.html
  feedback.html
  .claude/
    skills/
      check-demo-form/
        SKILL.md

По документации Claude Code, проектные навыки лежат в .claude/skills/<имя>/SKILL.md. Они относятся к репозиторию. Личные навыки из ~/.claude/skills/ доступны в ваших других проектах на этой машине. Для упражнения подходит проектное расположение: процедуру можно просмотреть рядом с формами.

Имена лучше выбирать по действию и предмету проверки. check-demo-form сразу сообщает, что инструкция делает с учебной формой. Короткое имя review может пересечься с существующей командой или навыком. Перед новым именем проверьте меню доступных команд.

В SKILL.md сохраните:

---
name: check-demo-form
description: Проверяет учебную HTML-форму по четырём фиксированным критериям.
argument-hint: "[путь к HTML-файлу]"
disable-model-invocation: true
---

Проверьте файл $ARGUMENTS. Если путь не указан,
попросите указать один HTML-файл и остановитесь.

Работайте только с выбранным файлом. Не меняйте файлы,
не запускайте команды и не подключайте внешние сервисы.

Проверки:
1. Каждый label[for] связан с существующим id поля.
2. Поле электронной почты имеет type="email".
3. Основная кнопка отправки явно имеет type="submit".
4. Каждое замечание подтверждается цитатой из файла.

Для каждого замечания укажите путь, строку, фрагмент,
нарушенный критерий и минимальную рекомендацию.

В конце отдельно перечислите:
- что установлено чтением кода;
- что требует проверки в браузере.

Если нарушения не найдены, так и напишите.
Не придумывайте замечания ради заполнения отчёта.
Не заявляйте, что браузерная проверка выполнена.

Здесь YAML между разделителями --- описывает навык, а Markdown после них содержит процедуру. Имя команды задано полем name. $ARGUMENTS заменяется текстом, который вы передадите после команды: в нашем случае путём к HTML-файлу.

Поле disable-model-invocation: true оставляет запуск за вами. Так легче повторять опыт: инструкция применяется, когда вы её вызвали. Это поведение и подстановка аргументов описаны в справочнике skills.

Дайте навыку форму с двумя дефектами

В subscribe.html сохраните цельный учебный пример:

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Учебная подписка</title>
  </head>
  <body>
    <main>
      <h1>Подписка на учебные новости</h1>
      <form action="#" method="get">
        <label for="email">Электронная почта</label>
        <input id="contact" name="email" type="email" required>
        <button type="button">Подписаться</button>
      </form>
    </main>
  </body>
</html>

Дефекты заложены намеренно. Метка ссылается на email, а поле называется contact. Тип button означает обычную кнопку, которая сама форму не отправляет. В этом примере других обработчиков нет.

Связь метки и поля описана в документации элемента label. При совпадении for и id щелчок по метке передаёт фокус связанному полю. Типы кнопок и их действие разобраны в справочнике button.

Для сравнения сохраните в feedback.html второй файл:

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Учебная обратная связь</title>
  </head>
  <body>
    <main>
      <h1>Написать учебное сообщение</h1>
      <form action="#" method="get">
        <label for="reply">Электронная почта</label>
        <input id="reply" name="email" type="email" required>
        <button type="submit">Отправить</button>
      </form>
    </main>
  </body>
</html>

Формы используют вымышленные данные и не отправляют сообщение реальному сервису. Атрибут action="#" нужен только для учебного поведения на текущей странице. Не вводите личную почту; для ручной проверки используйте адрес вроде student@example.com.

Вызовите процедуру по имени

Запустите claude из папки form-skill-demo. Откройте меню команд и найдите check-demo-form. Если верхняя папка .claude/skills создана после запуска сессии, выполните /reload-skills или начните новую сессию, затем проверьте меню снова.

Отправьте команду в начале сообщения:

/check-demo-form subscribe.html

Вызов в начале сообщения прямо запускает навык. Путь после имени попадает в $ARGUMENTS. Запрос вида «обсудим check-demo-form» полезен для разговора об инструкции, но не служит такой же проверкой прямого вызова.

Посмотрите на журнал чтения. Агент должен прочитать subscribe.html. Затем сверяйте отчёт с исходным кодом:

Точные номера строк сверяйте в редакторе. После вставки или форматирования файла они могут отличаться от чужого примера.

Если агент сразу исправил код, процедура нарушена. Верните его к задаче чтения и уточните инструкцию. Для контроля используйте Git или сравните файлы с сохранённой копией до вызова.

Повторите вызов на исправной форме

Теперь выполните:

/check-demo-form feedback.html

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

Сравните отчёты. Навык должен каждый раз проверять те же критерии и подтверждать замечания кодом. Формулировки отчёта могут меняться: важнее, чтобы агент не пропускал дефект и не находил его в исправном файле.

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

В этом материале вызовы Claude Code не выполнялись. Ожидаемые замечания получены из показанной разметки; фактические отчёты агент сформирует при прохождении упражнения.

Разберите спорное замечание

Допустим, в отчёте появилась рекомендация «добавить JavaScript для отправки». Сначала найдите критерий, которому она соответствует. В нашем списке такого требования нет: обычная HTML-форма умеет отправляться и без JavaScript. Попросите агента убрать это замечание из результатов проверки или отдельно объяснить, какую задачу решает предложенный код.

Другая ситуация: агент пишет, что у поля нет метки, хотя label присутствует. Проверьте связь for с id: одного наличия label недостаточно. В сломанном примере метка есть, связь ошибочна. Точный отчёт покажет обе строки и назовёт конкретное несоответствие.

Сохраните такой контрпример рядом с навыком. Он пригодится после изменения инструкции: повторите вызов и проверьте, что спорное замечание больше не возникает. Так процедура улучшается на понятной ошибке, а не на просьбе «проверять внимательнее».

Разведите навык, знания проекта и инструменты

У навыка в нашем примере нет собственной программы проверки HTML. Его текст направляет работу модели с доступными инструментами. Поэтому замечания нужно читать и сверять с файлом. Для строгого машинного правила можно позднее добавить проверочный скрипт, но это отдельное изменение процедуры.

Текст «не меняйте файлы» также не создаёт изоляцию процесса. Если нужны технические запреты, настройте разрешения инструментов по официальному справочнику permissions. Поле allowed-tools в навыке предварительно разрешает перечисленные инструменты; оно не превращает список в общий запрет всех остальных. В учебном навыке это поле намеренно отсутствует.

Добавьте критерий с понятным доказательством

Самостоятельно расширьте навык проверкой уникальности id в выбранном файле. Создайте копию формы с двумя одинаковыми идентификаторами и убедитесь, что отчёт цитирует оба элемента. После исправления повторите вызов: прежнее замечание должно исчезнуть.

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

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.