🔗 View on GitHub: vercel-labs/agent-skills/web-design-guidelines
🚀 Quick Installation
Review UI code for compliance with web interface best practices.
npx
npx skills add vercel-labs/agent-skills --skill web-design-guidelinesWhat It Does
Audits your code for 100+ rules covering accessibility, performance, and UX. Use this skill when:
- 🔍 "Review my UI"
- ♿ "Check accessibility"
- ✅ "Audit design"
- 🎨 "Review UX"
- 📋 "Check my site against best practices"
Categories Covered
| Category | Focus Areas |
|---|---|
| Accessibility | aria-labels, semantic HTML, keyboard handlers |
| Focus States | visible focus, focus-visible patterns |
| Forms | autocomplete, validation, error handling |
| Animation | prefers-reduced-motion, compositor-friendly transforms |
| Typography | curly quotes, ellipsis, tabular-nums |
| Images | dimensions, lazy loading, alt text |
| Performance | virtualization, layout thrashing, preconnect |
| Navigation & State | URL reflects state, deep-linking |
| Dark Mode & Theming | color-scheme, theme-color meta |
| Touch & Interaction | touch-action, tap-highlight |
| Locale & i18n | Intl.DateTimeFormat, Intl.NumberFormat |
Example Usage
"Review this component for accessibility issues"
"Check my site's UX against best practices"
"Audit my design for web standards compliance"
"Review my UI for performance optimizations"Part of Vercel Agent Skills
This skill is part of the vercel-labs/agent-skills collection — Vercel's official agent skills for AI coding assistants.
