UI Refactoring Workflow

Overview

Systematic approach to transforming existing UI code into modern, aesthetically superior implementations while preserving functionality and improving maintainability.

When to Use

• Refactoring brownfield React Native/Next.js apps
• Modernizing outdated UI components
• Applying consistent design system to existing code
• Switching design styles/presets across application
• Elevating visual quality without rebuilding from scratch
• Improving accessibility of existing components

When NOT to Use

• Starting new project from scratch (use design-system-foundation instead)
• Just fixing bugs (regular debugging workflow)
• Performance optimization only (use performance tools)
• Backend refactoring (this is UI-focused)