Введение в Agent Skills

Чему вы научитесь

• Понять, что такое Agent Skills и как он расширяет возможности AI-агентов для кодирования
• Узнать о функциях и сценариях использования трех основных наборов навыков
• Понять, когда следует использовать Agent Skills для повышения эффективности разработки

Текущие проблемы

При повседневном использовании Claude, Cursor или других AI-агентов для кодирования вы можете столкнуться со следующими проблемами:

• Хотите следовать лучшим практикам, но не знаете, какие правила нужно запомнить
• Часто повторяете похожие операции развертывания и хотите их автоматизировать
• Качество кода, генерируемого AI, неоднородно, отсутствуют единые стандарты

Основная идея

Agent Skills — это система наборов навыков — предоставляет расширяемые «плагины» для AI-агентов для кодирования. Каждый навык включает:

• SKILL.md: файл определения навыка, сообщает AI-агенту, когда активировать этот навык
• scripts/: вспомогательные скрипты (например, скрипты развертывания), выполняющие конкретные задачи
• references/: вспомогательная документация (необязательно), предоставляющая подробные справочные материалы

Философия дизайна

Навыки используют механизм lazy loading: при запуске загружаются только название и описание навыка, полное содержимое считывается только когда AI определяет необходимость. Это снижает использование контекста и повышает эффективность.

Доступные наборы навыков

Проект предоставляет три основных набора навыков, каждый из которых предназначен для конкретных сценариев:

react-best-practices

Руководство по оптимизации производительности React и Next.js, основанное на стандартах Vercel Engineering. Содержит 50+ правил, отсортированных по уровню влияния.

Сценарии использования:

• Написание новых компонентов React или страниц Next.js
• Анализ проблем производительности кода
• Оптимизация размера пакета или времени загрузки

Охватываемые категории:

• Устранение каскадной загрузки (Critical)
• Оптимизация размера пакета (Critical)
• Производительность на сервере (High)
• Получение данных на клиенте (Medium-High)
• Оптимизация повторного рендеринга (Medium)
• Производительность рендеринга (Medium)
• Микрооптимизация JavaScript (Low-Medium)
• Расширенные шаблоны (Low)

web-design-guidelines

Аудит руководств по веб-дизайну интерфейсов, проверяет соответствие кода почти сотне лучших практик.

Сценарии использования:

• Промпт: "Review my UI"
• Проверка доступности (Accessibility)
• Аудит согласованности дизайна
• Проверка производительности и UX

Охватываемые категории:

• Доступность (aria-labels, семантический HTML, обработка клавиатуры)
• Состояния фокуса (видимый фокус, режим focus-visible)
• Формы (автозаполнение, валидация, обработка ошибок)
• Анимации (prefers-reduced-motion, дружественные к композиции преобразования)
• Изображения (размеры, ленивая загрузка, alt-текст)
• Типографика, производительность, навигация и другие

vercel-deploy-claimable

Развертывание приложений и веб-сайтов в Vercel одним кликом, возвращает ссылки на предварительный просмотр и передачу прав.

Сценарии использования:

• Промпт: "Deploy my app"
• Быстрое предоставление превью проекта
• Развертывание без конфигурации, без аутентификации

Основные возможности:

• Автоматическое определение 40+ фреймворков (Next.js, Vite, Astro и другие)
• Возврат URL превью (живой сайт) и URL claim (передача прав)
• Автоматическая обработка статических HTML-проектов
• Исключение node_modules и .git при загрузке

Как работают навыки

Когда вы используете Claude или другие AI-агенты, процесс активации навыков выглядит следующим образом:

Пример процесса:

1. Ввод пользователя: "Deploy my app"
2. Обнаружение AI: распознает ключевое слово "Deploy", соответствует навыку vercel-deploy
3. Загрузка навыка: считывает полное содержимое SKILL.md
4. Выполнение развертывания:
   • Запускает скрипт deploy.sh
   • Определяет фреймворк (читает package.json)
   • Упаковывает проект в tarball
   • Загружает в Vercel API
5. Возврат результатов:

   {
     "previewUrl": "https://skill-deploy-abc123.vercel.app",
     "claimUrl": "https://vercel.com/claim-deployment?code=..."
   }

Когда использовать этот метод

Лучшие моменты для использования Agent Skills:

Сценарий	Используемый навык	Пример промпта
Написание React-компонентов	react-best-practices	"Review this React component for performance issues"
Оптимизация страниц Next.js	react-best-practices	"Help me optimize this Next.js page"
Проверка качества UI	web-design-guidelines	"Check accessibility of my site"
Развертывание проекта	vercel-deploy-claimable	"Deploy my app to production"

Модель безопасности

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

• Локальное выполнение: все навыки выполняются локально, нет загрузки данных в сторонние службы (кроме Vercel API развертывания)
• Активация по запросу: навыки загружают подробный контент только когда AI считает это релевантным, снижая риск утечки приватности
• Открытый исходный код: все навыки и скрипты открыты и могут быть проверены

На что обратить внимание

Навык не активируется

Если навык не активируется, проверьте:

• Содержит ли промпт достаточно ключевых слов (например, "Deploy", "Review")
• Правильно ли установлен навык в каталог ~/.claude/skills/
• При использовании claude.ai подтвердите, что навык добавлен в базу знаний проекта

Сетевые разрешения

Некоторые навыки требуют сетевого доступа:

• vercel-deploy-claimable требует доступа к Vercel API развертывания
• web-design-guidelines требует получения последних правил с GitHub

Решение: добавьте необходимые домены в claude.ai/settings/capabilities.

Итоги урока

Agent Skills — это система наборов навыков, разработанная для AI-агентов для кодирования, предоставляющая:

• react-best-practices: 50+ правил оптимизации производительности React/Next.js
• web-design-guidelines: почти сотня лучших практик веб-дизайна
• vercel-deploy-claimable: развертывание в Vercel одним кликом

Навыки используют механизм lazy loading для снижения использования контекста. После установки AI-агенты автоматически активируют соответствующие навыки при выполнении соответствующих задач.

Следующий урок

В следующем уроке мы изучим Установку Agent Skills.

Вы узнаете:

• Два метода установки: Claude Code и claude.ai
• Настройку сетевых разрешений
• Проверку правильности установки навыков

---

Приложение: Справочник по исходному коду

Нажмите, чтобы раскрыть расположение исходного кода

Обновлено: 2026-01-25

Функция	Путь к файлу	Строки
Список наборов навыков	README.md	7-80
Описание структуры навыков	README.md	103-110
Спецификация AGENTS.md	AGENTS.md	Весь текст
Структура каталога навыков	AGENTS.md	11-20
Формат SKILL.md	AGENTS.md	29-68
Команда упаковки навыка	AGENTS.md	93-96
Метод установки пользователя	AGENTS.md	98-110
Механизм lazy loading	AGENTS.md	72-78
Скрипты сборки	packages/react-best-practices-build/package.json	Весь файл

Ключевые константы:

• Нет жестко заданных констант

Ключевые функции:

• build.ts: сборка AGENTS.md и тестовых случаев
• validate.ts: проверка целостности файлов правил
• extract-tests.ts: извлечение тестовых случаев из правил