What is considered a 'Critical' severity issue in this tool?

Critical issues include missing keyboard access, broken focus traps in modals, and interactive elements with no accessible names.

Can this skill help with mobile responsiveness?

Yes, it specifically checks for touch target sizes (minimum 44x44px) and ensures content reflows correctly at small viewports like 320px.

Does it work with modern frontend frameworks like React?

Absolutely. It is designed to analyze React, HTML, and other component-based architectures for proper semantic implementation and accessibility hooks.

What standards does this validator follow?

The skill validates code against WCAG 2.1 AA requirements and follows the web interface guidelines established by vercel-labs.

Web Design Guidelines Validator

Name: Web Design Guidelines Validator
Author: markky21

bymarkky21

0•

デザインツール

Validates UI code against WCAG accessibility standards, UX patterns, and responsive design best practices to ensure production-grade web interfaces.

The Web Design Guidelines Validator is a specialized tool for Claude Code that automates the auditing of frontend code for accessibility and user experience compliance. It systematically checks for critical UI issues such as missing ARIA labels, insufficient color contrast, broken focus management in modals, and inadequate touch targets. By applying rules from industry-standard interface guidelines, this skill helps developers build inclusive, keyboard-accessible, and mobile-friendly applications while avoiding common anti-patterns like non-semantic HTML or hidden focus indicators.

主な機能

01Automated WCAG 2.1 AA accessibility auditing for interactive elements

02Real-time detection of UI anti-patterns like outline suppression

03Verification of touch targets and responsive reflow for mobile devices

04Semantic HTML and ARIA attribute validation for form components

050 GitHub stars

06Focus management analysis for modals, dropdowns, and navigation

ユースケース

01Auditing complex forms to ensure proper labeling and error announcement

02Reviewing React or HTML components for accessibility before production deployment

03Fixing keyboard navigation and focus trapping in interactive UI elements

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add markky21/claude-skills web-design-guidelines-validator

For use in Claude.ai and ChatGPT

Download Skill