Baonat
← All skills
Design · CursorVerified

Author: Vercel

Web Interface / Design Guidelines (Vercel)

Audit UI against Vercel’s web interface guidelines — a11y, focus, forms, motion, dark mode — a compliance checklist, not an aesthetic / anti-AI-slop taste pack.

What it does
Loads Vercel’s web-design-guidelines skill so the agent reviews UI files for accessibility, focus states, forms, animation preferences, typography details, images, and theming — terse file:line findings.
Best for
Teams that need an interface compliance pass before ship, not a brand-new visual direction.
How to install / use
Install via `npx skills add vercel-labs/agent-skills`, then ask Cursor to audit specific files or patterns against web interface guidelines. Free/MIT.

Run the a11y/focus/forms audit before you call the UI “done.”

Copy this

  • Audit named files — require file:line findings, not a vibe essay
  • Cover a11y, focus-visible, forms, reduced-motion, and dark-mode tokens
  • Do not turn this into a taste redesign — compliance first

When to use

Use Vercel’s web-design-guidelines skill when you want a compliance / interface audit — accessibility, keyboard focus, forms, motion, images, dark mode — against web interface best practices.

Good fits:

  • “Review my UI” / “check accessibility” / “audit UX” before release.
  • Forms and overlays that may miss labels, focus rings, or error wiring.
  • Motion and theming passes (prefers-reduced-motion, color-scheme, theme-color).

Contrast with frontend-design-taste: that Anthropic card is aesthetic direction (bold type, hero budget, anti-AI-slop taste). This card is guidelines compliance — a11y, focus, forms, motion, dark mode — not “make it look less generic.” Use taste when inventing a marketing look; use this when auditing whether the UI is usable and correct.

Skip it when you only need React/Next performance rules (vercel-react-best-practices) or a brand-new visual system with no existing UI to audit.

Why

Agents asked to “polish the UI” often restyle without checking keyboard paths, focus visibility, form autocomplete, or reduced-motion. Vercel’s skill points the agent at web interface guidelines and expects terse, file-scoped findings instead of a redesign manifesto.

Baonat marks this verified against skills/web-design-guidelines in vercel-labs/agent-skills. Free / MIT. Link upstream — do not paste wholesale guideline bodies into the prompt.

Install

  1. Install the pack:
npx skills add vercel-labs/agent-skills
  1. Confirm against the agent-skills README if install instructions change.
  2. Point Cursor at specific files or globs (components, forms, layouts).
  3. Ask for a guidelines audit with file:line output — not a visual redesign.
  4. Fix blockers (a11y / focus / forms) before nits (typography flourishes).

Copy this

Compliance audit:

Use the Vercel web-design-guidelines skill.
Audit: [files or glob].
Check: accessibility, focus states, forms, animation/reduced-motion, images/alt, dark mode & theming, touch/interaction.
Output terse file:line findings. Severity: blocker / should-fix / nit.
Do NOT redesign aesthetics or invent a new brand — this is compliance, not taste.

Pre-ship gate:

Before we merge the UI: run web-design-guidelines on [paths].
Must pass: keyboard access, visible focus, labeled inputs, error association, prefers-reduced-motion respected.
Taste/brand changes are out of scope for this pass.

Concrete scenarios

  1. Checkout form. Missing labels, autocomplete, and aria-invalid wiring caught before launch.
  2. Modal / sheet. Focus trap and focus-visible rings verified; Escape/return focus checked.
  3. Dark mode QA. Theme tokens and color-scheme audited — not a new palette invented.

Pitfalls / when NOT to use

  • Confusing with frontend-design-taste. Taste = aesthetic direction; this = a11y/guidelines audit.
  • Using it as a blank-canvas brand brief. Start from real UI files.
  • Ignoring performance waterfalls. That’s react-best-practices, not this card.
  • Dumping the full guidelines doc into chat. Install the skill; fetch/link upstream rules.

FAQ

Q: Author / source?
A: Vercel via vercel-labs/agent-skills. Primary path: web-design-guidelines.

Q: Access / paywall?
A: Skill artifact is free (MIT). No special accessNote — normal Cursor subscription may still apply to run the agent.

Q: Pairing tip?
A: Run web-design-guidelines for compliance, frontend-design-taste only when you intentionally want a new aesthetic direction, and vercel-react-best-practices for perf.

Source attribution