web-design-guidelines

An agent skill by vercel-labs, from vercel-labs/agent-skills. Tags: accessibility, debugging, design, visual-art, web.

What it does

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

Install

With the skills CLI, which installs into Claude Code, Codex, Cursor and other agents:

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

Or copy the skill folder into Claude Code's skills directory by hand (~/.claude/skills for every project, or .claude/skills inside one):

git clone --depth 1 https://github.com/vercel-labs/agent-skills
cp -r agent-skills/skills/web-design-guidelines ~/.claude/skills/web-design-guidelines

Safety box score

Grade B, low risk: 25 of 100 risk points, rated 2026-10-17. The grade rates what the skill and its scripts can reach on the machine of whoever installs it, across eight categories from shell execution to secrets access. How the score works.

This skill is a read-only UI review helper, but it reaches out to a live GitHub URL for its rules every time it runs. The main risks are external dependency on mutable remote instructions and the fact that the actual review policy is not bundled with the skill.

Category levels, from 0 (none) to 3 (high)
Category	Level	Why
Code & shell execution	0 (none)	No shell commands, scripts, or code evaluation are defined in `SKILL.md`.
Network access	2 (moderate)	It explicitly says to fetch rules from `https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md` with WebFetch on every review.
Filesystem reach	1 (low)	The skill only tells the agent to read the specified files or pattern; it does not describe writes or deletes outside the project.
Secrets & credentials	0 (none)	No credential, token, password, or key access is described.
Privilege & persistence	0 (none)	No sudo, global install, service registration, or shell/OS setting changes are requested.
Instruction hijack surface	2 (moderate)	It makes remote content an instruction source: "The fetched content contains all the rules and output format instructions" and "Apply all rules from the fetched guidelines".
Irreversible actions	0 (none)	The skill only reviews files and reports findings; it does not publish, deploy, pay, delete, or send anything.
Transparency	1 (low)	The effective rules live in an external file on a live GitHub `main` branch, so the full behavior is not contained in the skill bundle.

Before installing

Inspect the live `command.md` URL and decide whether you trust a mutable `main` branch source.
Try a dry run in a sandbox with network disabled to see how the skill behaves when the fetch fails.
Use it only for non-sensitive reviews until you have read the remote guideline file it depends on.

Rated 2026-10-17 by an automated review of 1 file from the skill's repository.

Source

Repository: vercel-labs/agent-skills (all skills from this repository)
Path: skills/web-design-guidelines/SKILL.md
Branch: main
Updated: 2026-09-19

frontend-ui-engineering — Builds production-quality, accessible, responsive user-facing UIs.
algorithmic-art — Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code.
antfu-design — antfu-style design conventions, broadened.
archify — Create polished, validated architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as explorable standalone HTML with inline SVG.
browser-testing-with-devtools — Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser.
customer-journey-map — Create an end-to-end customer journey map with stages, touchpoints, emotions, pain points, and opportunities.