Vercel Web Design Guidelines Claude Skill Review: Verdict, Safety and Alternatives

Vercel's Web Design Guidelines skill is a 308-token file that fetches Vercel's interface rules and reports file:line violations. Our verdict is Conditional, 66/100, with safety grade C. It suits quick UI reviews on agents that can fetch URLs. Its rules come from an unpinned branch, and they changed after our review.

Get the skill: web-design-guidelines folder on GitHub · SKILL.md at the reviewed commit · skills.sh listing

What is the Vercel Web Design Guidelines skill?

The Vercel Web Design Guidelines skill is a 308-token review file from Vercel Labs. It tells the agent to fetch Vercel's Web Interface Guidelines. It then checks the files you name and lists file:line violations.

Vercel Labs publishes the skill in the vercel-labs/agent-skills repository. An Agent Skill is a folder an agent loads on matching tasks; see how a SKILL.md file works. This skill holds no rules. It sends the agent to command.md in the vercel-labs/web-interface-guidelines repository, which carries every rule and the output format.

WebFetch is the URL-fetch tool an agent uses to read a web page, and the skill needs it. One directory calls the skill "comprehensive web design guidelines", which describes command.md, not the skill.

SKILL.md lists 5 trigger phrases:

• "review my UI"
• "check accessibility"
• "audit design"
• "review UX"
• "check my site against best practices"

Its one argument, <file-or-pattern>, names the files to review.

Which official form should you use: skill, command or AGENTS.md?

Use the web-design-guidelines skill to review existing UI code with any skills-aware agent. Use AGENTS.md to apply the rules while code is generated. The curl-installed agent command is a third official form.

Vercel ships the guidelines in these 4 official forms.

