Do I need to update the guidelines manually?

No, the skill is designed to fetch fresh guidelines before each review, ensuring you always test against the most recent version.

What guidelines does this skill use?

It fetches the latest Web Interface Guidelines directly from Vercel's open-source repository to ensure your code follows modern industry standards.

Can I scan specific files or my entire project?

Yes, you can provide specific file paths or use patterns (like glob patterns) to audit specific components or your entire frontend directory.

What format are the findings delivered in?

Findings are output in a terse 'file:line' format, allowing you to jump directly to the specific code that needs adjustment.

Does it help with accessibility compliance?

Absolutely. The skill specifically checks for accessibility best practices as part of its comprehensive UI audit.

Web Interface Design Auditor

Name: Web Interface Design Auditor
Author: DontFretBrett

byDontFretBrett

•

デザインツール

Audits frontend code against Vercel’s Web Interface Guidelines to ensure high-quality UI, UX, and accessibility standards.

This Claude Code skill automates the process of reviewing web interfaces for compliance with industry-standard design principles. By fetching the latest guidelines from Vercel's authoritative source, it performs deep scans of your UI code to identify issues related to accessibility, layout, and user experience. It provides concise, actionable feedback in a standardized format, making it an essential tool for developers aiming to ship production-grade, accessible web applications without manual design audits.

主な機能

01Fetches real-time design rules from Vercel’s Web Interface Guidelines

02Ensures consistency across frontend components and layouts

03Supports pattern-based file scanning for bulk reviews

04Provides precise line-by-line feedback for easy fixes

051 GitHub stars

06Performs automated accessibility and UX audits on local files

ユースケース

01Reviewing a new UI component for accessibility compliance before merging

02Quickly identifying UX bottlenecks and interface errors in legacy frontend code

03Auditing an entire site's design consistency against Vercel best practices

主な機能

01Fetches real-time design rules from Vercel’s Web Interface Guidelines

02Ensures consistency across frontend components and layouts

03Supports pattern-based file scanning for bulk reviews

04Provides precise line-by-line feedback for easy fixes

051 GitHub stars

06Performs automated accessibility and UX audits on local files

ユースケース

01Reviewing a new UI component for accessibility compliance before merging

02Quickly identifying UX bottlenecks and interface errors in legacy frontend code

03Auditing an entire site's design consistency against Vercel best practices