← ClaudeAtlas

frontend-behavior-preserving-refactorlisted

Improve frontend structure, types, boundaries, readability, or performance without changing intended behavior. Use for component extraction, state simplification, API cleanup, dependency reduction, or architecture migration.
SHIHAOZOU/ai-frontend-engineering-skills · ★ 0 · Code & Development · score 73
Install: claude install-skill SHIHAOZOU/ai-frontend-engineering-skills
# Frontend Refactor Skill For the Simplified Chinese reference, read `references/zh-CN.md` when the user communicates primarily in Chinese or requests Chinese output. ## Purpose Reduce verified maintenance cost while preserving observable behavior and enabling safe rollback. ## When to Use Use when code works but has duplication, unclear ownership, excessive coupling, weak types, or measured performance cost. ## Inputs - Refactor objective and non-goals - Existing behavior and tests - Architecture constraints and consumers - Baseline metrics when performance is involved ## Outputs - Behavior-preservation plan - Incremental structural changes - Validation evidence and migration notes ## Workflow 1. Define the exact problem and observable behavior to preserve. 2. Map consumers, public APIs, side effects, and test coverage. 3. Establish a safety net before structural changes. 4. Choose the smallest reversible sequence. 5. Separate mechanical moves from semantic changes. 6. Keep compatibility adapters only when a migration requires them. 7. Validate after each coherent step. 8. Remove obsolete paths after all consumers migrate. ## Decision Tree ```mermaid flowchart TD A[Refactor request] --> B{Behavior is covered?} B -->|No| C[Add characterization tests] B -->|Yes| D{Public API changes?} C --> D D -->|Yes| E[Plan migration and compatibility] D -->|No| F[Refactor internally] E --> G[Validate consumers] F --> G ``` ## Checklist - [ ] Goal and non-goal