Главная · Скиллы · vercel-react-view-transitions

vercel-react-view-transitionsView Transitions API для React

vercel-labs/agent-skills

Полное руководство по нативному View Transition API React: анимация роутов, реализация и деплой. От аудита до готового решения.

Установка

npx -y skills add vercel-labs/agent-skills --skill vercel-react-view-transitions --agent claude-code

Vercel Agent Skills

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

Установка

npx skills add vercel-labs/agent-skills

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

vercel-optimize

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

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

react-best-practices

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

Категории: устранение waterfalls (критично), оптимизация размера бандла (критично), server-side производительность (высокая), client-side data fetching (средне-высокая), оптимизация ре-рендеров, рендеринг, JS-микрооптимизации.

web-design-guidelines

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

Категории: accessibility, focus states, формы, анимация, типографика, изображения, производительность, навигация и состояние, dark mode, touch и взаимодействие, locale и i18n.

writing-guidelines

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

react-native-guidelines

16 правил React Native в 7 разделах: производительность (FlashList, мемоизация), layout (flex, safe areas, клавиатура), анимация (Reanimated, gestures), изображения (expo-image), управление состоянием (Zustand), архитектура, платформо-специфичные паттерны.

react-view-transitions

Плавные нативные анимации через React View Transition API: компонент <ViewTransition>, addTransitionType, типы переходов, интеграция с Next.js.

Когда использовать: переходы между страницами, анимации входа/выхода компонентов, shared element transitions, направленная навигация вперёд/назад.

Темы: CSS псевдоэлементы View Transition, shared element transitions с пропом name, Web Animations API, пропа transitionTypes на next/link, готовые CSS-анимации (fade, slide, scale, flip), prefers-reduced-motion.

composition-patterns

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

vercel-deploy-claimable

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

Возможности: авто-определение 40+ фреймворков из package.json, возврат preview URL и claim URL, поддержка статических HTML-проектов, исключение node_modules и .git.

Из того же репозитория

vercel-react-best-practicesвнутренний плейбук Vercel по React
vercel-labs/agent-skills
69 проверок кода React и Next.js: barrel import, async waterfall, лишние ре-рендеры. Расставлены по приоритету влияния на производительность, каждое правило с примерами до/после.
27.5k445.9k установок
web-design-guidelinesаудит UI по гайдлайнам Vercel
vercel-labs/agent-skills
Загружает актуальные Web Interface Guidelines из GitHub Vercel и проверяет код на доступность, дизайн-несоответствия и UX-проблемы. Результат в формате файл:строка.
27.8k361.1k установок
vercel-composition-patternsпаттерны композиции React-компонентов
vercel-labs/agent-skills
Решает проблему boolean-props: compound components, context providers, render props, React 19 use() вместо forwardRef. Правила и примеры рефакторинга запутанных API компонентов.
27.5k197.1k установок
vercel-react-native-skillsReact Native от Vercel
vercel-labs/agent-skills
Лучшие практики React Native от Vercel по 8 категориям: производительность, мобильные паттерны, критические оптимизации. Приоритизировано по реальному влиянию.
27.5k132.5k установок
deploy-to-vercelдеплой приложений на Vercel
vercel-labs/agent-skills
Деплой приложений на Vercel: определяет состояние проекта, выбирает метод деплоя (CLI/API), конфигурирует переменные окружения и домены автоматически.
27.8k63.3k установок
vercel-cli-with-tokensVercel деплой через токены
vercel-labs/agent-skills
Деплой на Vercel с токен-аутентификацией без интерактивного логина: проверка токенов в env, CI/CD паттерны и автоматизация.
27.8k44k установок