Vercel Agent Skills

Коллекция скиллов для AI-агентов программирования. Скиллы — это упакованные инструкции и скрипты, расширяющие возможности агентов.

Доступные скиллы

vercel-optimize

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

Используйте для: оптимизации задеплоенного Vercel-проекта, снижения затрат или использования функций, анализа медленных или дорогостоящих маршрутов, выявления проблем с кэшированием, ISR, middleware, изображениями или build-минутами, формирования ранжированного отчёта по затратам и производительности.

react-best-practices

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

Используйте для: написания новых компонентов React или страниц Next.js, реализации загрузки данных, ревью кода на предмет проблем производительности, оптимизации размера бандла или времени загрузки.

Категории: устранение водопадов (критично), оптимизация размера бандла (критично), серверная производительность (высокий), клиентская загрузка данных (средне-высокий), оптимизация ре-рендеров (средний), производительность рендеринга (средний), микрооптимизации JavaScript (низко-средний).

web-design-guidelines

Проверка UI-кода на соответствие лучшим практикам веб-интерфейсов. Аудит по 100+ правилам в области доступности, производительности и UX.

Используйте для: ревью UI, проверки доступности, аудита дизайна, ревью UX, проверки сайта на соответствие лучшим практикам.

Категории: доступность (aria-labels, семантический HTML, обработчики клавиатуры), состояния фокуса, формы (autocomplete, валидация, обработка ошибок), анимация (prefers-reduced-motion), типографика, изображения (размеры, lazy loading, alt), производительность, навигация и состояние (URL отражает состояние), тёмная тема, касания и взаимодействия, локали и i18n.

writing-guidelines

Проверка документации и текстов на соответствие руководству по стилю Vercel. Аудит по 80+ правилам для голоса, структуры, типов контента, примеров кода, типографики и AI-рабочего процесса.

Используйте для: ревью документации, проверки стиля написания, аудита прозы, ревью голоса и тона.

react-native-guidelines

Лучшие практики React Native, оптимизированные для AI-агентов. Содержит 16 правил в 7 разделах по производительности, архитектуре и платформенным паттернам.

Используйте для: разработки React Native или Expo приложений, оптимизации мобильной производительности, реализации анимаций или жестов, работы с нативными модулями или платформенными API.

Категории: производительность (критично) — FlashList, мемоизация, тяжёлые вычисления; разметка (высокий) — flex-паттерны, безопасные зоны, обработка клавиатуры; анимации (высокий) — Reanimated, обработка жестов; изображения (средний) — expo-image, кэширование, lazy loading; управление состоянием (средний) — паттерны Zustand, React Compiler; архитектура (средний) — структура монорепо, импорты; платформа (средний) — специфика iOS/Android.

react-view-transitions

Реализация плавных нативных анимаций с помощью View Transition API React. Охватывает компонент <ViewTransition>, addTransitionType, типы переходов и интеграцию с Next.js, включая проп transitionTypes у next/link.

Используйте для: добавления переходов между страницами или маршрутами, анимации появления/исчезновения компонентов, создания shared element transitions (морфинг список→деталь), направленной навигации вперёд/назад, View Transitions в Next.js App Router, анимации переупорядочивания списков.

composition-patterns

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

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

vercel-deploy-claimable

Мгновенный деплой приложений и сайтов на Vercel. Разработан для использования с claude.ai и Claude Desktop. Деплои «claimable» — пользователи могут перенести владение на свой Vercel-аккаунт.

Используйте для: «задеплой моё приложение», «выложи в продакшн», «запусти и дай ссылку».

Как работает: упаковывает проект в tarball, определяет фреймворк (Next.js, Vite, Astro и другие — 40+ фреймворков), загружает в сервис деплоя, возвращает preview URL и claim URL.

Установка

npx skills add vercel-labs/agent-skills

Использование

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