How does this skill audit my code?

The skill fetches the latest rules from Vercel's Web Interface Guidelines repository and scans your local source files to identify violations in accessibility, design, and UX logic.

Can I audit specific directories or files?

Yes, you can provide specific file paths or glob patterns to focus the audit on a particular component or section of your codebase.

Do I need to manually update the guidelines?

No, the skill is designed to automatically fetch the most current version of the guidelines from the source URL before every review session.

What output format does the auditor provide?

Findings are delivered in a concise 'file:line' format, making it easy to jump directly to the code that needs adjustment.

Does this skill help with WCAG compliance?

Yes, by checking against the Vercel Web Interface Guidelines, it covers many core accessibility principles that align with WCAG best practices.

Web Design Guidelines Auditor

Name: Web Design Guidelines Auditor
Author: petekp

bypetekp

•

设计工具

Audits frontend code against industry-standard Web Interface Guidelines to ensure high-quality UX and accessibility compliance.

The Web Design Guidelines skill enables developers to automatically evaluate their UI code against rigorous design standards. By fetching the latest rules directly from Vercel's Web Interface Guidelines, it provides an objective review of accessibility, UX patterns, and frontend best practices. This skill is essential for teams aiming to maintain production-grade design quality, identifying specific issues at the file and line level so developers can quickly implement fixes and ensure a consistent, accessible user experience.

主要功能

01Automated UI and UX code auditing based on Vercel standards

02Terse file-and-line reporting for rapid troubleshooting

03Support for specific file targeting or project-wide pattern matching

04Real-time fetching of the latest Web Interface Guidelines

0511 GitHub stars

06Comprehensive accessibility and best practice compliance checks

使用场景

01Reviewing UI components for accessibility compliance before production deployment

02Ensuring consistent UX patterns across large-scale web applications

03Auditing existing frontends to identify and resolve design debt

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add petekp/claude-code-setup web-design-guidelines

For use in Claude.ai and ChatGPT

Download Skill