Web Design Guidelines
Designby vercel-labs
2/3 audits passMIT
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".
Web Design Guidelines is a Vercel Labs skill (publisher vercel-labs, MIT licence) that reviews UI code for compliance with Vercel's Web Interface Guidelines. Its workflow is short: fetch the latest guidelines from the vercel-labs/web-interface-guidelines repository on GitHub before each review, read the files or pattern you specify (or ask which files to review), check them against every rule in the fetched document, and report findings in a terse file:line format. The rules themselves are not bundled in the skill; they live in the fetched document, so the review always uses the current published version.
Use it when you ask an agent to "review my UI", check accessibility, audit design or check a site against best practices. It reviews code you point it at; it does not redesign pages or apply fixes on its own, and it needs web access to fetch the guidelines.
This is mainly for coding agents such as Claude Code working in a front-end codebase. BusinessMCP can import its instructions as a playbook, though the review depends on fetching the external guidelines at run time.
What you can do with it
- Review a React component folder for interface issues
- Check a page's markup for accessibility problems
- Audit a UI before release against published guidelines
- Get terse file:line findings for a design review
Run it on your business data
Imported into BusinessMCP, Web Design Guidelines becomes a playbook your AI business analyst applies to your pages’ heatmaps and session replays.
Use Web Design Guidelines in BusinessMCPInstall it in a coding agent
One command adds Web Design Guidelines to your project.
npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelinesHow we vetted it
- Source
- vercel-labs/agent-skills at 063bee9
- Licence
- MIT
- Security audits (skills.sh)
- Gen Agent Trust Hub: Pass · Socket: Warn · Snyk: Pass
- Bundled scripts
- None, instructions only
Checked 2026-09-25 against its skills.sh listing. How we vet skills
Related skills
All skillsFrontend Design
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
Impeccable
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface.
Vercel React Best Practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns.
Frequently asked questions
Where do the rules come from?
The skill fetches them fresh from the vercel-labs/web-interface-guidelines repository on GitHub before each review, so they are not stored in the skill itself.
What does the output look like?
Findings in a terse file:line format, following the output rules in the fetched guidelines.
How do I install Web Design Guidelines?
Run `npx skills add vercel-labs/agent-skills --skill web-design-guidelines`, or import it from the BusinessMCP dashboard as a playbook.
Run Web Design Guidelines against your whole business
Free plan, no credit card.
Use Web Design Guidelines in BusinessMCP