What problem does it solve? Frontend developers repeatedly solve the same problems—component composition, async data fetching, form validation, list performance, and accessibility—often with inconsistent or buggy implementations. This Skill provides proven, copy-ready React and TypeScript patterns so you avoid common pitfalls like infinite fetch loops, mutated arrays, and broken keyboard navigation. ## Core Features & Use Cases - Component & Hook Patterns: Composition, compound components, render props, and custom hooks for toggles, debouncing, and referentially stable async data fetching. - State & Performance: Context + Reducer state management, memoization with useMemo/useCallback/React.memo, code splitting with lazy/Suspense, and list virtualization via @tanstack/react-virtual. - Forms, Errors & Accessibility: Controlled form validation, error boundaries, Framer Motion animations, keyboard navigation, and focus management for modals and dropdowns. - Use Case: When building a searchable market dashboard, apply the debounce hook for search input, the useQuery hook for data fetching, and the virtualized list pattern to render thousands of rows smoothly. ## Quick Start Ask the AI to build a React component using these frontend patterns, for example a debounced search input feeding a virtualized list with an error boundary.
