Component Extraction

Developer Toolscursor-ai-tipssource_filesection_descriptionnew_component_path

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

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.

What you get when you save this prompt

Your workspace unlocks powerful tools to iterate and improve.

AI OPTIMIZE

AI Optimization

One-click improvement with structure analysis and pattern suggestions.

VERSION DIFF

Version History

Track every edit. Compare versions side-by-side with word-level diffs.

ORGANIZE
Development
Code Review
Testing
Marketing

Folders & Tags

Organize your library with nested folders, tags, and drag-and-drop.

MCP
$ npm i -g @promptingbox/mcp
Claude · Cursor · ChatGPT

Use Everywhere

Access prompts from Claude, Cursor, ChatGPT & more via MCP integration.

Your prompts, organized

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