Cursor prompt to refactor a large component
Splitting a thousand-line component is mostly a discipline problem: extract by responsibility, keep behavior identical, prove it. This prompt walks Cursor through hooks for data, plain functions for logic, and child components only where a chunk earns a name, with a characterization test written first when the file has no coverage.
Last updated
Refactor the large component I point you at without changing its observable behavior. Start by listing its responsibilities; anything beyond rendering (data fetching, form state, derived calculations, event wiring) becomes a candidate for extraction. Pull data access into a custom hook, move pure logic into plain functions in a separate file so they are testable without a DOM, and split the JSX into child components only where a chunk has a clear name and owns its props. Keep prop drilling shallow; introduce context only when three or more levels pass the same value. Preserve the public props interface exactly so no call sites change. If tests exist, run them before and after and diff the results; if none exist, write a characterization test for the main render states first. Finish with a summary of extracted files and line counts before and after.
Same task in other tools
Questions about this prompt
How do I point Cursor at the right component?
Open the file in the editor or @ mention it in the composer, then send the prompt. For files past a thousand lines, also mention the child components and hooks it already imports so the extraction plan accounts for existing pieces instead of duplicating them.
The refactor changed behavior anyway. What is the recovery move?
Revert, then rerun with the characterization test step done first as its own request. Once those render-state tests exist and pass, the refactor run has a tripwire, and the agent iterates against failures instead of shipping a subtle change unnoticed.
When should I stop extracting? The agent keeps proposing smaller pieces.
Stop when each file has one reason to change and a name that describes it without an "And" in it. If a proposed child component needs five or more props just to render one chunk, that chunk was not a real seam; tell the agent to fold it back in.