What is the output format of the audit?

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

Does it automatically fix the design issues it finds?

The skill identifies issues and provides specific file and line references. You can then use Claude's coding capabilities to apply the recommended fixes based on those results.

Can I use this for specific frontend frameworks like React or Vue?

Yes, this skill is framework-agnostic. It analyzes the underlying web patterns in your source files regardless of the library you are using.

Where does the skill get its design rules?

The skill fetches the most recent Web Interface Guidelines directly from Vercel's official repository before every audit to ensure your code is checked against the latest industry standards.

Web Design Guidelines Auditor

Name: Web Design Guidelines Auditor
Author: quang-pham-dev

byquang-pham-dev

•

Design Tools

Audits web interfaces for compliance with modern UX, accessibility, and design best practices.

The Web Design Guidelines skill empowers Claude to perform comprehensive UI reviews by fetching industry-standard design rules directly from Vercel's official web interface guidelines. It analyzes your frontend code for accessibility violations, UX inconsistencies, and layout flaws, providing precise file-and-line feedback. This skill is ideal for developers looking to automate the design review process and ensure their projects meet high-quality, production-ready standards without manual auditing.

Key Features

01Automated accessibility (a11y) and UX compliance checking

02Dynamic retrieval of latest Vercel Web Interface Guidelines

03Precise file-and-line reporting for rapid debugging

04Framework-agnostic analysis of frontend source code

052 GitHub stars

06Support for targeted file patterns or full-site audits

Use Cases

01Automating design debt identification during the development workflow

02Reviewing new UI components for adherence to design system best practices

03Conducting accessibility audits before deploying to production

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add quang-pham-dev/quangpham.dev web-design-guidelines

For use in Claude.ai and ChatGPT

Download Skill