Does it support accessibility checks?

Yes, the guidelines include rules for accessibility, ensuring your site meets modern inclusive design standards.

What format are the findings reported in?

Findings are output in a terse 'file:line' format, allowing you to jump directly to the relevant code in your editor.

How do I trigger a design audit?

Simply ask Claude to 'review my UI' or 'check my site against best practices' followed by the files you want to inspect.

Can I review specific files or the entire project?

Yes, you can provide a specific file path, a directory, or a file pattern (like *.jsx) for the skill to analyze.

Where does this skill get its design rules from?

It fetches the most up-to-date rules directly from Vercel Labs' official Web Interface Guidelines repository before each audit.

Web Interface Guidelines Reviewer

Name: Web Interface Guidelines Reviewer
Author: nech-ai

bynech-ai

•

Design Tools

Reviews frontend code against modern web interface standards and accessibility best practices to ensure high-quality UI design.

The Web Design Guidelines skill automates UI audits by fetching the latest industry standards from Vercel Labs and applying them to your local codebase. It identifies accessibility issues, layout inconsistencies, and design system violations, providing precise file and line-number feedback. This tool is essential for developers who want to maintain professional-grade frontend quality, streamline code reviews, and ensure their sites adhere to industry-leading UX principles without manual checklist verification.

Key Features

01Automated compliance checking against Vercel Labs' Web Interface Guidelines

02Comprehensive accessibility and layout auditing

03Precise file-and-line reporting for rapid debugging

045 GitHub stars

05Support for custom file patterns and specific UI directories

06Dynamic fetching of the latest UI/UX standards before every review

Use Cases

01Auditing a React component for accessibility and design consistency before a PR

02Ensuring new frontend implementations match established industry UI patterns

03Running a full-site design review to identify departures from best practices

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add nech-ai/proxed web-design-guidelines

For use in Claude.ai and ChatGPT

Download Skill