In the Skill's Own Terms
A frontend implementation guide for building or modifying responsive UI with design-system tokens, reusable component structure and accessibility checks. It treats loading, error and empty states as part of the implementation rather than follow-up polish.
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
- UI component or page code with separated data handling and presentation where appropriate.
- Loading, error and empty states, plus keyboard/focus behavior and responsive styling for the requested interface.
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.