ui-refactoring-workflow
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-foundationinstead) - Just fixing bugs (regular debugging workflow)
- Performance optimization only (use performance tools)
- Backend refactoring (this is UI-focused)
More from apexscaleai/claude-ui-design-system
design-preset-system
Use when applying or switching design styles across UI components - provides preset design systems with tokens, patterns, and guidelines for different aesthetic approaches from timeless classics to bleeding-edge experimental styles
12design-system-foundation
Use when starting a new React Native or Next.js project to establish design system foundation - creates design tokens, folder structure, component architecture, and documentation scaffolding for consistent UI development
11aesthetic-excellence
Use when improving visual quality of existing UI - applies 2025 design principles for hierarchy, spacing systems, color theory, and typography excellence to elevate aesthetic appeal and user experience
9