How do I specify which files to review?

You can provide specific file paths or patterns as arguments when calling the skill; if omitted, Claude will ask you which files to audit.

Does it handle accessibility checks?

Yes, the fetched guidelines include comprehensive rules for accessibility to ensure your web interface is usable for all users.

What guidelines does this skill use?

It fetches the latest professional Web Interface Guidelines from Vercel Labs to ensure your code follows modern standards and best practices.

Can it fix the UI code automatically?

The skill provides specific fix recommendations in a terse format; you can then ask Claude to apply those suggestions to your files.

Web Interface Design Auditor

Name: Web Interface Design Auditor
Author: pelchers

bypelchers

0•

Design Tools

Audits frontend code against professional web interface guidelines to ensure high-quality UI, UX, and accessibility standards.

The Web Interface Design Auditor skill automates the review of UI code by cross-referencing local files against the industry-standard Vercel Labs web interface guidelines. It helps developers maintain consistency in design-system adherence, accessibility, and user experience by providing precise, line-by-line feedback and actionable fix recommendations. By dynamically fetching the latest rules, it ensures your project stays up to date with modern frontend best practices without manual checklist management.

Key Features

010 GitHub stars

02Automated UI/UX compliance auditing

03Actionable recommendations for design system adherence

04Accessibility and visual quality checks

05Dynamic fetching of latest industry-standard guidelines

06Precise file and line-number reporting

Use Cases

01Ensuring consistent design system implementation across a large frontend codebase

02Reviewing new React components for UX best practices before a pull request

03Auditing legacy code for accessibility compliance and modern design standards

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add pelchers/sessionsaver web-design-guidelines

For use in Claude.ai and ChatGPT

Key Features

010 GitHub stars

02Automated UI/UX compliance auditing

03Actionable recommendations for design system adherence

04Accessibility and visual quality checks

05Dynamic fetching of latest industry-standard guidelines

06Precise file and line-number reporting

Use Cases

01Ensuring consistent design system implementation across a large frontend codebase

02Reviewing new React components for UX best practices before a pull request

03Auditing legacy code for accessibility compliance and modern design standards

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add pelchers/sessionsaver web-design-guidelines

For use in Claude.ai and ChatGPT