Does this skill replace manual QA?

It serves as a powerful automated first pass to catch common design and accessibility issues, though manual verification is still recommended for complex interactions.

What does the Web Interface Guidelines skill do?

It audits your UI code against the latest Vercel Labs design standards to ensure accessibility, consistency, and UX best practices.

Can I check specific files with this skill?

Yes, you can provide specific file paths or patterns (e.g., src/**/*.tsx) to limit the audit to certain parts of your project.

Where does the skill get its design rules from?

The skill fetches the latest guidelines directly from the Vercel Labs GitHub repository to ensure you are always auditing against current standards.

What output format does the auditor use?

It uses a terse 'file:line' format, making it easy for developers to navigate directly to the code that needs fixing.

Web Interface Guidelines Auditor

Name: Web Interface Guidelines Auditor
Author: Kyo1M

byKyo1M

•

デザインツール

Audits UI code for compliance with professional web interface standards and accessibility best practices.

This skill empowers Claude to perform automated UI/UX reviews by fetching and applying the latest Vercel Labs Web Interface Guidelines to your codebase. It analyzes your frontend files for accessibility, design consistency, and UX best practices, providing actionable feedback in a concise file-and-line format. Whether you are prepping for a production release or refining a component library, this skill ensures your interface meets modern web standards without manual cross-referencing.

主な機能

01Direct file-and-line feedback for quick fixes

021 GitHub stars

03Fetches real-time design guidelines from Vercel Labs

04Seamless integration with existing frontend workflows

05Automated accessibility and UX compliance auditing

06Supports pattern-based file scanning

ユースケース

01Conducting a pre-deployment accessibility and UX audit

02Reviewing UI components for consistency with modern design standards

03Identifying specific design flaws in CSS and JSX files

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add kyo1m/pair-budget web-design-guidelines

For use in Claude.ai and ChatGPT

Download Skill