Web Design Guidelines
Audit UI files against Vercel’s live Web Interface Guidelines before you ship or after a redesign.
Overview
Web Design Guidelines is an agent skill most often used in Ship (also Build) that audits UI code against Vercel’s fetched Web Interface Guidelines and returns file:line findings.
Install
npx skills add https://github.com/vercel-labs/agent-eval --skill web-design-guidelinesWhat is this skill?
- Fetches fresh rules from the official web-interface-guidelines command.md on every run
- Reviews arbitrary files or globs you pass as the argument hint
- Outputs terse file:line findings aligned with the upstream format spec
- Covers accessibility, UX, and web interface best practices in one pass
- Works without bundling stale rule copies—always uses the latest guideline source
- Guidelines are re-fetched from the upstream command.md source on every review run
Adoption & trust: 205 installs on skills.sh; 194 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You shipped or are about to ship UI without a consistent pass against current web interface, accessibility, and UX rules.
Who is it for?
Indie builders with existing UI files who want a repeatable, up-to-date Vercel guideline audit before merge or deploy.
Skip if: Greenfield visual design from scratch, backend-only changes, or teams that already enforce the same rules in CI without agent assistance.
When should I use this skill?
User asks to review UI, check accessibility, audit design, review UX, or check the site against best practices.
What do I get? / Deliverables
You get a guideline-aligned violation list per file and line so you can fix issues before users or launch reviewers hit them.
- Terse file:line violation findings per fetched guideline rules
- Optional prompt to specify files if none were provided
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Pre-launch design and UX review is the natural home for guideline compliance checks that gate quality. Review subphase matches explicit triggers like “review my UI”, accessibility, and best-practice audits.
Where it fits
After building a new settings page, run the skill on `app/settings/**` before opening a PR.
Pre-release audit when a stakeholder asks to ‘check my site against best practices’.
Final UX pass on landing HTML/CSS right before you flip DNS or publish.
How it compares
Use instead of generic “review my CSS” chat when you want the canonical Vercel web-interface rule set and standard output format.
Common Questions / FAQ
Who is web-design-guidelines for?
Solo and small-team frontend builders using Claude Code, Cursor, or similar agents who want structured UI, accessibility, and UX checks tied to Vercel’s public guidelines.
When should I use web-design-guidelines?
During Build when polishing frontend or component files, and during Ship review when you audit design, accessibility, or “best practices” before launch—especially after UI refactors or new flows.
Is web-design-guidelines safe to install?
It reads local files and fetches a public guideline URL; review the Security Audits panel on this Prism page and only grant network access you expect for that fetch.
SKILL.md
READMESKILL.md - Web Design Guidelines
# 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.