Back to guide/Developer Tools

Component Extraction

Specifies the full interface contract (props, className, exports) upfront. The state ownership decision prompt prevents the common mistake of extracting components with tangled state.

cursor-ai-tipssource_filesection_descriptionnew_component_path
Edit View
Prompt
Extract a reusable component from @{{source_file}}.

The section to extract: {{section_description}}

New component requirements:
- File path: {{new_component_path}}
- Props interface with full TypeScript types
- Accept a className prop for style overrides
- Use {{styling_approach}} for styling (match the project)
- Include default prop values where sensible
- Export both the component and its props type

After extraction:
1. Update the original file to use the new component
2. Ensure no visual or behavioral changes (pure refactor)
3. If the extracted section had local state, decide whether state should live in the new component or be passed as props — explain your choice

Variables to customize

{{source_file}}{{section_description}}{{new_component_path}}{{styling_approach}}

Why this prompt works

Specifies the full interface contract (props, className, exports) upfront. The state ownership decision prompt prevents the common mistake of extracting components with tangled state.

Save this prompt to your library

Organize, version, and access your best prompts across ChatGPT, Claude, and Cursor.

Related prompts

Code Review Assistant

Get thorough code reviews with actionable feedback tailored to your language, framework, and standards.

Context-Aware Code Completion

Providing the surrounding code and project context lets the model match existing patterns exactly. The constraint against modifying existing code prevents unwanted side effects.

Inline Code Suggestion

Constraining suggestions to match existing style and scope produces insertions that feel native to the codebase. The 'no explanation' rule mimics real inline completion behavior.

Code Explanation

The audience level parameter adjusts complexity automatically. Requiring a usage example ensures the explanation is practical, not just theoretical.