web-design-guidelines
Проверка UI-кода по рекомендациям по дизайну
Также доступно от: antfu,antfu,vercel-labs
Этот навык автоматически проверяет веб-интерфейсы по рекомендациям Vercel по веб-интерфейсам, выявляя проблемы доступности, UX-проблемы и нарушения соответствия дизайну в вашем UI-коде.
Скачать ZIP навыка
Загрузить в Claude
Перейдите в Settings → Capabilities → Skills → Upload skill
Включите и начните использовать
Протестировать
Использование «web-design-guidelines». Использовать web-design-guidelines для проверки src/components/Header.tsx
Ожидаемый результат:
- src/components/Header.tsx:15 - Отсутствует ARIA-метка на элементе навигации
- src/components/Header.tsx:23 - Коэффициент цветового контраста ниже 4.5:1 для текста ссылки
- src/components/Header.tsx:31 - Используйте семантический <button> вместо <div> для действий
Использование «web-design-guidelines». Использовать web-design-guidelines для аудита **/*.html
Ожидаемый результат:
- index.html:42 - Метки форм должны быть связаны с полями ввода через атрибут for
- index.html:58 - Изображения требуют альтернативный текст для доступности
- about.html:12 - Уровни заголовков не должны пропускаться (h1 -> h3)
Аудит безопасности
БезопасноStatic analysis flagged 7 potential issues (external_commands, network, weak cryptographic algorithms). Manual review confirms all findings are false positives. The 'external_commands' detections are markdown backticks for code formatting, not shell execution. The 'network' detection is an intentional hardcoded URL to Vercel's official GitHub guidelines repository. The 'weak cryptographic algorithm' detections are triggered by YAML frontmatter content with no actual cryptographic code. This skill is a safe design review tool that fetches official Vercel guidelines and applies them to audit UI code.
Оценка качества
Что вы можете построить
Аудит доступности
Проверка React-компонента или HTML-файла на соответствие WCAG, использование ARIA и проблемы цветового контраста
Соответствие дизайн-системе
Проверка соответствия UI-компонентов установленным паттернам дизайна и рекомендациям по интерфейсам Vercel
Проверка кода перед запуском
Выполнение финального аудита всех UI-файлов перед развёртыванием для выявления проблем доступности или UX
Попробуйте эти промпты
Используйте навык web-design-guidelines для проверки моего UI-кода в src/components/Button.tsx на доступность и соответствие дизайну.
Используйте web-design-guidelines для аудита всех файлов, соответствующих **/*.tsx в директории components, на нарушения рекомендаций по интерфейсам.
Запустите web-design-guidelines на всей директории src для проверки всего UI-кода по рекомендациям Vercel по веб-интерфейсам.
Я хочу проверить свой UI-код. Используйте web-design-guidelines и спросите меня, какие файлы проверить.
Лучшие практики
- Указывайте точные пути к файлам или glob-паттерны для фокусировки проверки на релевантных файлах
- Просматривайте результаты в формате file:line и исправляйте проблемы в порядке важности
- Получайте свежие рекомендации перед каждой проверкой для актуальных правил
Избегать
- Запуск навыка без указания файлов для проверки
- Игнорирование результатов по доступности — они влияют на пользователей с ограниченными возможностями
- Предположение, что навык выявляет все проблемы — это помощник, а не замена ручному тестированию
Часто задаваемые вопросы
Как этот навык получает рекомендации?
Может ли этот навык исправить найденные проблемы?
Какие типы проблем он проверяет?
Нужно ли мне подключение к интернету?
Могу ли я проверить любой тип файла?
Как часто обновляются рекомендации?
Сведения для разработчиков
Автор
ZhanlinCuiЛицензия
MIT
Репозиторий
https://github.com/ZhanlinCui/Ultimate-Agent-Skills-Collection/tree/main/vercel-web-design-guidelinesСсылка
main
Структура файлов
📄 SKILL.md