Does it support accessibility testing?

Yes, checking for accessibility compliance is a core function of the skill, helping you identify ARIA issues and keyboard navigation flaws.

What guidelines does this skill use for auditing?

The skill fetches the most up-to-date rules directly from the Vercel Labs Web Interface Guidelines repository to ensure you are following modern industry standards.

How do I trigger a design review?

You can use natural language prompts like 'review my UI' or 'check accessibility' followed by the file or directory you want to audit.

Can I use this with React or Vue components?

Absolutely. It is designed to review UI code across various formats, including HTML, CSS, and modern JavaScript component files.

Web Design Guidelines Auditor

Name: Web Design Guidelines Auditor
Author: claudiodearaujo

byclaudiodearaujo

•

Herramientas de Diseño

Audits web user interfaces for compliance with industry-standard design, accessibility, and UX best practices.

The Web Design Guidelines skill empowers Claude to perform automated UI and UX reviews by fetching the latest professional standards from the Vercel Labs repository. It analyzes your frontend code—including HTML, CSS, and modern framework components—to identify accessibility gaps, layout inconsistencies, and design system violations. By providing precise, line-by-line feedback, this skill helps developers maintain high-quality interfaces that are both functional and visually polished without manual cross-referencing of style guides.

Características Principales

011 GitHub stars

02Terse output format for rapid developer resolution

03Detailed line-specific UI/UX feedback

04Support for custom file patterns and directories

05Automated accessibility compliance auditing

06Dynamic fetching of latest Vercel Labs UI guidelines

Casos de Uso

01Auditing a new feature for accessibility before merging a pull request

02Reviewing complex UI components against modern UX best practices

03Performing a design consistency check on a legacy CSS codebase

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/sistema-de-narra-o-de-livro web-design-guidelines

For use in Claude.ai and ChatGPT

Download Skill