How are the design violations reported?

Findings are output in a terse file:line format, making it easy to navigate directly to the code that needs improvement.

Does this skill fetch the latest guidelines automatically?

Yes, it retrieves the most recent rules from the source URL before every review to ensure your code is measured against current best practices.

What standards does this skill use for UI reviews?

The skill fetches and follows the official Web Interface Guidelines maintained by Vercel Labs, ensuring your site meets modern design and accessibility standards.

Can I audit specific files instead of the whole project?

Absolutely. You can provide specific file paths or glob patterns to target your audit to a particular component or directory.

Web Design Guidelines Auditor

Name: Web Design Guidelines Auditor
Author: claudiodearaujo

byclaudiodearaujo

•

Design Tools

Audits web interfaces for compliance with industry-standard design, accessibility, and UX best practices.

The Web Design Guidelines skill enhances Claude's ability to perform high-fidelity UI/UX reviews by dynamically fetching the latest rules from the Vercel Labs Web Interface Guidelines. It allows developers to programmatically scan their frontend code for accessibility violations, layout inconsistencies, and poor user experience patterns. By outputting findings in a concise format, it provides actionable insights that help maintain production-grade design quality across complex web projects.

Key Features

01Evaluates compliance with modern web interaction standards

02Pinpoints violations with precise file and line-number locations

03Performs deep accessibility and UX audits on UI source code

041 GitHub stars

05Fetches real-time design rules from Vercel Labs guidelines

06Supports targeted reviews via specific file patterns

Use Cases

01Standardizing design patterns across a collaborative frontend repository

02Conducting a pre-deployment accessibility audit for React or Vue components

03Quickly identifying UX anti-patterns in legacy UI code

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/sistema-de-narra-o-de-livro web-design-guidelines

For use in Claude.ai and ChatGPT

Download Skill