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

•

Design Tools

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.

Key Features

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

Use Cases

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

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add dontfretbrett/portfolio web-design-guidelines

For use in Claude.ai and ChatGPT

Download Skill