Web Design Guidelines

Web Design Guidelines — это скилл Vercel для точечного ревью файлов с пользовательским интерфейсом по актуальным Web Interface Guidelines. Его следует выбирать, когда нужно проверить UI, доступность, UX, дизайн или соответствие веб-практикам. Скилл не предлагает заранее зафиксированный список вместо проверки: перед каждым ревью он требует заново получить свежий файл правил по адресу https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md. После этого агент читает переданные файлы или шаблон путей, сопоставляет код со всеми доступными правилами и выдаёт находки в компактном формате file:line. Если путь к файлам не передан, корректный следующий шаг — попросить пользователя указать файлы или pattern, а не делать вид, что проверен весь проект. В доступных правилах большой блок посвящён accessibility. Нужно проверять aria-label у кнопок, содержащих только иконку, label или aria-label у полей формы, клавиатурные обработчики у интерактивных элементов, семантические button, a, Link, label и table, alt у изображений и aria-hidden для декоративных иконок. Асинхронные сообщения вроде toast или ошибки валидации должны быть доступны через aria-live="polite". Иерархия h1–h6 должна быть последовательной, а для основного содержимого нужен skip link; у якорей заголовков учитывается scroll-margin-top. Для фокуса скилл ищет видимый focus-visible, не принимает голый outline-none без замены и учитывает focus-within для составных контролов. Отдельные проверки относятся к формам и состояниям. У input должны быть осмысленные name и autocomplete, подходящий type и inputmode; вставку текста нельзя блокировать через onPaste с preventDefault. Label должен быть кликабельным, чекбокс или radio — иметь единую удобную область попадания, а ошибка должна находиться рядом с полем и переводить фокус к первой проблеме после отправки. Placeholder заканчивается многоточием и показывает ожидаемый шаблон. В анимациях нужно уважать prefers-reduced-motion, ограничивать переходы transform и opacity, явно перечислять свойства вместо transition: all и сохранять возможность прервать движение. В текстах скилл ищет типографское многоточие, корректные кавычки, tabular-nums для числовых сравнений и text-wrap для заголовков. Ревью также охватывает длинный текст и пустые состояния, размеры и lazy-loading изображений, виртуализацию больших списков, отсутствие layout reads в render, URL-синхронизацию фильтров и вкладок, ссылки через a или Link, подтверждение разрушительных действий и touch-настройки. Для адаптивных интерфейсов проверяются safe-area inset, переполнение, flex или grid вместо измерений через JavaScript, dark-mode color-scheme, locale-форматирование через Intl и защита от hydration mismatch. Отдельно выявляются изображения без размеров, большие map по массивам, поля без label, icon-only controls без aria-label и navigation через div или span с onClick. Результат группируется по файлу; источник рекомендует сначала показывать конкретную строку и проблему, а пояснение добавлять только когда исправление неочевидно. Качество этого скилла зависит от переданного набора файлов и свежести загруженных правил: сама карточка не заменяет ручную проверку поведения в браузере и не является security-аудитом.