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

0•

Design Tools

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

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

01Best practices for keyboard interaction and focus management in complex components

02Standardized responsive typography and layout patterns using container queries

03Strict animation constraints focusing on performance and user motion preferences

040 GitHub stars

05Enforces accessibility-first primitives using Radix, Base UI, or React Aria

06Automated UI quality checklists for WCAG compliance and semantic HTML

Use Cases

01Building or refactoring a design system with consistent accessibility standards

02Optimizing frontend performance through standardized animation and CSS patterns

03Ensuring production-grade keyboard navigation for complex web applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add gtakairo/dotfiles ui-patterns

For use in Claude.ai and ChatGPT

Download Skill