Implement Modern Frontend Development Patterns

This skill is a working reference for modern React/Next.js frontend patterns, organized by concern. Component patterns cover composition over inheritance (a Card/CardHeader/CardBody example), compound components sharing state through React Context (a Tabs/TabList/Tab example), and the render-props pattern for a generic DataLoader<T>. Custom hooks cover useToggle for boolean state, useQuery<T> for async data fetching with onSuccess/onError/enabled options, and useDebounce for delaying a value update. State management covers the Context+Reducer pattern (a typed State/Action reducer wired through a provider and a useMarkets consumer hook).

Use this skill when structuring React/Next.js UI code and choosing among established patterns for component composition, shared state, or performance - rather than reinventing them per feature. It leans toward TypeScript-typed React and assumes familiarity with hooks; it is a pattern reference, not a full application scaffold, so it does not cover routing, data-layer architecture, or backend integration beyond the fetch calls shown inside its examples.

Each pattern is a self-contained TypeScript/TSX snippet with a paired usage example, so the "input" is the specific UI problem (shared state across children, expensive list re-renders, form validation, error containment) and the "output" is a component or hook to adapt. Performance patterns include useMemo/useCallback/React.memo for avoiding unnecessary recomputation and re-renders, lazy/Suspense code-splitting for heavy components, and list virtualization via @tanstack/react-virtual's useVirtualizer (with estimateSize and overscan) for long lists. Form handling shows a controlled form with field-level validation and error state. Error containment uses a class-based ErrorBoundary implementing getDerivedStateFromError/componentDidCatch with a retry button.

const virtualizer = useVirtualizer({
  count: markets.length,
  getScrollElement: () => parentRef.current,
  estimateSize: () => 100,
  overscan: 5,
})

Built on React (hooks, Context, class components for error boundaries) and Next.js conventions, plus two specific libraries: framer-motion for enter/exit list and modal animations via motion/AnimatePresence, and @tanstack/react-virtual for virtualized long lists. Accessibility patterns use native ARIA roles (combobox, listbox, dialog) with keyboard-event handling for arrow-key navigation and focus management that saves and restores the previously focused element around a modal's open/close cycle.

Frontend engineers building React or Next.js interfaces who want vetted, copy-adaptable patterns for component composition, state management, performance (memoization, code splitting, virtualization), forms, error boundaries, animation, and accessibility, instead of designing each from scratch. Its own closing guidance is to choose patterns proportional to the project's actual complexity rather than applying all of them by default.