Скиллы для AI-агентов · Дизайн
web-design-guidelines: ревью интерфейса по правилам Vercel Кнопку без aria-label, пропавшую рамку фокуса или анимацию без prefers-reduced-motion легко пропустить на ревью. Перед каждой проверкой скилл скачивает свежую версию Web Interface Guidelines из репозитория Vercel, читает указанные вами файлы и выдаёт замечания в коротком формате file:line.
32 930 звёзд на GitHub · #33
Получить скилл Открыть на GitHub
Автор Vercel
Лицензия не указана
Пакет Один скилл
Обновлён 14 октября 2026 г. Что умеет Перед каждым ревью загружает актуальный свод Web Interface Guidelines с GitHub, так что список проверок обновляется без переустановки Проверяет доступность: aria-label, семантичный HTML, обработчики клавиатуры и видимые состояния фокуса через focus-visible Смотрит формы и изображения: autocomplete, валидацию и вывод ошибок, размеры картинок, ленивую загрузку и alt-текст Разбирает анимацию, типографику и тему: prefers-reduced-motion, трансформации на композиторе, tabular-nums, color-scheme, theme-color Выдаёт находки в формате file:line, а если файлы не указаны, сначала спрашивает, что именно проверять Когда пригодится Перед релизом нужно проверить новую форму или страницу на доступность и управление с клавиатуры Дизайн-ревью сводится к спору о вкусе, и команде нужен общий список проверяемых правил Нужно убедиться, что состояние интерфейса отражено в URL и нужный экран открывается по прямой ссылке Попросите агента Проверь components/Checkout на доступность по web-design-guidelines Сделай аудит формы регистрации: autocomplete, сообщения об ошибках, фокус Проверь мой сайт на соответствие лучшим практикам UX и выдай список file:line Перед установкой При каждом запуске скилл скачивает правила с raw.githubusercontent.com, поэтому нужен доступ в сеть, а набор проверок может меняться от запуска к запуску. GitHub не находит в репозитории файла лицензии, хотя README указывает MIT.
Вопросы Как установить web-design-guidelines? Выполните npx skills add vercel-labs/agent-skills@web-design-guidelines; установщик предложит выбрать агента и область установки.
Откуда скилл берёт правила? Из файла command.md в репозитории vercel-labs/web-interface-guidelines: он загружается заново перед каждой проверкой.
Чем он отличается от React Best Practices? React Best Practices отвечает за скорость React и Next.js, а этот скилл за интерфейс: доступность, формы, фокус, анимацию, типографику и локализацию.
