Can I audit specific folders or components?

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

Does this skill help with accessibility (a11y) testing?

Absolutely. The guidelines fetched include common accessibility rules, helping you identify and fix screen reader issues, color contrast problems, and focus management errors.

Do I need to manually configure the rules?

No configuration is required; the skill leverages a curated source of web interface guidelines automatically, though it responds to your specific file requests.

What is the output format of the design audit?

Findings are presented in a concise file:line format, allowing you to jump directly to the specific location in your code where the guideline violation was found.

How does the skill stay updated with the latest design standards?

The skill automatically fetches the latest guidelines from the official Vercel Labs repository before every review to ensure your code is measured against current industry standards.

Web Design Guidelines Auditor

Name: Web Design Guidelines Auditor
Author: julianromli

byjulianromli

•

101

•

デザインツール

Audits frontend code for compliance with industry-standard web interface guidelines and accessibility best practices.

This skill empowers Claude to perform automated UI/UX reviews by fetching the latest industry-standard guidelines and applying them directly to your source code. It identifies critical issues related to accessibility, interaction patterns, and layout consistency, providing precise line-by-line feedback. It is particularly useful for developers looking to ensure their web applications meet production-grade standards before deployment, offering a streamlined way to catch design debt and usability issues early in the development cycle.

主な機能

01Precise file-and-line reporting for rapid issue resolution

02Real-time evaluation of UI components and interaction patterns

03101 GitHub stars

04Dynamic fetching of the latest Vercel Web Interface Guidelines

05Automated accessibility and UX compliance auditing

06Support for targeted file patterns or full-project reviews

ユースケース

01Pre-deployment accessibility audits to ensure WCAG compliance

02Automated design reviews for new UI components and frontend code

03Benchmarking local projects against industry-standard web best practices

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add julianromli/opencode-template web-design-guidelines

For use in Claude.ai and ChatGPT

Download Skill