Can I run this on my entire project at once?

Yes, by providing a file pattern or directory, the skill can scan multiple files to perform a comprehensive audit of your site's design.

What frontend files can I audit with this skill?

You can audit any UI-related files, including React components, HTML, CSS, or entire directories using file patterns.

Is this tool useful for accessibility (a11y) testing?

Yes, checking accessibility compliance is one of the core functions of the Web Interface Guidelines audit.

How does this skill stay up to date with the latest design standards?

The skill fetches the latest Web Interface Guidelines directly from the Vercel Labs repository before every review, ensuring you always audit against the most current rules.

Does it provide specific line numbers for identified issues?

Yes, the skill outputs findings in a concise file:line format, making it easy to jump directly to the code that needs fixing.

Web Design Guidelines Auditor

Name: Web Design Guidelines Auditor
Author: Jst-Well-Dan

byJst-Well-Dan

•

Design Tools

Audits frontend code for accessibility, UX, and UI compliance using Vercel's official Web Interface Guidelines.

This skill automates the process of reviewing web interfaces by fetching the most recent design standards directly from Vercel Labs and applying them to your local project. By scanning your codebase against these rules, it identifies accessibility gaps, UX inconsistencies, and UI departures from industry best practices. It provides developers with actionable, line-specific feedback to ensure production-grade frontend quality without the need for manual design audits.

Key Features

01Automates design system consistency checks across frontend codebases

02Supports specific file targeting or pattern-based folder scanning

03Generates concise findings in a developer-friendly file:line format

046 GitHub stars

05Conducts comprehensive audits for UI/UX compliance and accessibility

06Fetches real-time design rules from Vercel Labs' official guidelines

Use Cases

01Reviewing a shared component library to ensure it adheres to modern web standards

02Auditing a new landing page for accessibility and design best practices before deployment

03Performing automated UX health checks during the development of complex web applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jst-well-dan/skill-box web-design-guidelines

For use in Claude.ai and ChatGPT

Download Skill