Standardizes component architecture and accessibility patterns for modern frontend development.
This skill equips Claude with a robust set of best practices for building production-grade user interfaces. It provides specialized guidance on Atomic Design organization, accessibility (A11y) compliance, and the critical distinction between Server and Client components. By implementing patterns for focus management, loading states, and form validation using industry-standard tools like React Hook Form and Zod, it ensures that your frontend code remains scalable, accessible, and maintainable.
주요 기능
01WCAG-compliant accessibility patterns and ARIA implementation
021 GitHub stars
03Atomic Design structure for scalable component organization
04Responsive design implementation using Tailwind CSS and custom hooks
05Standardized loading and error state management patterns
06Optimized Server vs. Client component usage strategies
사용 사례
01Building a consistent design system with reusable UI primitives
02Auditing and improving component accessibility and keyboard navigation
03Architecting complex forms with robust validation and state management
