Generates accessible, multi-style UI components using React, Tailwind CSS, and Class Variance Authority.
This skill streamlines frontend development by providing a comprehensive library of UI component patterns with built-in support for diverse design aesthetics, including Glassmorphism, Neumorphism, and Neo-Brutalism. It organizes components using an Atomic Design structure (Atoms, Molecules, Organisms) to ensure scalability and maintainability. Every pattern prioritizes accessibility with proper ARIA roles, keyboard navigation, and semantic HTML, allowing developers to quickly scaffold production-ready interfaces that are both visually striking and inclusive.
Key Features
01Atomic Design architecture for organized Atoms, Molecules, and Organisms
020 GitHub stars
03Type-safe component patterns using React, TypeScript, and CVA
04Multi-style support including Glassmorphism, Neumorphism, and Neo-Brutalism variants
05Accessibility-first implementations with built-in ARIA roles and screen reader support
06Pre-configured Tailwind CSS utility classes for rapid styling and customization
Use Cases
01Implementing complex form layouts with standardized validation styling and feedback
02Rapidly prototyping landing pages with specific, non-traditional design aesthetics
03Building a scalable and accessible design system for enterprise React applications
