Vercel выпустила Agent Skills — набор навыков, который превращает лучшие практики в многократно используемые навыки для агентов по написанию кода с использованием ИИ. Проект соответствует спецификации Agent Skills и в первую очередь ориентирован на оптимизацию производительности React и Next.js, проверку веб-дизайна и развёртывание на Vercel.
Агентские навыки: формат
Agent Skills — это открытый формат для упаковки возможностей для агентов с ИИ. Навык — это папка, содержащая инструкции и дополнительные скрипты. Формат разработан так, чтобы разные инструменты могли понимать одну и ту же структуру.
Типичный навык в vercel-labs/agent-skills имеет три основных компонента:
* SKILL.md — инструкции на естественном языке, описывающие, что делает навык и как он должен себя вести;
* каталог scripts — вспомогательные команды, которые агент может вызывать для проверки или изменения проекта;
* каталог references (необязательно) — дополнительная документация или примеры.
Основные навыки в vercel-labs/agent-skills
В настоящее время в репозитории представлены три основных навыка, нацеленных на общие рабочие процессы:
1. react-best-practices — этот навык кодирует рекомендации по производительности React и Next.js в виде структурированной библиотеки правил. Он содержит более 40 правил, сгруппированных в 8 категорий. Эти категории охватывают такие области, как устранение сетевых водопадов, уменьшение размера пакета, производительность на стороне сервера, получение данных на стороне клиента, поведение при повторном рендеринге, производительность рендеринга и микрооптимизация JavaScript.
Каждое правило включает оценку воздействия. Критические проблемы перечислены первыми, затем следуют менее значимые изменения. Правила выражены с помощью конкретных примеров кода, которые показывают антипаттерн и исправленный вариант. Когда совместимый агент проверяет компонент React, он может сопоставить результаты с этими правилами.
2. web-design-guidelines — этот навык ориентирован на качество пользовательского интерфейса и взаимодействия с пользователем. Он включает более 100 правил, охватывающих доступность, обработку фокуса, поведение форм, анимацию, типографику, изображения, производительность, навигацию, тёмный режим, сенсорное взаимодействие и интернационализацию.
Во время проверки агент может использовать эти правила для обнаружения пропущенных атрибутов ARIA, неправильных ассоциаций меток для элементов управления формой, неправильного использования анимации, когда пользователь запрашивает уменьшенное движение, отсутствия альтернативного текста или ленивой загрузки изображений и других проблем, которые легко упустить при ручной проверке.
3. vercel-deploy-claimable — этот навык соединяет цикл проверки агентом с развёртыванием. Он может упаковать текущий проект в архив, автоматически определить фреймворк на основе package.json и создать развёртывание на Vercel. Скрипт может распознавать более 40 фреймворков, а также поддерживает статические HTML-сайты.
Установка и интеграция
Навыки можно установить из командной строки. Просто выполните следующую команду:
«`
npx skills i vercel-labs/agent-skills
«`
Эта команда загружает репозиторий agent-skills и подготавливает его как пакет навыков.
Vercel и окружающая его экосистема также предоставляют интерфейс командной строки add-skill, который предназначен для подключения навыков к конкретным агентам.
Ключевые выводы
* vercel-labs/agent-skills реализует спецификацию Agent Skills, упаковывая каждую возможность в виде папки с SKILL.md, дополнительными скриптами и ссылками, чтобы разные агенты по написанию кода с ИИ могли использовать один и тот же макет навыка.
* В настоящее время репозиторий содержит три навыка: react-best-practices для оптимизации производительности React и Next.js, web-design-guidelines для проверки пользовательского интерфейса и взаимодействия с пользователем и vercel-deploy-claimable для создания развёртываний на Vercel.
* react-best-practices кодирует более 40 правил в 8 категориях, упорядоченных по степени воздействия, и предоставляет конкретные примеры кода, что позволяет агентам проводить структурированные проверки производительности вместо специальных проверок на основе подсказок.
* web-design-guidelines содержит более 100 правил, охватывающих доступность, обработку фокуса, формы, анимацию, типографику, изображения, производительность, навигацию, тёмный режим, сенсорное взаимодействие и интернационализацию, что позволяет агентам проводить систематические проверки качества пользовательского интерфейса.
Навыки устанавливаются с помощью таких команд, как `npx skills i vercel-labs/agent-skills` и `npx add-skill vercel-labs/agent-skills`, а затем обнаруживаются в каталогах навыков, специфичных для агентов, что превращает библиотеки лучших практик в многократно используемые, управляемые версиями строительные блоки для рабочих процессов написания кода с использованием ИИ.
1. Какие основные навыки представлены в репозитории vercel-labs/agent-skills и для каких целей они предназначены?
В репозитории представлены три основных навыка:
* react-best-practices — для оптимизации производительности React и Next.js;
* web-design-guidelines — для проверки пользовательского интерфейса и взаимодействия с пользователем;
* vercel-deploy-claimable — для создания развёртываний на Vercel.
2. Какие компоненты включает в себя типичный навык в формате Agent Skills?
Типичный навык в формате Agent Skills включает в себя:
* SKILL.md — инструкции на естественном языке, описывающие, что делает навык и как он должен себя вести;
* каталог scripts — вспомогательные команды, которые агент может вызывать для проверки или изменения проекта;
* каталог references (необязательно) — дополнительная документация или примеры.
3. Как можно установить навыки из командной строки?
Навыки можно установить из командной строки с помощью команды:
«`
npx skills i vercel-labs/agent-skills
«`
Эта команда загружает репозиторий agent-skills и подготавливает его как пакет навыков.
4. Какие правила включает в себя навык react-best-practices и для чего они предназначены?
Навык react-best-practices включает более 40 правил, сгруппированных в 8 категорий. Эти правила предназначены для оптимизации производительности React и Next.js. Они охватывают такие области, как устранение сетевых водопадов, уменьшение размера пакета, производительность на стороне сервера, получение данных на стороне клиента, поведение при повторном рендеринге, производительность рендеринга и микрооптимизация JavaScript.
5. Какие проблемы позволяет выявить навык web-design-guidelines при проверке пользовательского интерфейса?
Навык web-design-guidelines позволяет выявить такие проблемы, как:
* пропущенные атрибуты ARIA;
* неправильные ассоциации меток для элементов управления формой;
* неправильное использование анимации;
* отсутствие альтернативного текста или ленивой загрузки изображений;
* другие проблемы, которые легко упустить при ручной проверке.