12 free prompts · all verified
React prompts
React-specific prompts for AI coding assistants — component generation with real prop contracts, hook extraction, performance passes and migration briefs that name actual React APIs instead of hand-waving.
Every prompt lists the exact tool and version it was tested against.
Extract a reusable hook from tangled component logicPulls one piece of stateful logic out of a component into a properly named custom hook with a minimal, typed return contract, without changing runtime behavior.Claude CodeCursor2026-07-14Break a 600-line component into a maintainable treeSplits an overgrown component along its actual seams — data, layout, and interaction — instead of arbitrarily, and flags where props should become context.Claude CodeCursor2026-07-16Audit a component for wasted re-renders before adding memo everywhereA diagnosis-first performance audit that finds the actual re-render trigger and only recommends useMemo, useCallback, or memo where profiling evidence supports it.Claude CodeCursor2026-07-21Design Suspense boundaries that don't turn into one big spinnerPlaces Suspense boundaries around real data-fetching seams so a page reveals content progressively instead of waterfalling requests or blocking on one top-level spinner.Claude CodeCursor2026-07-24Convert a form's manual state juggling to React 19 ActionsMigrates an onSubmit-plus-useState form to useActionState, useFormStatus, and useOptimistic where it genuinely helps, instead of hand-rolled pending and error booleans.Claude CodeCursor2026-07-18Run an accessibility audit on a component before it shipsA component-level a11y audit that checks role-specific WCAG success criteria against actual JSX — not a generic "add aria-label everywhere" pass.Claude CodeClaude2026-07-19Decide whether this state needs lifting, context, or an external storeA decision-framework prompt that picks the right home for shared state based on update frequency and consumer spread, instead of defaulting to context for everything.Claude CodeChatGPT2026-07-17Write component tests that check behavior, not implementation detailsGenerates React Testing Library tests driven by accessible queries and user-visible behavior, with a guard against testing internal state or CSS classes.Claude CodeCursor2026-07-15Fix prop drilling without reaching for Redux as the first moveFixes a prop-drilling chain with composition or a narrowly-scoped context first, and only escalates to an external store if neither actually solves it.Claude CodeCursor2026-07-22Design a component API that won't need a breaking change in six monthsDesigns a design-system component's prop contract by working backward from real use cases, with explicit composition slots instead of a boolean prop for every variant.Claude CodeClaude2026-07-20Migrate a class component to hooks without silently dropping lifecycle behaviorA class-to-function migration prompt that maps each lifecycle method to its hook equivalent explicitly, and calls out the cases where the mapping isn't 1:1.Claude CodeCursor2026-07-13Implement a smooth transition between two UI states in ReactImplements an enter/exit or shared-element transition using the lightest mechanism that actually produces the described motion — CSS, startTransition, or the View Transition API — instead of defaulting to a heavy animation library.Claude CodeCursor2026-07-27
