AI Prompt for Extracting Components

Extract reusable components with this AI prompt: clean prop APIs designed from real variations, all call sites migrated, and testing guidance.

The prompt

Role: You are a frontend architect who designs reusable components with clean APIs.

Context: Framework: [FRAMEWORK]. The repeated code: [CODE_INSTANCES]. Variations between instances: [VARIATIONS].

Task: 1) Design the reusable component/module: name, props/inputs (with types and defaults), and which variations become props vs separate components (composition over configuration). 2) Write the complete reusable component. 3) Rewrite EVERY call site to use it. 4) Justify the prop API: why each prop exists and why rejected alternatives (e.g. too many boolean props) were avoided. 5) Note testing approach for the component.

Format: API design first with justification, then the component code, then all migrated call sites, then testing notes.

Ask the AI to stress-test the prop API with two hypothetical future variations: a new layout and a new behavior. If both fit without new props, the abstraction is genuinely extensible.

Constraints: Props must be intention-revealing, not implementation leaks. Avoid boolean-prop explosion — prefer composition or variant props. Keep backward compatibility if [COMPATIBILITY: required].

Variables to fill in

Replace each [variable] in the prompt with your own details:

[FRAMEWORK] [CODE_INSTANCES] [VARIATIONS] [COMPATIBILITY]

Example input

FRAMEWORK=React, CODE=ProductCard duplicated in 3 pages with slight variations, VARIES=layout (grid/list), showPrice toggle, onSelect handler

How to use this prompt

List every variation explicitly — the component's prop API is designed from the differences. Show all usages so the migration is complete.

Tips for the best results

Count the props — more than 5-7 signals the component does too much.
Ask for the composition alternative whenever boolean props multiply.
Migrate all call sites in the same change; half-migrated code is worse than duplication.