web-design-guidelines

Audit React components for WCAG accessibility and semantic HTML issues by scanning source files to validate focus states, color contrast, and semantic element usage against Vercel design patterns. The skill provides actionable code-level fixes for identified compliance violations.

Checking UI code for Vercel design standards before merging involves running an automated compliance audit on your components directory. This process identifies accessibility, performance, and visual coherence inconsistencies to ensure your interface meets required guidelines.

You can use this skill to find missing focus states and poor color contrast in web interfaces. It parses React and HTML structures to detect these specific violations and provides specific code-level recommendations to resolve them.

The web interface audit works with both React components and plain HTML structures. It parses source files from both formats to validate semantic element usage, identify WCAG violations, and check compliance with Vercel design patterns.

UI code fails accessibility checks for semantic element usage when HTML structures lack proper semantic tags or focus states. This skill analyzes your source files to pinpoint these exact WCAG violations and suggests specific code-level fixes to restore compliance.

When running automated UI compliance audits on source files, expect limitations around parsing complex or dynamic HTML structures. The intermediate-level analysis focuses on static validation of focus states, color contrast, and semantic element usage rather than runtime accessibility behavior.