Can I scan multiple files at once?

Yes, the skill supports glob patterns, allowing you to audit entire directories or specific file types like .tsx or .css.

How is the audit output presented?

Findings are presented in a concise file:line format, allowing developers to jump directly to the code that needs fixing.

Do I need to manually update the rules?

No, the skill automatically uses WebFetch to retrieve fresh guidelines every time you trigger a review.

Where does this skill get its design rules?

The skill fetches the latest guidelines directly from the Vercel Labs web-interface-guidelines repository before each review.

Does this skill help with web accessibility?

Yes, the guidelines include comprehensive checks for accessibility best practices to ensure your UI is inclusive and compliant.

Web Interface Guidelines Auditor

Name: Web Interface Guidelines Auditor
Author: ng-hai

byng-hai

•

设计工具

Audits UI code against industry-standard Web Interface Guidelines to ensure design consistency and accessibility compliance.

The Web Interface Guidelines skill empowers Claude to perform automated UI and UX reviews by fetching the latest design standards directly from Vercel Labs. By analyzing specific files or directories using glob patterns, it identifies violations in layout, typography, and accessibility, providing feedback in a developer-friendly format. This skill is ideal for frontend developers who want to maintain production-grade quality and ensure their applications adhere to modern web interface best practices without manual checklist management.

主要功能

014 GitHub stars

02Accessibility and design system compliance auditing

03Dynamic fetching of the latest live design guidelines

04Line-specific reporting for rapid troubleshooting

05Automated UI/UX code reviews based on Vercel Labs standards

06Support for glob patterns and multi-file analysis

使用场景

01Auditing existing frontend codebases for accessibility violations

02Reviewing new feature UI code for design consistency before a PR

03Enforcing modern web interface standards across a team of developers

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ng-hai/dotclaude web-design-guidelines

For use in Claude.ai and ChatGPT

Download Skill