web-design-guidelinesаудит UI по гайдлайнам Vercel
vercel-labs/agent-skills
Загружает актуальные Web Interface Guidelines из GitHub Vercel и проверяет код на доступность, дизайн-несоответствия и UX-проблемы. Результат в формате файл:строка.
Установка
npx -y skills add vercel-labs/agent-skills --skill web-design-guidelines --agent claude-codeWeb Interface Guidelines
Проверяет файлы на соответствие Web Interface Guidelines.
Как это работает
- Получить актуальные гайдлайны по исходному URL ниже
- Прочитать указанные файлы (или запросить у пользователя файлы/паттерн)
- Проверить по всем правилам полученных гайдлайнов
- Вывести находки в кратком формате
file:line
Источник гайдлайнов
Получайте свежие гайдлайны перед каждым ревью:
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.mdИспользуйте WebFetch для получения актуальных правил. Полученный контент содержит все правила и инструкции по формату вывода.
Использование
Когда пользователь передаёт аргумент файла или паттерна: 1) получите гайдлайны по URL выше; 2) прочитайте указанные файлы; 3) примените все правила из полученных гайдлайнов; 4) выведите находки в формате, указанном в гайдлайнах.
Если файлы не указаны — спросите пользователя, какие файлы проверять.
Из того же репозитория
vercel-react-best-practices — внутренний плейбук Vercel по React
vercel-labs/agent-skills
69 проверок кода React и Next.js: barrel import, async waterfall, лишние ре-рендеры. Расставлены по приоритету влияния на производительность, каждое правило с примерами до/после.
vercel-composition-patterns — паттерны композиции React-компонентов
vercel-labs/agent-skills
Решает проблему boolean-props: compound components, context providers, render props, React 19 use() вместо forwardRef. Правила и примеры рефакторинга запутанных API компонентов.
vercel-react-native-skills — React Native от Vercel
vercel-labs/agent-skills
Лучшие практики React Native от Vercel по 8 категориям: производительность, мобильные паттерны, критические оптимизации. Приоритизировано по реальному влиянию.
deploy-to-vercel — деплой приложений на Vercel
vercel-labs/agent-skills
Деплой приложений на Vercel: определяет состояние проекта, выбирает метод деплоя (CLI/API), конфигурирует переменные окружения и домены автоматически.
vercel-react-view-transitions — View Transitions API для React
vercel-labs/agent-skills
Полное руководство по нативному View Transition API React: анимация роутов, реализация и деплой. От аудита до готового решения.
vercel-cli-with-tokens — Vercel деплой через токены
vercel-labs/agent-skills
Деплой на Vercel с токен-аутентификацией без интерактивного логина: проверка токенов в env, CI/CD паттерны и автоматизация.