← Explore all skills

DESIGN AND INTERFACES / Vercel

Vercel Web Interface Guidelines

Reviews interface code against a freshly fetched guideline set and returns file-specific findings.

“Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site”

01 / THE REASONING

Why this made the selection.

  • Covers concrete interaction details such as focus visibility, form labeling, asynchronous announcements and URL state.
  • The output points to file locations, which makes a large review easier to turn into individual fixes.

02 / THE REVIEW RECORD

What we actually inspected.

Source review has boundaries.
A clear record is more useful than a “safe” badge.

Material inspected

  • skills/web-design-guidelines/SKILL.md
  • README.md
  • vercel-labs/web-interface-guidelines:command.md

Our findings

  • The definition explicitly requires retrieving the guideline file before reviewing source.
  • The separately fetched rules include reduced-motion, gesture alternatives, native semantics and focus-obstruction checks.
  • Recommendations such as list virtualization and typography conventions need judgment rather than automatic universal application.

Not established by this review

  • Source inspection only; no skill installation or workflow execution was performed.

The review applies to the material and revision named here. A newer upstream release can change its behavior.

03 / PUT IT TO WORK

Add a skill to your workflow.

Upstream setup instructions ↗

DOCUMENTED COMMAND

npx skills add https://github.com/vercel-labs/agent-skills/tree/063bee94c3f4df8453406c830b0a7df0f2860278/skills/web-design-guidelines

Copying does not execute this command. It may retrieve a newer version than the reviewed source.

  1. Install the complete skill directory with its references and helpers; a copied SKILL.md alone may be incomplete.
  2. Choose the intended agent and project scope in the installer, then review its permissions before using the skill.

Before you start

  • Node.js/npm for this installer
  • An agent that supports the Agent Skills format
  • Access to the current external guideline file and the files to review

04 / FOLLOW THE EVIDENCE

The source trail.

Our notes are separate from the original resource.
Check upstream before adopting a new version.

  1. https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/skills/web-design-guidelines/SKILL.md

    Supports: summary, upstreamDescription, whySelected, bestFor, limitations, review, compatibility, access

  2. https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/README.md

    Supports: license

  3. https://github.com/vercel-labs/agent-skills/blob/063bee94c3f4df8453406c830b0a7df0f2860278/README.md

    Supports: install, compatibility, access

  4. https://github.com/vercel-labs/skills/blob/7407f3893ad4dceab546ac002c3ef806e4000c73/README.md

    Supports: install

  5. https://github.com/vercel-labs/web-interface-guidelines/blob/e3d624baaf29dc1fc645aff3e38f03e564d2d6b1/command.md

    Supports: whySelected, limitations, review

  6. https://github.com/vercel-labs/skills/blob/7407f3893ad4dceab546ac002c3ef806e4000c73/src/git.ts

    Supports: install