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.

주요 기능

01Performance-driven animation guidelines favoring compositor-friendly properties

02Accessibility auditing for contrast, semantic HTML, and screen reader labels

03Mobile-first interaction optimization including touch targets and input behaviors

04Detailed form validation, error handling, and state management patterns

051 GitHub stars

06WAI-ARIA APG keyboard support and focus management enforcement

사용 사례

01Auditing existing React components for WCAG and ARIA accessibility compliance

02Optimizing UI performance and layout stability to prevent Cumulative Layout Shift (CLS)

03Establishing consistent form behavior and input validation across a Next.js project

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add tylerbryy/codewarden ui-ux-guidelines

For use in Claude.ai and ChatGPT

Download Skill