What is the web-design-guidelines skill?
The web-design-guidelines skill is a single SKILL.md in Vercel's vercel-labs/agent-skills repo. When you ask your agent to review a UI, it fetches the current Web Interface Guidelines, reads your files, checks them against every rule, and prints findings as file:line lines. It reviews code and does not generate designs.
The web-design-guidelines skill is a folder in Vercel's public vercel-labs/agent-skills repository. It holds one SKILL.md. The file does not contain the rules itself. It tells your agent where to fetch them and how to report the results.
The rules live in Vercel's separate web-interface-guidelines repository, in a file called command.md. The skill tells the agent to fetch that file before every review, so the checklist stays current without you updating the skill.
What changes in your agent's output
- The agent audits the files you name instead of free-styling a review. If you give no file or pattern, it asks which files to check.
- Findings come back grouped by file, one issue per line, in a file:line format that editors can turn into a clickable link.
- A file with no issues gets a plain pass mark instead of filler praise.
- Concrete rules replace taste. An icon-only button needs an aria-label, transition: all is flagged, and a div with a click handler should be a button.
What the rules cover
- Accessibility: labels on form controls, aria-live for async updates, semantic HTML before ARIA and a skip link for the main content.
- Focus: visible focus rings, :focus-visible over :focus, and no outline removal without a replacement.
- Forms: autocomplete and the right input types, paste never blocked, inline errors and focus on the first error.
- Motion: honor prefers-reduced-motion and animate only transform and opacity.
- Images and performance: explicit width and height, lazy loading below the fold and virtualized long lists.
Who the web-design-guidelines skill is for
Best for
- Reviewing a component or page before merge. Many rules use JSX props such as htmlFor and onKeyDown, so React and Next.js code fits best.
- A quick accessibility and UX pass on a page your agent just built.
- Teams that want one shared checklist instead of each reviewer's taste.
Not for
- Choosing a visual direction, palette or layout. It audits code and does not design. For a plan-first build, see frontend-design.
- Offline setups. The skill fetches its rules over the network on each review, so the agent needs web access.
- Matching a Figma file. It reads code, not screenshots.
- A scored report. The output is a terse list of findings, not a rating.
Use it with UiChemy
The skill reviews code, so it works on whatever your agent built. Run it on a page's front-end code, then bring the build into WordPress with UiChemy AI to WordPress as an editable page. Click Get Started on uichemy.com. For a deeper audit, see fixing-accessibility.
How to install Web Design Guidelines Skill: Review UI Code
git clone https://github.com/vercel-labs/agent-skills.gitClone the repository
Run
git clone https://github.com/vercel-labs/agent-skills.git. The skill sits in the skills/web-design-guidelines folder.Copy the skill folder
For Claude Code, the repo's AGENTS.md gives
cp -r skills/web-design-guidelines ~/.claude/skills/. For another agent, copy the same folder to wherever that agent loads skills from. For claude.ai, AGENTS.md says to add the skill to project knowledge or paste SKILL.md into the conversation.Allow network access
The skill fetches its rules from raw.githubusercontent.com on each review, so the agent needs web access. AGENTS.md says to add required domains in the claude.ai capabilities settings where that applies.
Ask for a review
Use one of the trigger phrases from the skill description, such as review my UI, check accessibility or audit design, and name a file or pattern.
Check that it loaded
Ask the agent to review one small component. It should fetch the guidelines, read the file and answer with file:line findings, or a pass mark if the file is clean.
Key features
- Rules fetched at review timeSKILL.md tells the agent to fetch command.md from Vercel's web-interface-guidelines repository before each review, so a rule change reaches you without reinstalling the skill.
- File or pattern argumentThe skill takes a file or a pattern as its argument. With none given, the agent asks which files to review.
- Accessibility rulesIcon-only buttons need an aria-label, form controls need a label, images need alt text, and a div with an onClick should be a button or a link.
- Focus and keyboardInteractive elements need a visible focus style. Removing the outline without a replacement is flagged, and :focus-visible is preferred over :focus.
- Forms and inputsInputs need autocomplete and a meaningful name, the correct type and inputmode, and inline errors. Blocking paste is listed as an anti-pattern.
- Motion and performanceHonor prefers-reduced-motion, animate transform and opacity only, never use transition: all, give images explicit dimensions and virtualize lists over 50 items.
- Typography and copyCurly quotes, a real ellipsis character, tabular numbers for number columns, balanced headings and specific button labels such as Save API Key.
- Dark mode and localeSet color-scheme for dark themes, match the theme-color meta tag to the page, and use Intl.DateTimeFormat and Intl.NumberFormat instead of hardcoded formats.
- Terse file:line outputFindings are grouped by file with one short line each and a line number, so you can jump to every issue. A clean file shows a pass mark.
Frequently asked questions
What is the web-design-guidelines skill?
It is a skill in Vercel's vercel-labs/agent-skills repository, made of one SKILL.md. It makes your agent review UI code against Vercel's Web Interface Guidelines. The agent fetches the rules, reads the files you name and reports violations as short file:line findings, grouped by file.
How do I install the web-design-guidelines skill?
Clone vercel-labs/agent-skills and copy the skills/web-design-guidelines folder into the place your agent loads skills from. For Claude Code the repo documents cp -r skills/web-design-guidelines ~/.claude/skills/. Then ask for a review with a phrase like review my UI or audit design, and name a file.
Does the web-design-guidelines skill need internet access?
Yes. SKILL.md tells the agent to fetch the latest guidelines from a raw GitHub URL before each review and to use a web fetch tool for it. If your agent runs without network access, or blocks that domain, it cannot load the rules and the review will not work as designed.
Which AI coding agents can use the web-design-guidelines skill?
The repo's AGENTS.md documents a copy path for Claude Code and a route for claude.ai, and the README talks about an agent in general without listing others. Another agent that loads SKILL.md folders and can fetch a URL may work, but the repo does not confirm it.
What does the skill check?
The README lists accessibility, focus states, forms, animation, typography, images, performance, navigation and state, dark mode and theming, touch and interaction, and locale handling. It calls them 100-plus rules. Examples include aria-label on icon buttons, prefers-reduced-motion, explicit image dimensions and Intl formatting for dates and numbers.
What is the difference between web-design-guidelines and frontend-design?
Web-design-guidelines audits code you already have against a fixed checklist and reports findings. frontend-design guides an agent to plan and build a distinctive interface from a brief. Use one after the other: build with a design skill, then review the result with this one.
Does the skill fix the issues it finds?
SKILL.md only asks the agent to output findings in the guidelines' format. It does not tell the agent to edit your files. After the report, you can ask the agent to fix the listed items, and re-run the review on the same files to confirm they pass.
What license does the web-design-guidelines skill use?
The repository README states MIT at the end. GitHub's license field for the repo is empty, so the MIT claim rests on the README alone. Check the repository again before you redistribute the skill folder inside a product.