Vercel announced the agent command on 2026-01-12. AGENTS.md is a file of standing instructions an agent reads while writing code. Vercel ships no Claude Code plugin for this skill; a third-party plugin wraps it as /guidelines (issue #224). Vercel's docs list its other skills, including React, AI SDK and Deployment.

Is the Web Design Guidelines skill worth installing in Claude?

Yes, conditionally: the Web Design Guidelines skill scores 66/100, Conditional, at Low confidence. Its rules are concrete and cheap to load. Without a fetch tool, it silently falls back to a generic review.

Its strength is context cost: 308 tokens locally plus an estimated 2,000 fetched. The rules are concrete, cover accessibility, focus, forms and dark mode, and were updated in April and August 2026. Its weakness is the missing fallback (issue #300, closed on 2026-07-10 with no change). The rules come from an unpinned main branch (#316 open, PR #317 unmerged).

The skill fits front-end developers whose agents have web fetch. It is a poor fit for 3 groups:

• Offline, sandboxed or CLI agents without a URL-fetch tool, where the skill carries no rules (#300)
• Teams that need reproducible audit criteria, since the rules change with the upstream branch (#316)
• Runtime accessibility checks, because the skill reviews static source only

No measured result exists. The evidence is thin: 7 dated reports, 3 of them strong. Our methodology explains why confidence is Low here.

Compare other design skills ranked by verdict.

How many tokens does the Web Design Guidelines skill use?

The Web Design Guidelines skill file measures about 308 tokens per load. Each run fetches roughly 2,000 more tokens of rules. Our estimate for reviewing five React components is 14,000 input and 1,500 output tokens.

The 308 tokens are what the skill adds on each load. The 14,000 tokens cover the whole task, component files included, at 3 invocations a week.

What changed since our review?

The Web Design Guidelines skill file has not changed since our review. The rules it fetches did change, on 2026-10-05, with a desktop overscroll guideline. The pinning fix, PR #317, is still unmerged.

• 2026-10-05: commit 4ecfb9f added one line to command.md, titled "Add desktop overscroll guideline".
• 2026-10-21: SKILL.md on main still hashed f4647ca8…, identical to the reviewed file.
• 2026-10-21: no new agent-skills tag; issue #316 and PR #317 both open.
• 2026-10-21: command.md measured 8,055 bytes, against about 7.8 KB at our review.

Runs before and after 5 October apply different rules, the integrity risk we scored at 40. The verdict is unchanged.

Is the Web Design Guidelines skill safe to install?

Yes, with care: the Web Design Guidelines skill carries safety grade C. It has no code and only reads files. It fetches instructions from Vercel's mutable main branch on every run and obeys them without a pin or hash.

Our reading of commit 063bee9 found 8 facts:

• One file: SKILL.md, 1,231 bytes, about 308 tokens.
• No scripts, hooks, MCP config or environment variables.
• A web-fetch requirement: SKILL.md names WebFetch and a raw.githubusercontent.com URL on the main branch.
• All rules and the output format, supplied by the fetched command.md (about 7.8 KB at our review).
• No pin, hash or untrusted-content handling for the fetched text.
• Read-only behaviour: the skill reads named files and writes nothing.
• Three skills.sh audits: Gen Agent Trust Hub Pass, Snyk Pass, Socket Warn.
• No credentials, and an endpoint disclosed and owned by the same publisher.

Grade C means the file is clean, while its real instructions arrive at run time. Vercel owns the endpoint, which limits the likelihood of tampering. Read more on the risks of skills that fetch remote instructions.

GitHub code search finds 3,528 same-name SKILL.md copies, forks included. One ranking directory, collectivebrain.de, installs its own rewritten "v2.0" file by curl from its domain. Our safety grade covers Vercel's file at commit 063bee9 only.

What do users and maintainers report about the Web Design Guidelines skill?

Users and maintainers report little about the Web Design Guidelines skill: 7 dated reports. One Sonnet 4.6 pilot scored 4/5 against 2/5 without it. The pinning request #316 has no maintainer reply.

What are the Web Design Guidelines skill's known failures?

The Web Design Guidelines skill has 2 known failures at commit 063bee9. Without a fetch tool, it reviews from general knowledge without saying so (#300). Its rules change whenever Vercel's main branch changes (#316).

1. Silent fallback without fetch. Issue #300 showed it on Sonnet 4.6, and SKILL.md still has no fallback.
2. Unpinned rules. The agent obeys whatever command.md holds on main that day (#316, PR #317 unmerged).
3. Static scope only. The description invites "check my site", yet the skill reads source files only (scope honesty 60).

In the worst case, a failed fetch still yields a review that looks like a guidelines audit.

Does the Web Design Guidelines skill work in Claude Code, Codex and Cursor?

Yes, by format, when the agent has a URL-fetch tool. The only verified run of the Web Design Guidelines skill is one Claude Sonnet 4.6 pilot. Vercel says its skills work with 18+ agents, including Claude Code and Cursor.

Claude Code is Anthropic's coding agent, Codex is OpenAI's, and Cursor is an AI code editor. Vercel's docs claim 18+ agents, so we list these three as format-compatible. The #300 pilot ran without fetch, so the full fetch workflow stays unverified.

How do you install the Web Design Guidelines skill?

Install the Vercel Web Design Guidelines skill with one command: npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines. Then confirm that your agent can fetch URLs. Otherwise, save command.md locally and point the skill at that copy.

The skills CLI (npx skills) is Vercel's installer, backed by skills.sh. The --skill flag installs this skill only.

1. Run npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines.
2. Run npx skills add vercel-labs/agent-skills --skill web-design-guidelines, the shorter form in Vercel's docs.
3. Run npx skills use vercel-labs/agent-skills@web-design-guidelines --agent claude-code to try it without installing.
4. Copy SKILL.md by hand into ~/.claude/skills/web-design-guidelines/.

Then allow WebFetch, or vendor the rules. To vendor them, save command.md at a trusted commit and edit the URL in SKILL.md. PR #317 uses commit 4e799d4. See the guide to installing a skill in Claude Code.

How do you run a review with the Web Design Guidelines skill?

Run a review with the Web Design Guidelines skill by naming the files to check. A typical prompt is "review src/components against the web interface guidelines". The skill fetches the rules and returns file:line findings.

1. Name the files or a glob, for example src/components/*.tsx.
2. Let the agent fetch command.md from the guidelines repo.
3. Read the file:line list of violations.
4. Fix the flagged lines.
5. Re-run the review on the same files.

These sample lines show the format only:

src/components/IconButton.tsx:14 icon button lacks aria-label
src/components/Input.tsx:22 input lacks autocomplete attribute
src/styles/focus.css:8 outline-none without a visible focus replacement

Test it yourself in 4 steps:

1. Pick one component with a known missing aria-label and an outline-none style.
2. Run the review with fetch enabled.
3. Run it again with fetch disabled.
4. Compare the two finding lists.

What are the alternatives to the Web Design Guidelines skill?

Alternatives to the Web Design Guidelines skill include ibelick's UI Skills (72) and Emil Design Engineering (76). UI Skills runs local accessibility and motion passes. Frontend Design (76) builds new pages instead.

Sorted by score.

Two related options have no verdict yet: Vercel React best practices, from the same repo, and addyosmani/web-quality-skills.

Where is the Web Design Guidelines skill on GitHub?

The Web Design Guidelines skill lives in vercel-labs/agent-skills at skills/web-design-guidelines, as one 1,231-byte SKILL.md. We reviewed commit 063bee9 on 2026-09-30. The rules it fetches live in a separate GitHub repo, vercel-labs/web-interface-guidelines.

• The repository: vercel-labs/agent-skills, 25 contributors, 31,761 stars at review and 32,710 on 2026-10-21.
• The reviewed tag: agent-skills-063bee9, from 2026-08-28, with 3 releases in 90 days.
• The rules repo: vercel-labs/web-interface-guidelines, which holds command.md.

Common questions

Does the Web Design Guidelines skill check a live website?

No. It reads the source files you name and never renders pages.

Why are my Web Design Guidelines findings generic?

A failed fetch of command.md is the documented cause. Issue #300 shows the agent then reviews from general knowledge without saying so.

Which is better, Web Design Guidelines or Frontend Design?

They do different jobs. Web Design Guidelines audits existing UI code, while Frontend Design (Recommended, 76) builds new pages.

Does Vercel publish other agent skills?

Yes, including Vercel React best practices, which we have not reviewed. Its skill finder is covered in Vercel's Find Skills verdict.