Skip to content
Web Interface Guidelines

Web Interface Guidelines Skill

by Vercel vercel-labs/agent-skills

Audit UI code against Vercel's Web Interface Guidelines — accessibility, interaction, performance and layout rules — reported as terse file:line findings.

GitHub Docs
DevelopmentDesign & CreativeTesting & QA
Added to Onei
v1.0.0
MIT

Install

Install with the skills CLI

One command for Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf and dozens of other agents. Needs Node.js; the skill is fetched straight from vercel-labs/agent-skills.

$ npx skills add vercel-labs/agent-skills --skill web-design-guidelines

Run it in a terminal. The CLI finds the agents installed on your machine, asks which ones to add the skill to, and whether to install it into the folder you ran it from or for all your projects.

Other ways to install

  1. Open the skill on GitHub and download the folder that holds its SKILL.md.
  2. Put it at ~/.claude/skills/web-design-guidelines/, where Claude Code picks it up in every project.

No scripts or references next to it? Saving the SKILL.md alone as ~/.claude/skills/web-design-guidelines/SKILL.md works too.

Using another agent? Its personal skills folder
Codex
~/.agents/skills/
Cursor
~/.cursor/skills/
GitHub Copilot
~/.copilot/skills/
Gemini CLI
~/.gemini/skills/
Windsurf
~/.codeium/windsurf/skills/
OpenCode
~/.config/opencode/skills/
Open folder on GitHub

About

  • Audits UI code against the published Web Interface Guidelines
  • Fetches the current ruleset on every run, so reviews never go stale
  • Terse file:line findings that feed straight back as a fix list
  • Accepts a file path or glob pattern to scope the review
  • Covers accessibility, interaction, motion, layout and performance

"Review my UI" is a request most agents answer with vibes. This skill turns it into a checklist run against a published, versioned rulebook: Vercel's Web Interface Guidelines, covering accessibility, keyboard and pointer interaction, form behaviour, motion, layout and front-end performance.

The design choice worth noting is that the skill does not embed the rules. It fetches them fresh from the vercel-labs/web-interface-guidelines repository at the start of every review, so an audit run today uses today's guidelines rather than whatever was current when the skill was installed. That keeps a fast-moving standard from silently going stale inside your project.

Output is deliberately terse — findings in file:line form, no essay around each one — which makes the result easy to work through and easy to feed straight back into the agent as a fix list. You pass a file or a glob; if you do not, the skill asks which files to review rather than guessing at the whole repository.

Typical triggers are "review my UI", "check accessibility", "audit design" and "check my site against best practices". It is the review counterpart to Vercel's React Best Practices skill: that one shapes how the code is written, this one checks what the interface actually does. MIT-licensed, maintained by Vercel.

Try it

Once installed, ask your agent something like:

Review components/*/.tsx against the Web Interface Guidelines.

SKILL.md

The instructions your agent loads, as published by Vercel.

SKILL.md
name
web-design-guidelines
description
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 against best practices".
metadata
author: vercel version: "1.0.0" argument-hint: <file-or-pattern>

Web Interface Guidelines

Review files for compliance with Web Interface Guidelines.

How It Works
  1. Fetch the latest guidelines from the source URL below
  2. Read the specified files (or prompt user for files/pattern)
  3. Check against all rules in the fetched guidelines
  4. Output findings in the terse file:line format
Guidelines Source

Fetch fresh guidelines before each review:

https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md

Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.

Usage

When a user provides a file or pattern argument:

  1. Fetch guidelines from the source URL above
  2. Read the specified files
  3. Apply all rules from the fetched guidelines
  4. Output findings using the format specified in the guidelines

If no files specified, ask the user which files to review.

Install

Related Skills

See all Web Interface Guidelines alternatives

Skill: Anti-Slop Design

by Ferousco-dev

Featured

Stops AI-generated UI from defaulting to purple gradients and templated hero sections by forcing a named design direction first.

Design & Creative
102 views 26 copies

Skill: Web Performance Audit

by Cloudflare

Audits Core Web Vitals through the Chrome DevTools MCP server — LCP, INP, CLS plus FCP, TBT and Speed Index — and traces each one back to the render-blocking resource or layout shift causing it.

DevelopmentTesting & QA
Browse all skills →