Where are the design rules sourced from?

This skill fetches the latest guidelines directly from Vercel’s official web-interface-guidelines repository to ensure your code is measured against current industry standards.

What kind of issues does it detect?

It identifies violations related to accessibility (A11y), visual hierarchy, interactive element behavior, and general UX patterns defined in the guidelines.

Can I audit specific parts of my project?

Yes, the skill accepts file paths or glob patterns as arguments, allowing you to review a single component or a specific directory.

Does the skill require manual updates to the rules?

No, it is programmed to fetch fresh guidelines from the remote source before every review, ensuring you always audit against the latest version.

Web Design Guidelines Auditor

Name: Web Design Guidelines Auditor
Author: Brite-Nites

byBrite-Nites

0•

デザインツール

Audits UI code against industry-standard Web Interface Guidelines to ensure high-quality design, accessibility, and UX consistency.

This skill empowers developers to maintain professional standards in their web applications by automatically reviewing source code against Vercel's Web Interface Guidelines. It fetches the most current design rules from a remote source and applies them to your specific files or codebase patterns, identifying issues related to accessibility, layout, and visual design patterns. By outputting findings in a concise format, it helps frontend engineers quickly identify and resolve design debt, ensuring every component adheres to modern web best practices.

主な機能

01Dynamic fetching of the latest industry-standard design guidelines

02Comprehensive UI/UX compliance and accessibility auditing

03Terse file-line reporting for rapid developer navigation

04Support for targeted file patterns or project-wide reviews

05Automated identification of layout and visual design inconsistencies

060 GitHub stars

ユースケース

01Performing a final UX and UI consistency check before a production release

02Auditing a new React component for accessibility and design best practices

03Standardizing frontend code across a team using Vercel's web interface rules

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add brite-nites/brite-claude-plugins web-design-guidelines

For use in Claude.ai and ChatGPT

主な機能

01Dynamic fetching of the latest industry-standard design guidelines

02Comprehensive UI/UX compliance and accessibility auditing

03Terse file-line reporting for rapid developer navigation

04Support for targeted file patterns or project-wide reviews

05Automated identification of layout and visual design inconsistencies

060 GitHub stars

ユースケース

01Performing a final UX and UI consistency check before a production release

02Auditing a new React component for accessibility and design best practices

03Standardizing frontend code across a team using Vercel's web interface rules

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add brite-nites/brite-claude-plugins web-design-guidelines

For use in Claude.ai and ChatGPT