Agent Skills — официальная коллекция навыков для AI-агентов от Vercel

Vercel Labs выпустили официальную коллекцию навыков для AI-агентов — agent-skills. Это 8 узкоспециализированных навыков, покрывающих типичные задачи веб-разработчика: от аудита производительности до мгновенного деплоя. 29 тысяч звёзд на GitHub и формат, совместимый со стандартом Agent Skills.

Каждый навык — это файл SKILL.md с инструкциями для агента плюс опциональные скрипты и референсы. Установка одной командой:

npx skills add vercel-labs/agent-skills

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

Обзор навыков

vercel-optimize

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

Когда использовать:

• Оптимизация развёрнутого Vercel-проекта
• Снижение затрат на функции и вычислительные ресурсы
• Расследование медленных или дорогих маршрутов
• Поиск проблем с кешированием, ISR, middleware, изображениями или минутами сборки

react-best-practices

Гайдлайн по производительности React и Next.js от инженерной команды Vercel. Содержит 40+ правил в 8 категориях, приоритизированных по влиянию на производительность.

Категории:

• Устранение waterfall-запросов (Critical)
• Оптимизация размера бандла (Critical)
• Серверная производительность (High)
• Клиентский data fetching (Medium-High)
• Оптимизация ре-рендеров (Medium)
• Производительность рендеринга (Medium)
• JavaScript микро-оптимизации (Low-Medium)

web-design-guidelines

Аудирует UI-код на соответствие 100+ правилам веб-интерфейсов. Покрывает доступность (aria-labels, семантический HTML, keyboard handlers), состояния фокуса, формы (autocomplete, валидация, обработка ошибок), анимации (prefers-reduced-motion), типографику (curly quotes, ellipsis, tabular-nums), изображения (размеры, lazy loading, alt text), производительность (виртуализация, layout thrashing, preconnect), навигацию и состояние (URL отражает состояние), тёмную тему, touch-взаимодействие и i18n (Intl.DateTimeFormat, Intl.NumberFormat).

writing-guidelines

Проверяет документацию и тексты на соответствие 80+ правилам из Vercel Writing Handbook. Покрывает планирование (content plan, content type, user-shaped titles), голос и тон (активный залог, прямое обращение, запрещённые слова вроде easy/simple/quick), структуру заголовков (sentence case), код (языковые теги, TypeScript first, лимиты 80 колонок / 25 строк), типографику (curly quotes, неразрывные пробелы, запрет em dash для пунктуации), AI-workflow (accountability, enterprise models, plan first, disclose AI use).

react-native-guidelines

16 правил для React Native и Expo, оптимизированных для AI-агентов. Категории: производительность (FlashList, мемоизация), лейаут (flex, safe areas, keyboard handling), анимация (Reanimated, gesture handling), изображения (expo-image, кеширование, lazy loading), управление состоянием (Zustand, React Compiler), архитектура (монорепо, импорты), платформенные паттерны (iOS/Android).

react-view-transitions

Реализация плавных анимаций через React View Transition API. Покрывает компонент <ViewTransition>, addTransitionType, shared-element transitions (морфинг из списка в детали), directional animations (forward/back), интеграцию с Next.js App Router через проп transitionTypes на next/link, готовые CSS-рецепты (fade, slide, scale, flip) и accessibility (prefers-reduced-motion).

composition-patterns

Паттерны композиции React, которые масштабируются. Помогает избежать proliferation булевых пропсов через compound components, lifting state и внутреннюю композицию. Для рефакторинга компонентов с множеством флагов и построения переиспользуемых библиотек.

vercel-deploy-claimable

Мгновенный деплой на Vercel из любого AI-чата. Автоопределение 40+ фреймворков из package.json. Возвращает preview URL и claim URL (для переноса ownership на свой аккаунт). Исключает node_modules и .git из загрузки. Работает со статическим HTML.

Для кого

Коллекция ориентирована на веб-разработчиков, использующих AI-агентов в повседневной работе. Особенно полезна тем, кто работает в экосистеме Vercel — React, Next.js, деплой на платформе. Навыки покрывают полный цикл: от написания кода (react-best-practices, composition-patterns) до ревью (web-design-guidelines, writing-guidelines), оптимизации (vercel-optimize) и деплоя (vercel-deploy-claimable).

Отдельно стоит отметить react-view-transitions — реализация View Transition API в React пока редкость, и готовая инструкция для агента здесь особенно ценна.

Структура навыка

Каждый навык состоит из:

• SKILL.md — инструкции для агента
• scripts/ — вспомогательные скрипты (опционально)
• references/ — справочная документация (опционально)

Формат совместим со стандартом agentskills.io, что означает поддержку Claude Code, OpenCode, Cursor и других AI-инструментов, реализующих этот стандарт.

Итог

8 навыков, 250+ правил, мгновенный деплой — Vercel Labs упаковали свою инженерную экспертизу в формат, понятный AI-агентам. Если вы пишете на React, деплоите на Vercel или просто хотите, чтобы ваш агент следовал продакшен-стандартам — это must-have коллекция.