Write, debug, and tune Playwright specs with locator strategy, trace diagnosis, and CI-aware timeouts.
Data & analysis
fec-refactoring
Try itUse when restructuring existing frontend code while preserving observable behavior, including responsibility extraction, module movement, conditional simplification, API cleanup, or data organization. Do not use for new feature behavior, behavior-changing bug fixes, dependency or framework migration
What it does
Restructure live frontend code in small, evidence-backed steps while preserving the behavior users, callers, tests, routes, and integrations can observe.
The skill document
Skill: Behavior-Preserving Refactoring
Purpose
Restructure live frontend code in small, evidence-backed steps while preserving the behavior users, callers, tests, routes, and integrations can observe.
Core Contract
Every execution follows these rules:
- Behavior Preservation — pure refactoring intentionally changes structure, not observable behavior.
- Green Baseline First — record available verification before editing.
- One Refactoring at a Time — one primary structural intent per step.
- Verify Every Step — run the narrowest meaningful check immediately after each step.
- Revert Before Repairing — if a new regression appears, revert that step before widening the edit.
- Separate Refactoring from Feature Work — behavior changes belong in a different workflow.
- Smallest Safe Refactoring First — prefer the narrowest transformation that fits the evidence.
- Stay Within the Diff Budget — stop when actual scope materially exceeds the planned scope.
Pure refactoring uses GREEN → REFACTOR → GREEN. Do not manufacture a failing behavioral test merely to make a structural change look like feature TDD.
Procedure
- Classify the request. Confirm that the intended result is structural and behavior-preserving.
- Discover context. Read project configuration, affected modules, public exports, routes, state boundaries, tests, and current diff.
- Record observable contracts. Capture inputs, outputs, errors, side effects, UI states, events, network calls, state transitions, routes, and public APIs that matter.
- Establish the baseline. Run existing narrow checks first; record pre-existing failures rather than attributing them to later edits.
- Diagnose structural evidence. Identify the concrete smell or responsibility problem and check likely false positives.
- Build the safety net. Reuse relevant tests; add characterization coverage only when needed to preserve existing behavior.
- Plan ordered micro-refactorings. For each step record technique, rationale, prerequisites, risk, Diff Budget, verification, and rollback boundary.
- Apply exactly one primary transformation. Avoid opportunistic cleanup, formatting churn, or unrelated redesign.
- Verify immediately. Compare actual scope with the Diff Budget and run targeted checks.
- Handle regression. Revert the current step, confirm the prior baseline, shrink or reorder the transformation, then retry only with evidence.
- Run broad final validation. Escalate from targeted checks to typecheck, tests, build, E2E, accessibility, or specialty checks when relevant.
- Report proof strength. Use PASS, PARTIAL, or NOT PROVEN and state remaining risk.
Risk Classification
| Risk | Typical scope | Default action |
|---|---|---|
SAFE | Local/private code, stable contracts, easy rollback | Execute with step-level verification |
CAUTION | Cross-module movement, shared state, imports, hooks/composables, lifecycle | Execute only with adequate safety evidence |
DANGER | Public API, routes, persistence, network contracts, auth, SSR/hydration, broad state or inheritance redesign | Plan and stop for explicit approval unless already authorized |
Risk is contextual. A technique name alone never proves that a change is safe.
Diff Budget
Before each executable step record:
Expected files: N
Expected functions/components: N
Expected public API changes: 0
Expected behavior changes: 0
If the actual diff materially exceeds that budget, stop and reassess instead of silently expanding into redesign.
References
- Load principles.md for the safety rules, evidence model, and risk language.
- Load workflow.md for the state machine, baseline handling, rollback, and reporting contract.
- Load when-to-refactor.md when deciding whether restructuring is timely or should be deferred.
- Load refactoring-vs-feature-change.md when ownership overlaps feature work, debugging, cleanup, migration, or review.
Constraints
- Do not alter tests merely to accept behavior changed by the refactoring.
- Do not label auth, permission, routing, persistence, protocol, or public package changes
SAFEwithout specific evidence. - Do not stack additional structural edits after a newly introduced failure.
- Do not install a new test framework automatically when the project has none.
- Do not treat line count, complexity metrics, comments, a switch, or chaining as sufficient proof of a code smell.
- Do not perform remote Git writes by default.
Expected Output
A small-step refactoring plan or implementation with explicit evidence, risk, Diff Budget, per-step verification, rollback history when applicable, and a final PASS/PARTIAL/NOT PROVEN behavior-preservation verdict.
Related skills
Find why your productivity system keeps failing, then apply the smallest fix — capacity math, bottleneck routing, durable local notes.
Generate and edit Draw.io, Mermaid, and Excalidraw diagrams from natural language using a structured JSON spec.
Fetch raw ad creative, app, ranking, and revenue data from AdMapix as structured JSON.
Stores durable facts in a categorized, plain-markdown vault on disk, alongside your agent's built-in memory.
Join a video meeting as an AI bot with voice, avatar, and screenshare across four operating modes.
More from bovinphang
Browse all skillsGenerate or edit diagrams, visual assets, and image workflows with reviewable PNG self-checks and bounded self-repair.
Use when creating editable technical diagrams with draw.io / diagrams.net sources, including architecture diagrams, ERD, UML, sequence diagrams, flowcharts, ML model diagrams, official shape lookup, brand symbols, Graphviz auto-layout, codebase structure maps, .drawio validation, or draw.io CLI expo
Use when building, reviewing, or improving frontend UI that needs product-specific design direction, design-system generation, Master/Page overrides, distinctive visual identity, anti-generic interface choices, first-screen hierarchy, UI polish, chart UX, interaction states, responsive behavior, or
Use when creating or reviewing Next.js 14+ App Router projects, file routes, layouts, server/client component boundaries, SSR/SSG/ISR, streaming, metadata, middleware, server actions, or Next-specific data fetching. For generic client React component architecture, apply the project's React conventio
Use when creating, reviewing, or restructuring frontend monorepos with pnpm workspace, Turborepo, Nx, multi-package dependency boundaries, task orchestration, package naming, or package publishing; Chinese triggers include monorepo, workspace, multi-package.
Use when creating or reviewing Nuxt 3 projects, file routes, pages, layouts, SSR/SSG/SPA behavior, Nuxt data fetching, route middleware, plugins, modules, server routes, or Nuxt-specific Vue 3 conventions. For generic Vue component architecture, apply the project's Vue conventions separately; Chines