Which file formats does it support?

It is designed to review UI-related code including React (.jsx, .tsx), HTML, and CSS files.

Can I use it for accessibility testing?

Yes, the skill specifically checks for common accessibility violations and provides feedback on how to improve inclusive design.

How do I trigger a design audit?

You can ask Claude to 'review my UI', 'check my site against best practices', or 'audit design' followed by the file path or pattern.

What guidelines does this skill use?

It fetches the latest rules directly from Vercel's open-source Web Interface Guidelines repository to ensure your UI matches modern standards.

Web Interface Guidelines Reviewer

Name: Web Interface Guidelines Reviewer
Author: vercel-labs

byvercel-labs

•

15,903

•

Design Tools

Audits frontend code against Vercel’s Web Interface Guidelines to ensure high-quality UX, accessibility, and design consistency.

This skill empowers Claude to perform automated design audits by fetching the latest industry-standard Web Interface Guidelines. It analyzes UI code—including React, HTML, and CSS—to identify accessibility issues, UX anti-patterns, and styling inconsistencies. By providing precise file and line-number references, it helps developers maintain professional-grade frontend quality while adhering to modern web best practices without needing to manually cross-reference documentation.

Key Features

01Enforces consistent UI patterns across modern web applications

02Fetches real-time design rules from official Vercel guidelines

03Outputs findings in a developer-friendly file:line format

0415,903 GitHub stars

05Scans specific files or directories for design compliance

06Identifies accessibility (a11y) violations and UX improvements

Use Cases

01Performing a bulk UX and design review across an entire legacy frontend project

02Checking UI code against industry-standard best practices during the development phase

03Auditing a new React component for accessibility before merging a pull request

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add vercel-labs/agent-skills web-design-guidelines

For use in Claude.ai and ChatGPT

Download Skill