Does it support specific CSS frameworks?

Yes, it is optimized for Tailwind CSS, utilizing the cn() utility (clsx + tailwind-merge) and modern features like container queries and fluid typography.

How does this skill improve UI accessibility?

It mandates the use of accessible primitives like Radix or React Aria for interactive components and includes built-in checklists for focus trapping, ARIA labels, and WCAG AA compliance.

How are animations handled by this skill?

The skill enforces high-performance animation rules, limiting transitions to transform and opacity properties while ensuring all animations respect the 'prefers-reduced-motion' media query.

Can this skill help with form usability?

Absolutely. It provides patterns for never blocking paste, ensuring visible labels for every input, and positioning error messages for maximum clarity.

UI Patterns & Accessibility Standards

Name: UI Patterns & Accessibility Standards
Author: gtakairo

bygtakairo

Design Tools

Enforces opinionated, accessibility-first UI patterns and modern styling constraints for high-quality frontend development.

About

The UI Patterns skill equips Claude with a rigorous framework for building professional, accessible, and performant user interfaces. It prioritizes the use of established primitives like Radix and React Aria over custom implementations to ensure robust keyboard navigation and screen reader support. By enforcing strict constraints on animations, typography, and form behavior, this skill helps developers avoid common UX anti-patterns while maintaining a consistent design system built on Tailwind CSS and modern React best practices.

Key Features

Best practices for keyboard interaction and focus management in complex components
Standardized responsive typography and layout patterns using container queries
Strict animation constraints focusing on performance and user motion preferences
0 GitHub stars
Enforces accessibility-first primitives using Radix, Base UI, or React Aria
Automated UI quality checklists for WCAG compliance and semantic HTML

Use Cases

Building or refactoring a design system with consistent accessibility standards
Optimizing frontend performance through standardized animation and CSS patterns
Ensuring production-grade keyboard navigation for complex web applications

About

Key Features

Best practices for keyboard interaction and focus management in complex components
Standardized responsive typography and layout patterns using container queries
Strict animation constraints focusing on performance and user motion preferences
0 GitHub stars
Enforces accessibility-first primitives using Radix, Base UI, or React Aria
Automated UI quality checklists for WCAG compliance and semantic HTML

Use Cases

Building or refactoring a design system with consistent accessibility standards
Optimizing frontend performance through standardized animation and CSS patterns
Ensuring production-grade keyboard navigation for complex web applications