web-design-guidelines: a UI review against Vercel’s rulebook
A button without an aria-label, a missing focus ring or motion that ignores prefers-reduced-motion slips through review easily. Before each pass this skill fetches the latest Web Interface Guidelines from Vercel’s repository, reads the files you point it at and reports findings in a terse file:line format.
Reports each finding as file:line and, when no files are given, asks which ones to review
When to use it
Before a release you need to check a new form or page for accessibility and keyboard use
Design review keeps turning into a debate about taste and the team needs a shared rulebook
You want to confirm that UI state lives in the URL so any screen can be deep-linked
Ask your agent
Review components/Checkout for accessibility with web-design-guidelines
Audit the sign-up form: autocomplete, error messages and focus handling
Check my site against UX best practices and list the findings as file:line
Questions
How do I install web-design-guidelines?
Run npx skills add vercel-labs/agent-skills@web-design-guidelines; the installer then asks which agent and scope to use.
Where do the rules come from?
From command.md in the vercel-labs/web-interface-guidelines repository, fetched fresh before every review.
How does it differ from React Best Practices?
React Best Practices is about React and Next.js speed; this skill is about the interface itself: accessibility, forms, focus, motion, typography and i18n.
