Web Design Guidelines
- 509k installs
- 29.7k repo stars
- Updated July 24, 2026
- vercel-labs/agent-skills
web-design-guidelines is an agent skill that reviews frontend code for compliance with Vercel's Web Interface Guidelines and reports file:line findings.
About
web-design-guidelines is a Claude Code skill that audits existing frontend code against Vercel's Web Interface Guidelines. When a developer asks to review a UI, check accessibility, or audit UX, it fetches the latest guidelines from a live source URL, reads the specified files or pattern, checks every rule, and reports findings in a terse file:line format. Developers use it during pull-request review or pre-release QA to turn subjective design opinions into a repeatable, fetch-fresh rule check. It only reviews code and does not scaffold or generate UI.
- Audits UI code against Vercel Web Interface Guidelines
- Fetches fresh rules from a source URL on every run
- Reports findings in terse file:line format
- Scoped by a file-or-pattern argument
Web Design Guidelines by the numbers
- 509,313 all-time installs (skills.sh)
- +19,348 installs in the week ending Aug 2, 2026 (Skillselion tracking)
- Ranked #2 of 1,888 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: MEDIUM risk (skills.sh audit)
- Data as of Aug 2, 2026 (Skillselion catalog sync)
web-design-guidelines capabilities & compatibility
Free; needs network access to fetch guidelines, no API key.
- Capabilities
- ui audit · accessibility review · ux review · design review
- Works with
- vercel
- Use cases
- web design · ui design · code review
- Runs
- Runs locally
- Pricing
- Free
What web-design-guidelines says it does
Review files for compliance with Web Interface Guidelines.
Output findings in the terse `file:line` format
Fetch fresh guidelines before each review:
npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelinesAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 509k |
|---|---|
| repo stars | ★ 29.7k |
| Security audit | 2 / 3 scanners passed |
| Last updated | July 24, 2026 |
| Repository | vercel-labs/agent-skills ↗ |
How do I catch accessibility and UX regressions in my UI code without relying on subjective design opinions?
web-design
Who is it for?
Frontend developers who want an objective accessibility and UX review of UI code before merging or releasing.
Skip if: Generating or scaffolding new UI; it only reviews existing files.
When should I use this skill?
Use when asked to review a UI, check accessibility, audit design, review UX, or validate a site against best practices.
What you get
A list of file:line findings where the UI code violates the current Web Interface Guidelines.
- file:line findings report of guideline violations
By the numbers
- 4-step review workflow (fetch, read, check, output)
Files
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.mdUse 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.
Guides
- The web-design-guidelines Skill: Audit Your UI Against Vercel's Interface Guidelines
web-design-guidelines audits frontend code against Vercel's Web Interface Guidelines, fetching the latest rules at run time and reporting terse file:line findings. 440,517 developers have installed it (skills.sh, 2026-07-06), making it the standard automated UI review step.
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112k
Design GuideGives an agent Paperclip's design conventions and UI guidelines so generated interfaces and work products stay on-brand and visually consistent.243k9Forks & variants (36)
Web Design Guidelines has 36 known copies in the catalog totaling 22.5k installs. They canonicalize to this original listing.
- antfu - 17.3k installs
- bytedance - 1.9k installs
- davila7 - 576 installs
- uni-helper - 526 installs
- vercel-labs - 314 installs
How it compares
Use web-design-guidelines for Vercel UI/UX rule audits; use performance skills for bundle and rendering optimization.
FAQ
What does web-design-guidelines check?
It reviews UI code against Vercel's Web Interface Guidelines for consistency, accessibility, and UX quality, reporting findings in file:line format.
Where do the rules come from?
It fetches the latest guidelines fresh from a source URL (vercel-labs/web-interface-guidelines) before each review rather than bundling a static ruleset.
Can it fix the issues it finds?
No. It only reviews files and outputs findings; it does not modify or scaffold code.
Is Web Design Guidelines safe to install?
skills.sh reports 2 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.