Can it help with accessibility compliance?

Yes, a core function of this skill is to audit your code for accessibility (a11y) violations and suggest inclusive design patterns.

Do I need to update the guidelines manually?

No, the skill automatically uses WebFetch to retrieve the most up-to-date rules from the source before starting any review.

What guidelines does this skill use?

It fetches the latest rules directly from the Vercel Labs official Web Interface Guidelines repository to ensure your UI meets modern standards.

How does the skill report findings?

The skill provides a terse 'file:line' output format, making it easy for developers to jump directly to the code that needs fixing.

Which file types can I audit?

You can audit any UI-related files, including React, Vue, Svelte components, or standard HTML and CSS, by providing a specific file or directory pattern.

Web Interface Guidelines Auditor

Name: Web Interface Guidelines Auditor
Author: dazeb

bydazeb

•

Design Tools

Audits UI code against professional web design standards, accessibility rules, and UX best practices.

This skill enables Claude to perform comprehensive UI/UX audits by fetching the latest industry-standard rules from Vercel's Web Interface Guidelines. It helps developers ensure their frontend code is accessible, performant, and visually consistent by scanning files for specific anti-patterns and design debt. By providing precise, line-specific feedback, it streamlines the code review process and helps maintain high-quality user interfaces across complex web projects.

Key Features

01Automated accessibility (a11y) and WCAG compliance checks

02Support for targeted reviews via custom file patterns

03Identification of UX anti-patterns and visual design flaws

04Real-time fetching of latest Vercel web interface guidelines

054 GitHub stars

06Precise file-and-line reporting for rapid debugging

Use Cases

01Auditing new frontend components for accessibility compliance

02Automating design reviews during the CI/CD or PR process

03Reviewing complex UI layouts for visual consistency and UX best practices

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add dazeb/claudeplaybook web-design-guidelines

For use in Claude.ai and ChatGPT

Download Skill