skills.rest
fernando-bertholdo
fernando-bertholdoCOMMUNITY
Explore all skills by this author →
GitHub

web-standards

Review HTML, React, Vue, and Svelte components for WCAG 2.1 AA accessibility compliance.

2|Updated Apr 9, 2026
Search Tags:#accessibility#a11y#WCAG#ui-design#ux#web-standards
One-click install
npx skills add https://github.com/fernando-bertholdo/4-successful-AI-life --skill web-standards-fernando-bertholdo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-standards
Source: https://github.com/fernando-bertholdo/4-successful-AI-life/tree/main/plugins/ui-excellence/skills/foundations/web-standards
Command: npx skills add https://github.com/fernando-bertholdo/4-successful-AI-life --skill web-standards-fernando-bertholdo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Helps teams ensure web interfaces meet accessibility, performance, and UX standards by providing practical guidance aligned with WCAG 2.1 AA and modern UI patterns.

Core Features & Use Cases

  • Accessibility guidance: semantic HTML, ARIA practices, keyboard navigation, and focus management.
  • Component patterns, typography, animation, dark mode, and localization guidance.
  • Use Cases: UI reviews, design-system audits, performance optimizations, and accessibility remediations.

Quick Start

Provide a UI component or page and ask the AI to perform an accessibility and performance review following WCAG 2.1 AA guidelines.

Frequently Asked Questions about web-standards

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

FAQPage Schema
How do I audit my web UI for WCAG 2.1 AA accessibility compliance?▼

To check web UI accessibility against WCAG 2.1 AA, provide your HTML, React, Vue, or Svelte components for review. The process evaluates semantic HTML structure, ARIA practices, keyboard navigation, focus management, and color contrast ratios.

What is the best way to add ARIA labels and semantic HTML to React components?▼

The best way to add ARIA labels and semantic HTML to React components is through targeted UI rewrites. This process enforces proper ARIA practices, keyboard accessibility, and focus management across modern web app interfaces.

Can I use this to review Vue and Svelte components for keyboard accessibility?▼

Yes, you can review Vue and Svelte components for keyboard accessibility. The process applies focus management, ARIA labeling, and motion preference checks across HTML, React, Vue, and Svelte interfaces to ensure full keyboard accessibility.

How do I fix color contrast and motion preference issues in my web app?▼

Fix color contrast and motion preference issues by providing your UI components for an accessibility review. The process identifies contrast failures and enforces motion preferences for safer, standards-ready web interfaces.

Does this web standards review cover localization and dark mode UI patterns?▼

Yes, the web standards review covers localization and dark mode UI patterns. It evaluates typography, animation, and component patterns to ensure UX quality and accessibility across different languages and themes.

Related Skills

Explore More Design & Creative Skills→
hospitaljobsinhospitaljobsin
7

frontend-design

Create production-grade frontend interfaces with React, Vue, Svelte, or vanilla HTML/CSS/JS.

Official
Advanced
clawpod-appclawpod-app
46

accessibility-review

Audit designs or pages for WCAG 2.1 AA compliance with remediation guidance.

Community
Intermediate
tsukhanitsukhani
12

ui-ux-pro-max

Generate design systems and UX quality feedback for web and mobile applications.

Community
Advanced
Montte-erpMontte-erp
6

wcag-audit-patterns

Audit web pages for WCAG 2.2 violations with automated and manual checks.

Official
Intermediate