What is the Vercel web-design-guidelines skill? Setup, command.md and use with Claude Code

You have your coding agent audit your interface: with Vercel's web-design-guidelines skill, the agent reviews HTML, CSS and React code against Vercel's Web Interface Guidelines and writes findings as "file:line - issue". It is a single-file skill (SKILL.md); the rules are not inside it: before every review the agent fetches the command.md file from GitHub, so the rules update independently of your install but can also change without you noticing. It is MIT-licensed, free and needs no account. Install: npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines. Claude Code, Codex and Cursor are among the agents the skills CLI supports.

What it does: Has your UI code audited against Vercel's rules
Type: Skill (a single SKILL.md, no scripts)
Maker: Vercel (vercel-labs)
Account/key: Not required
Rules: Fetched from the web every time
Where: Claude Code, Codex, Cursor
Price: Free, MIT

What does the web-design-guidelines skill do?

A skill is an instruction package that teaches an agent how to work on a topic. This skill teaches the agent one job: read interface code (buttons, forms, animations, images, accessibility) against the Web Interface Guidelines written by Vercel and list the problems. The output is short and grouped by file, for example "src/Button.tsx:42 - icon button missing aria-label". A file with no issues gets "✓ pass".

Audit UI code against the guidelinesWhat you get: Short findings grouped by file, "✓ pass" for files with no issuesNeeds a separate setup

There are two separate things: the Web Interface Guidelines are Vercel's written guide (vercel.com/design/guidelines), and web-design-guidelines is the name of the skill that uses it. The skill does not fetch the whole guide, only a short rules file (command.md) from the guidelines repository. The skill is not a plugin or a tool for deploying to Vercel, and it needs no Vercel account.

Who it helps: People who build site or app interfaces with an agent and want to catch accessibility, focus, form and performance mistakes before going live.

Skill in the same repository	What it is for (README)
web-design-guidelines	Code review against interface and accessibility rules (this page).
react-best-practices	React and Next.js performance rules; more than 40 rules, ordered by impact.
writing-guidelines	Review of documentation and writing style against Vercel's writing handbook.

What is in the rules list?

The skill folder contains only SKILL.md. The rules are in command.md, under 17 headings. The agent-skills README says "more than 100 rules". The headings, with one example rule from each:

Heading	Example rule (command.md)
Accessibility, focus	`aria-label` on icon-only buttons; a visible focus ring, `:focus-visible` instead of `outline-none`.
Forms	`autocomplete` on inputs; never block paste; errors next to the field.
Animation	Respect `prefers-reduced-motion`; do not use `transition: all`.
Typography, content overflow	`…` instead of three dots; `truncate` on long text; handle the empty state.
Images, performance	`width` and `height` on `<img>`; virtualize long lists.
Navigation, touch	Filter and tab state in the URL; `touch-action: manipulation`.
Dark mode, safe areas	`color-scheme: dark`; `env(safe-area-inset-*)` for notched screens.
Localization, hydration	`Intl.*` for dates and numbers; avoid server-client mismatches.
Content and copy, anti-patterns	Specific button labels ("Save API Key"); flag patterns like `user-scalable=no`.

DijiKoçum note, not official information: the "Content and copy" rules (Title Case, active voice, use of "&") are written for English text. If you audit a site in another language, such as Turkish, weigh those findings before acting on them; the accessibility, focus, form, performance and Intl rules are language-independent.

Why are the rules fetched from the web every time?

SKILL.mdThe single file that explains the method to the agent.

command.md is fetchedFrom the main branch on GitHub, before every review.

Files are reviewedFindings are written as file:line.

The rules are not part of the skill; if the main branch changes, the result changes too.

