What format is the output?

To keep things efficient, it outputs findings in a concise file:line format, making it easy to jump directly to the code that needs fixing.

How does this skill audit my UI?

It fetches the latest guidelines from Vercel Labs and compares your code against these rules, flagging issues like poor accessibility or inconsistent UX.

Does it require an internet connection?

Yes, the skill fetches the latest version of the guidelines from GitHub to ensure you are always auditing against the most up-to-date standards.

What guidelines does it follow?

It specifically uses the Vercel Labs Web Interface Guidelines, which cover modern best practices for production-grade web applications.

Can I use it on specific files?

Yes, you can provide a specific file path or a glob pattern to audit only the parts of your project you are currently working on.

Web Interface Guidelines Auditor

Name: Web Interface Guidelines Auditor
Author: StrayDragon

byStrayDragon

•

Design Tools

Reviews web interface code for accessibility, UX, and design system compliance using the latest industry guidelines.

The Web Design Guidelines skill automates UI code reviews by fetching and applying the latest Vercel Labs web interface standards directly within Claude Code. It identifies accessibility issues, UX inconsistencies, and design anti-patterns, providing precise location-based feedback in a terse file:line format. This tool is essential for front-end developers aiming to maintain high-quality, production-grade interfaces while adhering to modern web best practices without manual checklist verification.

Key Features

01Supports specific file targeting or project-wide pattern matching

02Fetches real-time design rules from Vercel Labs

03Identifies UX inconsistencies and design anti-patterns

04Provides precise location mapping with file and line references

05Performs automated accessibility audits

061 GitHub stars

Use Cases

01Ensuring a project adheres to professional Vercel-style web interface standards

02Auditing a new feature's UI components before a pull request merge

03Scanning an existing codebase for accessibility violations and UX improvements

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add straydragon/my-claude-skills web-design-guidelines

For use in Claude.ai and ChatGPT

Download Skill