skills.rest
markky21
markky21COMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines-validator

Validate React/HTML UI code for WCAG 2.1 AA accessibility compliance.

Updated Jan 16, 2026
Search Tags:#accessibility#ARIA#WCAG#UI#validate#design-review
One-click install
npx skills add https://github.com/markky21/claude-skills --skill web-design-guidelines-validator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines-validator
Source: https://github.com/markky21/claude-skills/tree/main/plugins/my-personal-tools/skills/web-design-guidelines-validator
Command: npx skills add https://github.com/markky21/claude-skills --skill web-design-guidelines-validator

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates the validation of UI code for accessibility, UX patterns, and design compliance, helping identify missing ARIA labels, contrast issues, and focus-management gaps.

Core Features & Use Cases

  • Automated WCAG-aligned accessibility checks for React/HTML components, forms, modals, and navigation.
  • Validation of keyboard accessibility, proper labeling, color contrast, and focus management (including focus trapping in modals).
  • References external guidelines from vercel-labs/web-interface-guidelines to inform the rule set.
  • Use Case: during code reviews and UX audits, verify new components meet accessibility and design standards before deployment.

Quick Start

Run the UI guidelines validator against your UI codebase to surface accessibility issues, then apply fixes to components in your project directories (e.g., src/components or app/components).

Frequently Asked Questions about web-design-guidelines-validator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I validate React components for WCAG 2.1 AA accessibility compliance?▼

Automated accessibility validation scans React and HTML code to enforce WCAG 2.1 AA standards, checking for proper labeling, keyboard accessibility, color contrast, and focus management during code reviews.

How do I check for focus trapping and keyboard accessibility issues in modal dialogs?▼

Automated UI validation checks modal components to verify proper focus trapping and keyboard accessibility, identifying focus management gaps and ensuring compliance with WCAG interface guidelines.

Can I use this tool to audit HTML forms for missing ARIA labels and contrast issues?▼

Yes, the validator audits HTML forms to detect missing ARIA labels, improper labeling, and color contrast issues, ensuring forms meet accessibility and UX pattern standards.

Does this accessibility validator work with any React project structure?▼

The validator works with standard React and HTML project structures, scanning component directories like src/components or app/components to identify accessibility issues and design compliance gaps.

What is the best way to automate UX audits for web interface design compliance?▼

The best way to automate UX audits is running an automated validator that checks React and HTML UI code against vercel-labs/web-interface-guidelines, enforcing keyboard accessibility, proper labeling, and focus management.

Why does my UI validation not catch all keyboard navigation issues in complex navigation?▼

UI validation may not catch all keyboard navigation issues because automated checks focus on standard WCAG 2.1 AA compliance patterns, and complex custom interactions may require manual UX review.

Related Skills

Explore More Design & Creative Skills→
gwpjpgwpjp
3

ui-refactor-specialist

Scan React projects to identify UI refactoring opportunities and generate a structured report.

Community
Basic
JEO-tech-aiJEO-tech-ai
8

web-accessibility

Apply WCAG 2.1 guidelines to identify and fix accessibility gaps in web UIs.

Community
Advanced
pradyumnasagarpradyumnasagar
6

agent-handoff

Automate inter-skill data transfer and provenance capture via JSON Material Passports.

Community
Advanced
hanzilihanzili
175

a11y-auditor

Audit web pages for WCAG 2.1 AA accessibility issues with screenshots and remediation steps.

Community
Advanced