Установка Agent Skills

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

• Быстро установить Agent Skills одной командой (рекомендуется)
• Вручную скопировать навыки в локальный каталог Claude Code
• Включить навыки в claude.ai и настроить сетевые разрешения
• Устранять распространенные ошибки при установке

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

Вы хотите использовать Agent Skills, чтобы Claude помогал вам развертывать проекты и анализировать код, но не знаете, как установить его в Claude Code или claude.ai. Или вы попытались установить, но навыки не активируются, а при развертывании появляется ошибка "Network Egress Error".

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

• ✓ Первое использование Agent Skills
• ✓ Вы используете Claude Code (инструмент командной строки)
• ✓ Вы используете claude.ai (веб-версия Claude)
• ✓ Вам нужно, чтобы навыки имели доступ к сети (функция развертывания)

🎒 Подготовка перед началом

Перед началом убедитесь, что вы:

• [ ] Установили Node.js версии 20+
• [ ] Имеете активный аккаунт Claude Code или claude.ai

Совет

Если вы еще не знакомы с тем, что такое Agent Skills, рекомендуем сначала прочитать Введение в Agent Skills.

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

Установка Agent Skills возможна двумя способами:

1. Установка через npx (рекомендуется): установка в Claude Code одним кликом, автоматическое выполнение всех шагов
2. Ручная установка: копирование файлов в указанный каталог, подходит для claude.ai или если требуется пользовательское место установки

После установки навыки автоматически активируются в Claude — вам нужно только использовать ключевые слова (например, "Deploy my app"), и Claude автоматически вызовет соответствующий навык.

Способ 1: Быстрая установка через npx (рекомендуется)

Это самый простой способ установки, подходящий для пользователей Claude Code.

Шаг 1: Запуск команды установки

Выполните в терминале:

npx add-skill vercel-labs/agent-skills

Почемуadd-skill — это npm-пакет, который автоматически скачивает Agent Skills и устанавливает в правильный каталог.

Вы должны увидеть:

Skills successfully installed.

Шаг 2: Проверка установки

В Claude Code введите:

List available skills

Вы должны увидеть: Среди возвращенного Claude списка навыков должны присутствовать:

• react-best-practices
• web-design-guidelines
• vercel-deploy

Контрольная точка ✅: если вы видите эти 3 навыка, установка прошла успешно.

Способ 2: Ручная установка в Claude Code

Если вы не хотите использовать npx или хотите контролировать место установки, можно выполнить ручную установку.

Шаг 1: Клонирование или скачивание проекта

git clone https://github.com/vercel-labs/agent-skills.git
cd agent-skills

Почему При ручной установке сначала необходимо получить исходный код проекта.

Шаг 2: Копирование навыков в каталог Claude Code

cp -r skills/react-best-practices ~/.claude/skills/
cp -r skills/web-design-guidelines ~/.claude/skills/
cp -r skills/claude.ai/vercel-deploy-claimable ~/.claude/skills/vercel-deploy

Почему Навыки Claude Code хранятся в каталоге ~/.claude/skills/. После копирования Claude сможет распознать эти навыки.

Вы должны увидеть: После выполнения команд не должно быть вывода ошибок.

Контрольная точка ✅: Проверьте с помощью ls ~/.claude/skills/, вы должны увидеть 3 каталога навыков: react-best-practices, web-design-guidelines, vercel-deploy.

Шаг 3: Перезапуск Claude Code

Принудительно закройте Claude Code, затем откройте снова.

Почему Claude Code загружает список навыков только при запуске, для распознавания новых установленных навыков необходим перезапуск.

Способ 3: Использование навыков в claude.ai

Если вы используете claude.ai (веб-версия Claude), способ установки отличается.

Метод 3.1: Добавление в базу знаний проекта

Шаг 1: Выбор файлов навыков

Упакуйте все файлы из трех каталогов: skills/react-best-practices, skills/web-design-guidelines, skills/claude.ai/vercel-deploy-claimable.

Почему claude.ai требует добавить файлы навыков как "базу знаний" в проект.

Шаг 2: Загрузка в проект

В claude.ai:

1. Создайте новый или откройте существующий проект
2. Нажмите "Knowledge" → "Add Files"
3. Загрузите файлы навыков (или весь каталог)

