Skills vercel-labs/agent-skills
web-design-guidelines
- Use it when
- you want UI code reviewed for accessibility, UX and front-end best practices
- It does
- fetches Vercel's latest Web Interface Guidelines, then checks the files you name against every rule
- You get
- terse findings grouped by file, each at a clickable file:line
- Unlike writing-guidelines
- which runs the same kind of review on docs and prose
- Needs
- web access, since the rules are fetched fresh before each review
TLDR
Like writing-guidelines, it's a short wrapper around rules kept elsewhere: the agent fetches them from Vercel's web-interface-guidelines repo before each review, so they can change between runs. You name a file or pattern, or it asks. In October 2026 the rules covered accessibility, focus states, forms, animation, typography, images, performance, navigation, touch, dark mode, localization and copy, written as checks on HTML, CSS and React code. Examples: icon-only buttons need an aria-label, a div with a click handler should be a button, never remove the focus outline without a replacement, never block paste, honor reduced-motion settings, give images a width and height, virtualize lists over 50 items, keep filters and tabs in the URL, and confirm destructive actions. Each finding is one line, the issue and its location, and clean files are marked as passing.
Summarizes the skill at 063bee9.
npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelinesskills.sh page · Source on GitHub · All skills from vercel-labs/agent-skills
- Installs
- 653,191 on skills.sh, Sep 21, 2026
- Repo stars
- 31,405 vercel-labs/agent-skills
- First seen
- Jan 19, 2026 on skills.sh
Weekly values
| Week to | Installs |
|---|---|
| Aug 3 | 18,456 |
| Aug 10 | 18,715 |
| Aug 17 | 18,063 |
| Aug 24 | 21,343 |
| Aug 31 | 24,063 |
| Sep 7 | 19,837 |
| Sep 14 | 18,338 |
| Sep 21 | 20,832 |
| Category |
Taste for interfaces that don't look generated: direction, motion and accessibility. Everything for building software: planning, coding, debugging, design, frameworks, cloud, agents and skills. |
|---|---|
| Type |
A multi-step process the agent follows: interview, debug, run a TDD loop, review. |
| Effect |
Adds no side effects of its own. It shapes how the agent thinks, writes or reviews. Guidelines and routers are always effect:none, even when the task they support edits code. |
| Needs |
Instructions only. Works in any agent that supports skills. |
| Publisher |
A verified publisher on its registry (skills.sh, ClawHub or Tencent SkillHub), or the company or maintainer behind the product the skill operates. |
| Topics |
SKILL.md
From vercel-labs/agent-skills at 063bee9. Checked daily, last changed Oct 20, 2026.
Frontmatter
name: web-design-guidelines
description: 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".
metadata:
author: vercel
version: "1.0.0"
argument-hint: <file-or-pattern>Web Interface Guidelines
Review files for compliance with Web Interface Guidelines.
How It Works
- Fetch the latest guidelines from the source URL below
- Read the specified files (or prompt user for files/pattern)
- Check against all rules in the fetched guidelines
- Output findings in the terse
file:lineformat
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:
- Fetch guidelines from the source URL above
- Read the specified files
- Apply all rules from the fetched guidelines
- Output findings using the format specified in the guidelines
If no files specified, ask the user which files to review.