Which files can I scan with this skill?

You can specify individual files or use file patterns (like src/**/*.tsx) to scan your entire frontend codebase for compliance.

Does it automatically fix the design issues it finds?

It identifies the issues and provides the exact file and line location. You can then use Claude to apply the recommended fixes based on the audit results.

How does this skill stay updated with design standards?

The skill fetches the latest rules directly from the Vercel Web Interface Guidelines repository before each audit, ensuring you always use the most current standards.

What kind of issues does the Web Design Guidelines skill detect?

It focuses on accessibility (a11y), user experience (UX) patterns, and general UI best practices as defined in the fetched guideline documentation.

Web Design Guidelines Auditor

Name: Web Design Guidelines Auditor
Author: monmacllcapp

bymonmacllcapp

0•

Design Tools

Audits frontend code for accessibility, UX, and UI best practices using standardized web interface guidelines.

This skill automates the process of reviewing web interfaces by cross-referencing UI code against industry-standard guidelines. It dynamically fetches the latest design rules from Vercel's Web Interface Guidelines to identify accessibility gaps, UX inconsistencies, and layout issues. By providing feedback in a concise file-and-line format, it enables developers to rapidly iterate on their frontend code and ensure compliance with modern web standards during the development or code review phase.

Key Features

01Provides precise feedback with file and line number references

020 GitHub stars

03Integrates seamlessly with Claude Code for rapid frontend iterations

04Fetches real-time design rules from the latest Web Interface Guidelines source

05Supports specific file selection or pattern-based bulk scanning

06Audits UI code for accessibility compliance and UX best practices

Use Cases

01Auditing a new React component for accessibility before merging a pull request

02Identifying CSS and layout issues that violate standard web interface patterns

03Running a sitewide UX consistency check against modern web standards

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add monmacllcapp/skill-forks web-design-guidelines

For use in Claude.ai and ChatGPT

Download Skill