In the Skill's Own Terms
Builds production-quality user interfaces that are accessible, performant, and visually polished. The skill focuses on creating UI that looks like it was built by a design-aware engineer at a top company — not like it was generated by an AI. It enforces real design system adherence, proper WCAG 2.1 AA accessibility, thoughtful interaction patterns, and avoids generic AI aesthetic tropes.
The skill covers component architecture with colocation, composition over configuration, state management ranging from local useState to global stores, responsive mobile-first design tested at specific breakpoints, keyboard navigation, ARIA labels, focus management, meaningful empty and error states, skeleton loading, and optimistic updates for perceived speed.
What it produces
- Skeleton loading states with aria-busy and aria-label for content that is loading
- Meaningful empty and error states with role="status", descriptive text, icons, and actionable next steps
How It Works
- 01Colocate Component Files
Place the component implementation, tests, stories, custom hooks, and types together in a single folder named after the component.
- 02Compose Components, Don't Configure Them
Build composable component APIs with nested children rather than prop-heavy configuration objects.
- 03Separate Data Fetching from Presentation
Create container components that handle data loading, errors, and empty states, then pass clean data to presentation components.
- 04Choose State Management by Scope
Use useState for component-specific UI state, lifted state for 2-3 siblings, Context for theme/auth/locale, URL state for filters and pagination, server state libraries for remote data, and global stores for complex shared client state.
- 05Follow Design System Tokens
Use semantic color tokens like text-primary and bg-surface instead of raw hex values, maintain a consistent spacing scale in 0.25rem increments, and respect the type hierarchy.
- 06Implement WCAG 2.1 AA Accessibility
Make every interactive element keyboard accessible, add ARIA labels to unlabeled controls, manage focus when content changes, ensure 4.5:1 contrast for normal text, and provide meaningful empty and error states.