How does this skill help with web accessibility?

It enforces WAI-ARIA APG patterns, ensuring full keyboard support, visible focus rings, and proper screen reader labels for all interactive elements.

Can I use this for reviewing existing codebases?

Yes, the skill is designed to scan existing components and identify common violations such as blocked paste handlers, color-only status cues, or missing reduced-motion support.

Can this skill optimize my frontend performance?

Yes, it provides rules for compositor-friendly animations, image preloading, virtualization for large lists, and techniques for minimizing unnecessary React re-renders.

Does it support mobile-specific UI patterns?

Absolutely, it includes specific guidelines for touch target sizes, mobile input font sizes to prevent zooming, and respecting device-specific safe area insets.

UI/UX Accessibility & Performance Guidelines

Name: UI/UX Accessibility & Performance Guidelines
Author: Tylerbryy

byTylerbryy

•

Herramientas de Diseño

Enforces comprehensive UI/UX standards, accessibility compliance, and performance best practices for modern web applications.

Acerca de

This skill empowers developers to build high-quality, production-ready interfaces by enforcing strict standards for accessibility, interactivity, and performance. It provides automated guidance on WAI-ARIA patterns, keyboard navigation, touch target sizes, and efficient animation techniques. By integrating these guidelines directly into the development workflow, it ensures that TypeScript, React, and Next.js projects remain user-friendly, performant, and inclusive for all users while maintaining design consistency and high-fidelity aesthetics.

Características Principales

Performance-driven animation guidelines favoring compositor-friendly properties
Accessibility auditing for contrast, semantic HTML, and screen reader labels
Mobile-first interaction optimization including touch targets and input behaviors
Detailed form validation, error handling, and state management patterns
1 GitHub stars
WAI-ARIA APG keyboard support and focus management enforcement

Casos de Uso

Auditing existing React components for WCAG and ARIA accessibility compliance
Optimizing UI performance and layout stability to prevent Cumulative Layout Shift (CLS)
Establishing consistent form behavior and input validation across a Next.js project

Acerca de

Características Principales

Performance-driven animation guidelines favoring compositor-friendly properties
Accessibility auditing for contrast, semantic HTML, and screen reader labels
Mobile-first interaction optimization including touch targets and input behaviors
Detailed form validation, error handling, and state management patterns
1 GitHub stars
WAI-ARIA APG keyboard support and focus management enforcement

Casos de Uso

Auditing existing React components for WCAG and ARIA accessibility compliance
Optimizing UI performance and layout stability to prevent Cumulative Layout Shift (CLS)
Establishing consistent form behavior and input validation across a Next.js project