What standards does this skill use for reviews?

This skill uses Vercel's official Web Interface Guidelines, which focus on high-quality UI/UX, performance, and accessibility.

Does it provide the latest design rules?

Yes, the skill fetches the most recent version of the guidelines from the source repository before every review session.

Can I use this for accessibility auditing?

Absolutely. One of its primary functions is checking for accessibility compliance and identifying areas where the user experience can be improved.

What is the output format for the findings?

The findings are presented in a terse 'file:line' format, making it easy for developers to jump directly to the code that needs adjustment.

Web Interface Design Reviewer

Name: Web Interface Design Reviewer
Author: phrazzld

byphrazzld

•

Design Tools

Audits frontend code against Vercel's Web Interface Guidelines to ensure accessibility, UX consistency, and design excellence.

The Web Interface Design Reviewer skill empowers developers to align their UI code with professional design standards by automatically fetching and applying Vercel's authoritative Web Interface Guidelines. By analyzing specific files or code patterns, it identifies accessibility gaps, UX inconsistencies, and styling violations, providing actionable feedback in a concise format. This tool is essential for teams looking to maintain high design quality and accessibility compliance without the need for manual, time-consuming audits.

Key Features

012 GitHub stars

02Support for targeted file patterns or full-directory reviews

03Actionable reporting with precise file and line-number references

04Automated UI/UX audits based on Vercel's design standards

05Comprehensive accessibility compliance checking

06Real-time fetching of the latest Web Interface Guidelines

Use Cases

01Performing a final design and accessibility audit before a production release

02Ensuring frontend code adheres to modern UX best practices during development

03Automating code reviews to catch common interface and styling mistakes early

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add phrazzld/claude-config web-design-guidelines

For use in Claude.ai and ChatGPT

Download Skill