React Refactor
by pproencacf93c57cac89No license215 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 7 weeks ago
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).
Only the file list is public. File contents are available once the skill is installed in a workspace.
| Path | Size | Type |
|---|---|---|
| AGENTS.md | 8.6 KB | text/markdown |
| assets/templates/_template.md | 631 B | text/markdown |
| metadata.json | 777 B | application/json |
| README.md | 4.3 KB | text/markdown |
| references/arch-composition-over-props.md | 2.8 KB | text/markdown |
| references/arch-compound-components.md | 3.1 KB | text/markdown |
| references/arch-container-presentational.md | 3 KB | text/markdown |
| references/arch-feature-colocation.md | 2 KB | text/markdown |
| references/arch-headless-pattern.md | 3.5 KB | text/markdown |
| references/arch-interface-segregation.md | 2.9 KB | text/markdown |
| references/arch-push-client-low.md | 3.2 KB | text/markdown |
| references/arch-render-props-to-hooks.md | 1.9 KB | text/markdown |
| references/couple-barrel-free-features.md | 2.6 KB | text/markdown |
| references/couple-break-circular-deps.md | 2.4 KB | text/markdown |
| references/couple-dependency-injection.md | 2.3 KB | text/markdown |
| references/couple-stable-imports.md | 2.5 KB | text/markdown |
| references/data-context-module-pattern.md | 3.2 KB | text/markdown |
| references/data-granular-error-boundaries.md | 2.6 KB | text/markdown |
| references/data-server-first-fetch.md | 2.9 KB | text/markdown |
| references/data-tanstack-query-client.md | 2.7 KB | text/markdown |
| references/decomp-complete-extraction.md | 2.8 KB | text/markdown |
| references/decomp-extract-by-change-reason.md | 3.5 KB | text/markdown |
| references/decomp-extract-pure-functions.md | 3.3 KB | text/markdown |
| references/decomp-inline-premature.md | 3.1 KB | text/markdown |
| references/decomp-scroll-test.md | 3.9 KB | text/markdown |
| references/decomp-separate-view-logic.md | 3.7 KB | text/markdown |
| references/hook-avoid-object-deps.md | 2.3 KB | text/markdown |
| references/hook-composition-over-nesting.md | 2.6 KB | text/markdown |
| references/hook-dependency-stability.md | 2.7 KB | text/markdown |
| references/hook-extract-when-nameable.md | 2.7 KB | text/markdown |
| references/hook-naming-conventions.md | 2.5 KB | text/markdown |
| references/hook-single-responsibility.md | 3.3 KB | text/markdown |
| references/safety-characterization-tests.md | 2.5 KB | text/markdown |
| references/safety-extract-pure-testability.md | 3 KB | text/markdown |
| references/safety-integration-over-unit.md | 3.1 KB | text/markdown |
| references/safety-snapshot-free.md | 2.4 KB | text/markdown |
| references/safety-test-behavior.md | 2.4 KB | text/markdown |
| references/_sections.md | 1.9 KB | text/markdown |
| references/state-colocate-with-consumers.md | 2.1 KB | text/markdown |
| references/state-context-for-static.md | 2.9 KB | text/markdown |
| references/state-derive-dont-sync.md | 2.2 KB | text/markdown |
| references/state-lift-only-when-shared.md | 2 KB | text/markdown |
| references/state-machines-for-workflows.md | 3.6 KB | text/markdown |
| references/state-reducer-for-complex.md | 3.1 KB | text/markdown |
| references/state-url-as-state.md | 3.6 KB | text/markdown |
| SKILL.md | 9.2 KB | text/markdown |
Source and attribution
Source:pproenca/dot-skillsinskills/.experimental/react-refactorat commitcf93c57
License: No license
Content belongs to its original authors. SourceWeft indexes it from a public repository.
More from pproenca/dot-skills
Typescript Refactor
pproenca
Guidelines for refactoring and modernizing TypeScript and React/TSX code, covering 47 rules across nine categories.
Tailwind Ui Refactor
pproenca
A 52-rule Tailwind CSS UI refactoring guide covering hierarchy, spacing, typography, color, depth and polish.
Shell
pproenca
A reference guide of 49 shell scripting best practices for writing safe, portable, and maintainable bash and sh scripts.
Expo React Native Performance
pproenca
Guidelines for optimizing performance in Expo React Native apps, covering startup, lists, re-renders, animations, assets, memory and async.
Framer Motion
pproenca
Guidelines for optimizing Framer Motion animation performance in React applications.
Emilkowal Animations
pproenca
Reference guide of web animation best practices covering easing, timing, transforms, gestures, accessibility and Tailwind v4.
More in Software Development
Playground
anthropics
Builds self-contained interactive HTML playgrounds with controls, live preview, and copyable prompt output.
M5 Onboard
anthropics
Provisions M5Stack ESP32 boards by detecting them on USB, flashing UIFlow 2.0 firmware, and installing a MicroPython app bundle.
Cardputer Buddy
anthropics
Guides iterating on a Cardputer-Adv MicroPython app bundle: adding apps, pushing files over USB-serial, tailing logs, and running REPL commands.
Web Design Guidelines
vercel-labs
Reviews UI code against Web Interface Guidelines fetched from a remote source and reports findings as file:line entries.
Vercel React Native Skills
vercel-labs
React Native and Expo best-practice rules covering list performance, animation, navigation, UI patterns, state, and monorepo setup.
Vercel React Best Practices
vercel-labs
Vercel's React and Next.js performance guidelines, organized as 70 rules for writing, reviewing, and refactoring code.