⚛️ React & Frontend — AI Prompts

use[NAME] for [PURPOSE] with params [PARAMS] returning [RETURN] depending on [DEPS]. TS types, useState/useReducer, useEffect (cleanup), useMemo/useCallback, error/loading states, renderHook tests.

State for [APP] with [LIBRARY]. State: [STATE]. Actions: [ACTIONS]. Store config, typed slices, selectors, async thunks, middleware, Provider, custom hooks (useAppDispatch/useAppSelector), tests.

Form for [FORM_PURPOSE] with fields [FIELDS] using [LIBRARY] (react-hook-form/Formik). Reusable field components, validation (required, pattern, custom), real-time/blur, async submit, error handling, a11y (aria-invalid), tests.

Table for [DATA_TYPE] columns [COLUMNS] features [FEATURES] from [DATA_SOURCE]. Sorting (single/multi), filtering (column + global), pagination, row selection, inline editing, CSV export, responsive, virtualized, tests.

[CHART_TYPE] chart for [DATA_TYPE] using [LIBRARY] (Recharts/Chart.js/D3). Config, data transform, axes, tooltips, legends, animations, interactions (hover/click), responsive, a11y (aria-label), Storybook stories.

Animations for [REACT_APP] for elements [ELEMENTS]. Page transitions (AnimatePresence), list stagger, shared layouts (layoutId), hover/tap (whileHover), scroll (useInView), SVG animations, reduced-motion support.

Optimize: [COMPONENT_CODE]. Issues: [ISSUES]. Profiling analysis, React.memo, useMemo/useCallback, code splitting (lazy + Suspense), virtualization (react-window), state colocation, context splitting. Before/after comparison.

Infinite scroll for [DATA_TYPE] using IntersectionObserver. Components: InfiniteScroll wrapper, virtualized list (react-window), loading spinner, empty state, error state with retry. Scroll restoration, debounced search. Window or container scroll.

DnD for [USE_CASE] using [LIBRARY] (dnd-kit/react-beautiful-dnd). Sortable list, drag between containers, drag handle, drop animation, keyboard accessibility, touch support, constraints (axis, bounds).