ui-ux-design

Accessible UI implementation in React with Tailwind involves using pre-built shadcn/ui components, applying design tokens for consistent styling, and ensuring keyboard navigation, proper labels, and sufficient color contrast. This Skill audits your patterns and systematically updates forms, modals, and interactive controls to meet accessibility standards without custom CSS.

UI consistency across apps is maintained by reusing shadcn/ui components and applying Tailwind tokens uniformly for color, spacing, and typography. This Skill maps your existing patterns, identifies inconsistencies, and updates your codebase to enforce token-driven styling so all components follow the same design system.

Yes. shadcn/ui components integrate fully with Tailwind tokens and support responsive behavior testing. This Skill validates that your forms, modals, and controls adapt correctly to mobile and desktop viewports while maintaining accessibility standards across all screen sizes.

Before redesigning forms and controls, audit the current UI patterns, component usage, token application, and accessibility gaps—keyboard navigation, labels, contrast, and responsive behavior. This Skill performs that discovery, maps components to shadcn/ui equivalents, and identifies which patterns need loading and error states.

Custom CSS breaks design consistency, complicates maintenance, and often introduces accessibility issues. By using shadcn/ui components and Tailwind tokens exclusively, you ensure all styling adheres to the design system, remains maintainable, and meets accessibility requirements without conflicts or overrides.

Accessibility validation checks keyboard navigation, ARIA labels, color contrast, and responsive behavior in interactive components. This Skill systematically tests your forms and modals against these standards and implements corrections using shadcn/ui components and Tailwind tokens to ensure compliance.