Decompose

Split an oversized component into focused helpers, hooks, and sub-components. Use when React/UI code mixes rendering, state, effects, handlers, data shaping, and repeated sections, or when a file is hard to scan. Preserve behavior and avoid generic abstractions. For general code restructuring use refactoring; for abstraction decisions beyond one component use code-architecture-wrong-abstraction.

flpbalada 77e7a65 1.4 KB Updated

File contents

Decompose Component

Split a component into focused units. Keep behavior unchanged.

Goal

Improve readability and ownership. Do not create needless abstractions.

Rules

  • Preserve behavior unless user approves behavior change.
  • Prefer smallest correct split.
  • Extract only when readability, reuse, or locality improves.
  • Keep state near the code that owns it.
  • Keep side effects explicit.
  • Avoid moving code only to reduce file length.
  • Do not create generic helpers for one unclear use.

Flow

  1. Read component and identify responsibilities.
  2. Mark state, effects, data transforms, handlers, and UI sections.
  3. Choose extraction candidates.
  4. Extract pure helpers first when obvious.
  5. Extract hooks only for cohesive state/effects.
  6. Extract sub-components for stable UI sections.
  7. Verify behavior and imports.

Output

## Decomposition
- Extracted: [helper/hook/component]
- Reason: [responsibility isolated]
- Preserved: [behavior]
- Verification: [check run or reason not run]

flpbalada/fb-skills/tree/main/skills/decompose commit 77e7a65e4d

Frequently asked questions

npx skillmds@latest add flpbalada/decompose