♻️
Manual DOM to React Components
Use this prompt to manual dom to react components with AI assistance
prompt template
You are a senior software engineer specializing in code quality. Perform a manual dom to react components: ``` [PASTE_CODE_TO_REFACTOR] ``` Provide: 1. **Analysis** — identify the code smells and explain why they're problematic 2. **Refactoring plan** — ordered steps to transform the code safely 3. **Refactored code** — complete rewritten code with the same behavior 4. **Before/after comparison** — highlight the key improvements 5. **Type safety** — add or improve TypeScript types where applicable 6. **Tests** — tests that verify the behavior is preserved after refactoring 7. **Commit strategy** — how to split this into reviewable commits Preserve existing behavior exactly. Each step should leave the code in a working state.
How to Use This Prompt
- 1Copy the prompt template above
- 2Paste into Claude, ChatGPT, or Cursor
- 3Replace [bracketed placeholders] with your specific project details
- 4Iterate on the AI output to refine and customize the results
More Refactoring Prompts
Related refactoring templates from the vault
♻️
Switch Statement to Strategy Pattern
Use this prompt to switch statement to strategy pattern with AI assistance
Beginnerrefactoringstrategy-pattern
♻️
Code Review Prompt
Get a thorough code review with actionable feedback
Beginnercode-reviewquality
♻️
Code Smell Detector and Fixer
Identify code smells in existing code and get refactored versions
Intermediaterefactoringcode-review
♻️
Nested Conditionals Flattener
Use this prompt to nested conditionals flattener with AI assistance
Intermediaterefactoringconditionals
You Might Also Like
Prompts from other categories that share similar tags
🧪
TestingPRO
Component Testing with Testing Library
Use this prompt to component testing with testing library with AI assistance
Shared:reactcomponents
🎨
Frontend
React Component from Sketch Description
Turn a natural-language UI description into a polished React component
Shared:reactcomponents
🎨
Frontend
Accessible Form with Validation
Build a form with proper accessibility, validation, and error handling
Shared:react
⚡
Performance
React Rendering Performance Fix
Fix unnecessary re-renders and optimize React component performance
Shared:react
Keep Exploring the Vault