---
title: "Vercel Agent Skills: правила React, Next.js и веб-интерфейсов"
description: Официальная коллекция Vercel для ревью UI, доступности, React/Next.js, производительности, анимации, документации, оптимизации и развёртывания.
---

[Vercel Agent Skills](https://github.com/vercel-labs/agent-skills) — официальная MIT-коллекция Vercel в формате Agent Skills. Она соединяет правила интерфейсного кода, производительности React и Next.js, мобильной разработки, анимации, документации и эксплуатации на Vercel.

В отличие от генераторов визуального направления, эта коллекция прежде всего отвечает на вопрос: **соответствует ли реализация инженерным и UX-правилам**. Она не выбирает фирменный стиль и не заменяет дизайн-систему.

## Состав коллекции

### web-design-guidelines

Проверяет UI-код по более чем 100 правилам доступности, производительности и UX. В область ревью входят:

- семантический HTML, `aria-label`, клавиатура и видимый фокус;
- формы, autocomplete, валидация и сообщения об ошибках;
- `prefers-reduced-motion` и compositor-friendly transforms;
- типографика, изображения, размеры, lazy loading и alt-тексты;
- URL как отражение состояния, deep links и навигация;
- dark mode, touch interaction, локали и `Intl`.

Это наиболее универсальная часть коллекции: она полезна и вне Vercel, потому что проверяет веб-поведение, а не только инфраструктуру платформы.

### react-best-practices

Содержит более 40 правил Vercel Engineering в восьми категориях с приоритетом по влиянию. Сначала рассматриваются waterfalls и размер bundle, затем серверная производительность, получение данных на клиенте, rerenders, rendering и микрооптимизации.

Приоритет важен: не стоит начинать с микрооптимизации отдельной функции, если страница последовательно ждёт несколько запросов или отправляет в браузер лишний JavaScript.

### Остальные навыки

- `react-view-transitions` — View Transition API, типы переходов, shared elements, Next.js App Router и reduced motion.
- `composition-patterns` — compound components, lifting state и композиция вместо разрастания boolean props.
- `react-native-guidelines` — производительность, layout, safe areas, клавиатура, Reanimated, изображения, состояние и платформенные API.
- `writing-guidelines` — более 80 правил документации и прозы по руководству Vercel: голос, структура, примеры кода, типографика и AI workflow.
- `vercel-optimize` — сначала собирает метрики развёрнутого проекта, затем исследует только маршруты и файлы, на которые указывают данные о стоимости, задержках, кэшировании и функциях.
- `deploy-to-vercel` — развёртывание через связанный Git-проект или Vercel CLI, включая temporary deployment с claim URL.

## Как применять в дизайн-процессе

Правила лучше подключать после того, как задана визуальная система и есть работающий код. `web-design-guidelines` выступает слоем приёмки, а `react-best-practices` — слоем оптимизации реализации.

Например, при ревью формы нужно проверить не только отступы и цвет, но и label, автозаполнение, ошибки, фокус, клавиатуру, отправку и состояние загрузки. При переходе между страницами сначала определяют, зачем нужна анимация, затем выбирают View Transition и обязательно предусматривают reduced motion.

Для проектов не на React часть правил переносится только на уровне принципов. Нельзя механически применять рекомендации Next.js к WordPress или Laravel; общие веб-правила при этом сохраняют силу.

## Установка

```bash
npx skills add vercel-labs/agent-skills
```

После установки агент должен активировать навыки по релевантности задачи. Можно явно попросить: «Проверь этот React-компонент по react-best-practices» или «Проведи ревью UI по web-design-guidelines».

Каждый навык содержит `SKILL.md`, а также необязательные `scripts/` и `references/`. Изменения в `main` публикуются с immutable release и discovery index, что помогает закреплять конкретную версию при командном использовании.

## Ограничения и безопасность

Количество правил не равно качеству ревью. Агент должен приводить конкретное место в коде, объяснять влияние и проверять исправление. Не все рекомендации одинаково важны для каждого проекта.

`vercel-optimize` и `deploy-to-vercel` уже относятся к эксплуатации, а не только к дизайну. Доступ к метрикам, Git, deployment и production следует выдавать по необходимости; команды публикации требуют отдельного подтверждения владельца.

## Чем отличается от визуальных навыков

[Impeccable](https://wpcraft.ru/kb/design/ai/skills/impeccable.md), [Taste Skill](https://wpcraft.ru/kb/design/ai/skills/taste-skill.md) и [Hallmark](https://wpcraft.ru/kb/design/ai/skills/hallmark.md) помогают принимать визуальные решения. Vercel Agent Skills сильнее в проверке их воплощения в веб-коде. Для анимации и мобильных жестов его можно дополнить специализированными [Emil Kowalski Skills](https://wpcraft.ru/kb/design/ai/skills/emil-kowalski-skills.md).

## Материалы и источники

- [Vercel Agent Skills на GitHub](https://github.com/vercel-labs/agent-skills)
- [Каталог коллекции на skills.sh](https://skills.sh/vercel-labs/agent-skills)
- [Agent Skills: спецификация](https://agentskills.io/)