Frontend behavior preserving refactor

Skill SHIHAOZOU/ai-frontend-engineering-skills/skills/frontend-behavior-preserving-refactor

Production-ready frontend Agent Skills for Codex, Claude Code & Cursor—covering React development, debugging, refactoring, code review, bilingual docs, and npx skills installation. 面向 Codex、Claude Code 与 Cursor 的生产级前端 Agent Skills，覆盖 React 开发、Bug 修复、重构、Code Review 与双语工程规范，支持 npx skills 安装。

Install

npx -y skills add SHIHAOZOU/ai-frontend-engineering-skills --skill frontend-behavior-preserving-refactor

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

17 days oldThe repository was created 17 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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.

SKILL.md

2.8 KB, as published. Nobody here has run it

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

Define the exact problem and observable behavior to preserve.
Map consumers, public APIs, side effects, and test coverage.
Establish a safety net before structural changes.
Choose the smallest reversible sequence.
Separate mechanical moves from semantic changes.
Keep compatibility adapters only when a migration requires them.
Validate after each coherent step.
Remove obsolete paths after all consumers migrate.

Decision Tree

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-goals are explicit.
Existing behavior is characterized.
Public consumers are identified.
Steps are reversible and independently valid.
Performance claims have measurements.
Dead compatibility code is removed when safe.

Constraints

MUST NOT mix unrelated feature behavior into the refactor.
MUST preserve observable behavior unless a change is explicitly approved.
SHOULD NOT introduce a new abstraction with only one unstable use case.
MUST document breaking API changes and migration steps.

Examples

Good: Extract validated request mapping behind the existing public function, migrate callers, then remove duplicate parsing.

Bad: Rename files, rewrite state, replace the UI library, and alter behavior in one pull request.

Anti-patterns

Refactoring for aesthetic preference alone
Big-bang migration without checkpoints
Abstracting before identifying stable variation
Claiming performance improvement without measurement