Does this skill help with WCAG and accessibility compliance?

Yes, checking for accessibility best practices is a primary function of this skill, helping you identify missing ARIA labels, poor contrast, and structural issues.

Can I audit specific files or the entire project?

Yes, you can specify individual files or use patterns (like *.tsx) to audit specific parts of your codebase, or ask it to review the entire directory.

What guidelines does this skill use for its review?

This skill dynamically fetches the latest Web Interface Guidelines maintained by Vercel Labs to ensure your code is measured against modern industry standards.

How are the findings presented?

Findings are output in a terse 'file:line' format, making it easy to jump directly to the specific part of the code that requires attention.

Does it work with any frontend framework?

Yes, it reviews the UI code structure and patterns, making it compatible with React, Vue, Svelte, or plain HTML/CSS projects.

Web Interface Guidelines Reviewer

Name: Web Interface Guidelines Reviewer
Author: Kamaric112

byKamaric112

0•

Design Tools

Audits frontend code against industry-standard guidelines to ensure high-quality UI, UX, and accessibility compliance.

The Web Interface Guidelines skill automates the process of reviewing frontend code by cross-referencing your implementation against the latest standards from Vercel Labs. It fetches real-time rules to identify design inconsistencies, accessibility gaps, and usability issues, providing precise feedback in a file-and-line format. This skill is ideal for developers who want to maintain production-grade UI quality without manual checklist reviews, ensuring every component meets modern web best practices.

Key Features

01Detailed line-by-line reporting for rapid bug fixing

020 GitHub stars

03Fetches real-time UI/UX guidelines from Vercel Labs for up-to-date auditing

04Supports targeted reviews using specific file patterns or globs

05Automated accessibility and usability compliance checks

06Standardizes design patterns across diverse frontend projects

Use Cases

01Auditing a new React or Vue component for accessibility compliance before a pull request

02Performing a comprehensive UX health check on an existing web application

03Ensuring consistent design system implementation across a large-scale project

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add kamaric112/personal-portfolio web-design-guidelines

For use in Claude.ai and ChatGPT

Download Skill