Вы должны увидеть: В базе знаний отображается список файлов проекта.

Метод 3.2: Вставка содержимого SKILL.md

Если вы не хотите загружать весь каталог, можно напрямую скопировать содержимое SKILL.md.

Шаг 1: Копирование определения навыка

Откройте skills/react-best-practices/SKILL.md, скопируйте всё содержимое.

ПочемуSKILL.md содержит полное определение навыка, Claude поймет функциональность навыка на основе этого файла.

Шаг 2: Вставка в диалог

Вставьте содержимое SKILL.md в диалог claude.ai или добавьте в "Instructions" проекта.

Вы должны увидеть: Claude подтверждает получение определения навыка.

Настройка сетевых разрешений (важно)

Если вы используете навык vercel-deploy для развертывания проектов, нужно настроить сетевые разрешения.

Важно

Навык vercel-deploy требует доступа к домену *.vercel.com для загрузки развертывания. Пропуск этого шага приведет к сбою развертывания!

Шаг 1: Открытие настроек возможностей Claude

В браузере перейдите по адресу:

https://claude.ai/settings/capabilities

Почему Здесь управляется список доменов, к которым может обращаться Claude.

Шаг 2: Добавление домена Vercel

Нажмите "Add domain", введите:

*.vercel.com

Нажмите "Save" для сохранения.

Вы должны увидеть: В списке доменов появился *.vercel.com.

Контрольная точка ✅: домен добавлен, навыки теперь могут обращаться к сети.

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

Проблема 1: Навык не активируется

Симптом: вы вводите "Deploy my app", но Claude не знает, что делать.

Возможные причины:

• Claude Code не был перезапущен (при ручной установке)
• База знаний проекта claude.ai не загрузила навыки правильно

Решение:

• Claude Code: перезапустите приложение
• claude.ai: подтвердите, что файлы навыков загружены в Knowledge проекта

Проблема 2: Сбой развертывания (Network Egress Error)

Симптом:

Deployment failed due to network restrictions

Решение: Проверьте, добавлен ли *.vercel.com к сетевым разрешениям:

Посетите https://claude.ai/settings/capabilities
Проверьте, содержит ли *.vercel.com

Проблема 3: Не найден каталог ~/.claude/skills/

Симптом: при ручной установке появляется сообщение, что каталог не существует.

Решение:

mkdir -p ~/.claude/skills/

Проблема 4: Сбой установки через npx

Симптом:

npx: command not found

Решение:

# Подтвердите установку Node.js и npm
node -v
npm -v

# Если не установлены, установите LTS-версию с https://nodejs.org/

Итоги урока

В этом уроке мы рассмотрели три способа установки Agent Skills:

• Быстрая установка через npx: рекомендуется для Claude Code, выполняется одним кликом
• Ручная установка: копирование файлов в ~/.claude/skills/, подходит если нужно контролировать место установки
• Установка в claude.ai: загрузка файлов в базу знаний проекта или вставка SKILL.md

Если вы используете навык vercel-deploy, не забудьте добавить сетевые разрешения *.vercel.com на странице https://claude.ai/settings/capabilities.

После установки вы можете позволить Claude автоматически использовать эти навыки для анализа кода, проверки доступности и развертывания проектов.

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

В следующем уроке мы изучим Лучшие практики оптимизации производительности React/Next.js.

Вы узнаете:

• Как использовать 57 правил оптимизации производительности React
• Устранение каскадной загрузки, оптимизация размера пакета, уменьшение повторного рендеринга
• Позвольте AI автоматически анализировать код и давать предложения по исправлению

---

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

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

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

Функция	Путь к файлу	Строки
Метод установки через npx	README.md:83-86	83-86
Ручная установка в Claude Code	AGENTS.md:98-105	98-105
Метод установки в claude.ai	AGENTS.md:106-109	106-109
Настройка сетевых разрешений	skills/claude.ai/vercel-deploy-claimable/SKILL.md:104-112	104-112

Ключевые наборы навыков:

• react-best-practices: 57 правил оптимизации производительности React (фактическое количество файлов правил)
• web-design-guidelines: 100+ правил руководств по веб-дизайну
• vercel-deploy: развертывание в Vercel одним кликом (поддержка 40+ фреймворков)