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

•

设计工具

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

关于

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.

主要功能

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

使用场景

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

关于

主要功能

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

使用场景

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