SKILL.md tells the agent "Fetch fresh guidelines before each review" and gives the address: raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md. The upside: the rules stay current (the guidelines repository's last commit was on October 5, 2026). The downside: the same code can produce different findings on two different days, and someone else can change the rules without you noticing. That is also the security angle: the agent applies the fetched text as instructions.

What happens	What to do
The rules changed one day and the results no longer match	Reported by users The repository has open issues asking to "pin the fetched instructions or vendor them into the repo" (#316, #30, #91; #317 proposes a fix for this). The official docs do not describe version pinning; you can open and read the fetched command.md yourself (its address is written in SKILL.md).
My agent has no tool for fetching web addresses	Reported by users SKILL.md requires fetching the rules with WebFetch and gives no fallback (issue #300, closed). Turn on web reading in your agent.

The concern in these issues is not malicious content but a changeable remote file being applied as instructions. The person who opened #316 also notes that the file had no malicious content at that time. GitHub Security Advisories are empty for both repositories; OSV has no entry for the skills (npm) installer (October 15, 2026). No recorded advisory appears; that does not mean "safe".

How do I install web-design-guidelines?

Requirements: Node.js (for npx) and a coding agent that can read web addresses. No account, API key or plan needed. The commands are taken verbatim from the README files of the guidelines and the skills CLI.

Guidelines README "Review Command"› npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines

agent-skills README› npx skills add vercel-labs/agent-skills

Installs every skill in the repository (react-best-practices, writing-guidelines and others). If you only want the audit, use the command in the first tab.

skills CLI README› npx skills use vercel-labs/agent-skills --skill web-design-guidelines --agent claude-code

According to the skills CLI README, this command writes the skill files to a temporary folder, prepares the prompt and launches the agent; it does not install anything permanently.

The version-pinned command shown on the atlas card (skills@1.7.0) is not in the official documentation; the official command has no version. The guidelines README also suggests downloading the AGENTS.md file: that is for the agent to apply the rules while generating code, and it does not replace the audit skill. The skills CLI collects anonymous usage data; DISABLE_TELEMETRY=1 or DO_NOT_TRACK=1 turns it off.

How do I use web-design-guidelines?

SKILL.md tells the agent to use the skill for requests like these: "review my UI", "check accessibility", "audit design", "review UX", "check my site against best practices". The skill expects a file or pattern (SKILL.md: argument-hint <file-or-pattern>); if you do not give one, it asks which files to review. The rules text is in English; the docs do not say which language the findings are written in.

Audit the components folder"Audit the files under src/components with the web-design-guidelines skill. List the findings as file:line; do not apply fixes, show them to me first."

Accessibility check"Review the login page code for accessibility and form rules. Which lines have problems?"

Output format (the example in command.md):

src/Button.tsx:42 - icon button missing aria-label
src/Button.tsx:55 - animation missing prefers-reduced-motion
For src/Card.tsx: ✓ pass

Which agents does web-design-guidelines work in?

Claude CodeYes	Listed in the skills CLI README table (project: .claude/skills/, global: ~/.claude/skills/), and the example command for this skill uses --agent claude-code.
CodexYes	Named in the supported agents table of the skills CLI README; there is no Codex note specific to this skill.
CursorYes	Named in the same table; there is no Cursor note specific to this skill.
Claude.ai (web chat)Unclear	Not stated in the documentation.
Agent that cannot read web addressesUnclear	SKILL.md fetches the rules with WebFetch and gives no fallback.

What does web-design-guidelines access?

Reads

The files you point it at for review, and the command.md file from the web.

Writes

SKILL.md does not describe writing files; the output is a list of findings. Applying fixes is a separate request and depends on the agent's approval rules.

Deletes

The skill deletes nothing.

Network

SKILL.md only says to fetch command.md; it does not say your files are sent anywhere. The model your agent uses still processes the file contents as usual.

The skill folder has no scripts, hooks or MCP; it contains only SKILL.md.

Is web-design-guidelines free?

Yes. The guidelines repository is MIT-licensed (Copyright 2025 Vercel Labs); the agent-skills README also says MIT, but that repository has no LICENSE file. The skill does not connect to a Vercel account and states no fee or plan requirement. The agent tool you use has its own separate pricing.

How do I remove web-design-guidelines?

With a command: The example in the skills CLI README: npx skills remove web-design-guidelines (add --global for a global install).
Manually: Delete the skill folder from your agent's skills directory.

Frequently asked questions

How do I use Vercel web design guidelines with Claude Code?

After installing, give the agent a request such as "review my UI" or "check accessibility" along with the file or folder to review. SKILL.md tells the agent to fetch the rules from command.md, check the files and write the findings as file:line.

How do I install the web design guidelines skill, and where is it on GitHub?

The skill is in the vercel-labs/agent-skills repository, in the skills/web-design-guidelines folder. The command from the guidelines README: npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines. Node.js is required; no account is needed.

What do command.md and SKILL.md do?

SKILL.md is the instruction file that explains the method to the agent, and command.md is the rules list. The skill fetches command.md from GitHub's main branch before every review, so the rules update without reinstalling the skill, but they can also change.

Does the web design guidelines skill work with Codex?

The skills CLI lists Codex among its supported agents. There is no Codex note specific to this skill; the agent must be able to fetch web addresses.

Is Vercel web design guidelines a plugin or a skill?

A skill. It is not stated to be published as a Claude Code plugin; the repository has an open issue requesting a "Claude Code plugin" (#224).

Related guides

21st MCP

ai-memory awwwards-animations

Brave Search MCP

Chrome DevTools MCP

Claude Code Setup

Sources

Not clear in the official sources: Whether it works on Claude.ai (web) · what happens in agents that cannot read web addresses · how well the "Content and copy" rules apply to non-English (for example Turkish) site text · the missing LICENSE file in the agent-skills repository (the README says MIT) · the skills.sh install count. Each is covered in the relevant section.