Builds accessible, theme-compliant React components using semantic HTML and modern design patterns.
This skill provides a comprehensive methodology for designing and implementing high-quality UI components in React. It integrates design tokens via CSS custom properties, enforces W3C accessibility standards (ARIA patterns), and utilizes modern web platform APIs like Popover and <dialog>. By prioritizing composition over complex prop APIs and adopting React 19 patterns—such as receiving ref as a standard prop—this skill ensures your frontend architecture is performant, maintainable, and inclusive by default.
主要功能
01Design Token & CSS Variable Integration
02Modern Web API Support (Popover, Inert, Dialog)
03W3C APG & WCAG Accessibility Compliance
040 GitHub stars
05React 19 Component Pattern Implementation
06Semantic HTML Structure Mapping
使用场景
01Refactoring legacy components to modern React 19 standards
02Auditing UI elements for WCAG color contrast and touch target compliance
03Building a production-ready accessible design system
