Individual skill

react-refactor

Architectural refactoring guide for React applications covering component architecture, state architecture, hook patterns, component decomposition, coupling and cohesion, data flow, and refactoring safety. Use when refactoring React codebases, reviewing PRs for architectural issues, decomposing oversized components, or improving module boundaries. Does NOT cover React 19 API usage (see react skill) or performance optimization (see react-optimise skill).

skills/.experimental/react-refactor/SKILL.md

Read pinned source

Source commit cf93c57cac89d6fc3e4194686000411567f5caf3

What was checked

Matches the observed repository HEAD: Yes
Scanner rules are current: Yes
Repository scan complete: No
Skill scan complete: Yes
Observed behavior: Network or broad shell
Last checked: Nov 5, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings): 221
Repository last updated: Aug 15, 2026
License: MIT

Observed agent integration: codex

engineering Derived category
data Derived category
engineering-web Derived category

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files

AGENTS.mddoc · 8,815 bytes
README.mddoc · 4,426 bytes
SKILL.mdcore · 9,414 bytes
assets/templates/_template.mddoc · 631 bytes
metadata.jsonasset · 777 bytes
references/_sections.mddoc · 1,898 bytes
references/arch-composition-over-props.mddoc · 2,906 bytes
references/arch-compound-components.mddoc · 3,127 bytes
references/arch-container-presentational.mddoc · 3,082 bytes
references/arch-feature-colocation.mddoc · 2,086 bytes
references/arch-headless-pattern.mddoc · 3,551 bytes
references/arch-interface-segregation.mddoc · 2,927 bytes
references/arch-push-client-low.mddoc · 3,232 bytes
references/arch-render-props-to-hooks.mddoc · 1,984 bytes
references/couple-barrel-free-features.mddoc · 2,642 bytes
references/couple-break-circular-deps.mddoc · 2,503 bytes
references/couple-dependency-injection.mddoc · 2,392 bytes
references/couple-stable-imports.mddoc · 2,537 bytes
references/data-context-module-pattern.mddoc · 3,279 bytes
references/data-granular-error-boundaries.mddoc · 2,659 bytes
references/data-server-first-fetch.mddoc · 2,926 bytes
references/data-tanstack-query-client.mddoc · 2,745 bytes
references/decomp-complete-extraction.mddoc · 2,873 bytes
references/decomp-extract-by-change-reason.mddoc · 3,624 bytes
references/decomp-extract-pure-functions.mddoc · 3,405 bytes
references/decomp-inline-premature.mddoc · 3,183 bytes
references/decomp-scroll-test.mddoc · 3,950 bytes
references/decomp-separate-view-logic.mddoc · 3,778 bytes
references/hook-avoid-object-deps.mddoc · 2,402 bytes
references/hook-composition-over-nesting.mddoc · 2,680 bytes
references/hook-dependency-stability.mddoc · 2,761 bytes
references/hook-extract-when-nameable.mddoc · 2,735 bytes
references/hook-naming-conventions.mddoc · 2,514 bytes
references/hook-single-responsibility.mddoc · 3,329 bytes
references/safety-characterization-tests.mddoc · 2,583 bytes
references/safety-extract-pure-testability.mddoc · 3,053 bytes
references/safety-integration-over-unit.mddoc · 3,191 bytes
references/safety-snapshot-free.mddoc · 2,504 bytes
references/safety-test-behavior.mddoc · 2,445 bytes
references/state-colocate-with-consumers.mddoc · 2,129 bytes
references/state-context-for-static.mddoc · 2,936 bytes
references/state-derive-dont-sync.mddoc · 2,302 bytes
references/state-lift-only-when-shared.mddoc · 1,999 bytes
references/state-machines-for-workflows.mddoc · 3,663 bytes
references/state-reducer-for-complex.mddoc · 3,178 bytes
references/state-url-as-state.mddoc · 3,675 bytes

Read excerpt


# React Refactor Best Practices

Architectural refactoring guide for React applications. Contains 40 rules across 7 categories, prioritized by impact from critical (component and state architecture) to incremental (refactoring safety).

## When to Apply

- Refactoring existing React codebases or planning large-scale restructuring
- Reviewing PRs for architectural issues and code smells
- Decomposing oversized components into focused units
- Extracting reusable hooks from component logic
- Improving testability of React code
- Reducing coupling between feature modules

## Rule Categories