web-design-guidelines
vercel-labs/agent-skills
Review UI code against Web Interface Guidelines for accessibility, UX, and design best practices
What is web-design-guidelines?
A coding agent skill that fetches the latest Web Interface Guidelines and audits your UI code for compliance. It checks specified files or patterns against all rules from the guidelines source and reports findings in a concise file:line format. Useful for accessibility checks, UX audits, and design reviews.
- Fetches the latest Web Interface Guidelines from a remote source before each review
- Reads specified files or file patterns provided by the user
- Checks UI code against all rules defined in the fetched guidelines
- Reports findings in a terse file:line format
- Prompts the user for files or patterns if none are specified
How to install web-design-guidelines
npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines- A coding agent that supports SKILL.md packages (e.g., Claude Code, Cursor)
- UI source files accessible to the agent (HTML, JSX, TSX, CSS, etc.)
- Network access so the agent can fetch guidelines via WebFetch
How to use web-design-guidelines
- 1.Install the skill: npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines
- 2.Ask the agent to review your UI, e.g. 'review my UI' or 'audit design'
- 3.Provide a file path or glob pattern as an argument, e.g. components/Button.tsx or src/**/*.tsx
- 4.The agent fetches the latest guidelines from the remote source URL
- 5.The agent reads your specified files
- 6.The agent checks each file against all fetched rules
- 7.Review the output, which lists findings in file:line format
- 8.Fix flagged issues and re-run the review to confirm compliance
Use cases
- Auditing a React or HTML component for accessibility issues
- Checking a full frontend codebase against design best practices
- Reviewing UI code before a pull request or deployment
- Identifying UX compliance issues in specific files
- Running a quick design audit on a new page or feature
- Frontend developers who want automated UI code reviews
- Designers who need to verify implementation matches guidelines
- Teams enforcing accessibility or UX standards in CI or code review
- Developers building with Vercel or Next.js who follow Vercel's design guidelines
- Anyone asked to audit a site against web interface best practices
web-design-guidelines FAQ
Rules are fetched fresh from a remote URL before each review, so the guidelines are always up to date.
Any UI source files the agent can read, such as HTML, JSX, TSX, or CSS files. The skill does not restrict file types explicitly.
The agent will prompt you to provide the files or pattern you want reviewed.
Findings are reported in a terse file:line format as specified by the fetched guidelines.
No, the skill only reviews and reports findings. Fixing issues is left to the developer.
Full instructions (SKILL.md)
Source of truth, from vercel-labs/agent-skills.
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.
Related skills
More from vercel-labs/agent-skills and the wider catalog.
vercel-react-best-practices
70 React/Next.js performance rules from Vercel Engineering, prioritized by impact for writing, reviewing, and refactoring code.
vercel-composition-patterns
React composition patterns to scale components without boolean prop proliferation.
vercel-react-native-skills
React Native and Expo best practices for performant mobile apps, animations, and native integrations.
deploy-to-vercel
Deploy applications to Vercel with git integration or direct CLI deployment.
vercel-react-view-transitions
Implement smooth, native-feeling animations using React's View Transition API without third-party libraries.
vercel-cli-with-tokens
Deploy and manage Vercel projects using token-based authentication without interactive login.