PlugWiki

web-design-guidelines Skill for Claude Code: Review UI Code Against Vercel's Rules

Reviews your UI files against Vercel's Web Interface Guidelines and lists the problems as file:line findings.

Installs
812.6K
on skills.sh
Stars
33.4K
on GitHub
Updated
Oct 2026
last repo commit

web-design-guidelines checks UI code for accessibility, UX and interface issues. Ask it to "review my UI", "check accessibility" or "audit design" and give it a file or pattern. It reads those files and compares them with the current guidelines.

The rules are not stored in the skill. Every review it fetches the latest guidelines from a raw GitHub URL, so it needs web access and uses whatever the guidelines file says about the output. It bundles no other files.

Good for

  • Front-end developers who want a quick accessibility and UX audit
  • Reviewers checking a pull request that changes UI
  • Teams that want the same rules applied every time

Install web-design-guidelines

Claude Code

  1. 1

    Copy this prompt.

    Install the web-design-guidelines skill in Claude Code. Run this command:

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

Then check that it loaded and tell me how to use it.
  2. 2

    Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

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".

Sections in SKILL.md

  1. How It Works
  2. Guidelines Source
  3. Usage

Key facts

Author
Vercel (vercel-labs)
Repo
vercel-labs/agent-skills
Installs on skills.sh
812,640 (Nov 2, 2026)
GitHub stars
33,354 (Nov 2, 2026)
Last repo commit
Oct 28, 2026
Files next to SKILL.md
None
skills.sh audits
Gen Agent Trust Hub pass, Socket warn, Snyk pass
Fetches
The guidelines file from vercel-labs/web-interface-guidelines on every review

What it includes

  • Downloads the latest rules from raw.githubusercontent.com using a web fetch

    Network · Fetch guidelines

  • Reads the file or pattern you give it, or asks which files to review

    Files · Read your files

  • Applies every fetched rule and prints findings as file:line

    Read · Check and report

From the official docs

Permissions

Medium risk

What it can do

  • Read your data
  • Create and change things
  • Delete things
  • Read-only mode

Watch out for

  • It follows instructions from a file it downloads

    The rules come from a remote file at review time. Trust the vercel-labs repo before you use it. github.com

  • Your client may ask to allow the web fetch

    Approve the fetch for the raw.githubusercontent.com URL in the SKILL.md only. github.com

  • skills.sh shows a Socket warning for this skill

    Read the SKILL.md before you install if you must pass a security review. skills.sh

Technical details
Talks toraw.githubusercontent.com, to fetch the guidelines on each review
Scopes

  • The UI files you point it at

Questions

What does web-design-guidelines do?

It reviews UI code against Vercel's Web Interface Guidelines and prints terse file:line findings. You pass a file or a pattern.

How do I install it?

Use the install box at the top. The skill is one short SKILL.md.

Does it need an API key?

No key is named. It does need the agent to fetch a URL, so your client must allow web fetching.

Why does it fetch rules every time?

The SKILL.md tells the agent to fetch fresh guidelines before each review. It says the fetched content holds all the rules and the output format, so the skill itself stores no rules.

What if I am offline or the URL is blocked?

The SKILL.md has no fallback. Without the guidelines file the agent has no rules to apply, so allow the fetch or review something else.

Is it safe?

It reads the files you point at and downloads a rules file, and the rules text then steers the agent. The skill trusts that remote file, so you rely on the vercel-labs repo. Skills.sh audits: Gen Agent Trust Hub pass, Socket warn, Snyk pass.

Information

updated Nov 2, 2026

Repository
vercel-labs/agent-skills
Folder
skills/web-design-guidelines

vercel-labs/agent-skillsskills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 2
  1. web-design-guidelines SKILL.md · github.com
  2. web-design-guidelines on skills.sh · skills.sh

Updated Nov 2, 2026.