How do I ensure I'm using the most recent design rules?

The skill is designed to automatically fetch fresh guidelines using WebFetch before every review session.

Does this skill help with web accessibility (a11y)?

Yes, accessibility compliance is a major component of the guidelines used, helping you catch common a11y issues during development.

How does the skill present its findings?

Findings are output in a concise file:line format, allowing you to quickly navigate to and fix the specific lines of code that violate guidelines.

Can I audit specific files or entire directories?

Yes, you can specify individual files or provide a file pattern to audit specific parts of your frontend architecture.

What guidelines does this skill use for its review?

The skill fetches the latest Web Interface Guidelines from the official Vercel Labs repository to ensure your UI meets current industry standards.

Web Interface Guidelines Auditor

Name: Web Interface Guidelines Auditor
Author: dnlopes

bydnlopes

0•

设计工具

Audits web UI code for compliance with industry-standard design, accessibility, and UX guidelines.

The Web Interface Guidelines skill automates the process of reviewing frontend code against professional UI standards maintained by Vercel Labs. By fetching the latest industry guidelines in real-time, it evaluates your UI components for accessibility, usability, and design best practices. It provides precise, actionable feedback in a terse file-and-line format, making it an essential tool for developers who want to ensure their web applications meet high-quality design standards without the need for manual audit overhead.

主要功能

01Seamless integration with Claude Code for instant design feedback

02Comprehensive accessibility and usability compliance checks

030 GitHub stars

04Automated UI/UX code audits for specific files or directory patterns

05Real-time fetching of the latest Vercel Labs web guidelines

06Pinpoint feedback using standardized file and line-number references

使用场景

01Performing a final accessibility and design audit before a production deployment

02Identifying technical design debt and inconsistent styling across a codebase

03Ensuring new frontend components adhere to strict UI/UX best practices

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add dnlopes/claude-code-plugins web-design-guidelines

For use in Claude.ai and ChatGPT

主要功能

01Seamless integration with Claude Code for instant design feedback

02Comprehensive accessibility and usability compliance checks

030 GitHub stars

04Automated UI/UX code audits for specific files or directory patterns

05Real-time fetching of the latest Vercel Labs web guidelines

06Pinpoint feedback using standardized file and line-number references

使用场景

01Performing a final accessibility and design audit before a production deployment

02Identifying technical design debt and inconsistent styling across a codebase

03Ensuring new frontend components adhere to strict UI/UX best practices

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add dnlopes/claude-code-plugins web-design-guidelines

For use in Claude.ai and ChatGPT