Web Design Guidelines
Audit UI code against 100+ web interface best-practice rules.
About
Web Design Guidelines is Vercel's official agent skill for reviewing frontend code against 100+ rules covering accessibility, focus states, forms, animation, typography, images, performance, navigation state, dark mode, touch interaction, and i18n. Invoke it with 'review my UI' or 'check accessibility' and the agent audits the code systematically instead of eyeballing it.
It is an audit tool, not a generator — it critiques existing code rather than designing from scratch, and its rules reflect Vercel's house style, which may not match every design system. Best paired with a design skill like Impeccable for the creative side.
What it can do
- 100+ UI audit rules
- Accessibility and focus-state checks
- Performance anti-pattern detection
- Typography and i18n review
- Dark mode and touch guidance
Setup
npx skills add vercel-labs/agent-skills (installs the whole collection), or install the single skill via your agent's skill manager. Works with Claude Code, Cursor, and other Agent Skills-compatible harnesses.
Prerequisites
An AI coding agent that supports the Agent Skills format (Claude Code, Cursor, etc.).
Use cases
Works with
Trust score — 9/10
Scored 9/10 (verified tier, metrics-v1). Evidence: Verified via vendor site/docs/GitHub and reputable coverage, wave 44 (tools-b); Trending score 88/100 from researcher assessment.
★ 32,353 GitHub stars
Sources
Every fact above was checked against these sources. Where a claim comes from the provider and couldn't be independently verified, the text says so.