Best Claude Code Prompt for “Refactor a React Component”

<verification>
Run the React test suite and ensure all tests pass.
Verify that the component renders correctly in isolation and within the application.
Check for any console warnings or errors during rendering and interaction.
</verification>
<outcome>
Refactor the provided React component to improve its efficiency and maintainability. The component should exhibit faster render times and be easier to understand and modify in the future, without altering its existing user-facing functionality or behavior.
</outcome>
<context>
Refer to `src/components/common/` for existing component patterns and styling conventions.
Analyze `src/utils/performance.ts` for any relevant optimization utilities.
</context>
<constraints>
Do not introduce new external dependencies.
Maintain backward compatibility with existing component props and usage.
Prioritize readability and adherence to established React best practices.
Avoid significant changes to the component's DOM structure unless strictly necessary for performance.
</constraints>
<complex_task_guidance>
Read through the current implementation of the component and summarize its core logic and rendering approach before making any modifications.
</complex_task_guidance>
<git_operations>
Create a new branch for these changes.
Commit the refactored code with a clear and concise commit message.
</git_operations>