flpbalada/fb-skills

decompose

Split an oversized component into focused helpers, hooks, and sub-components.

First seen May 4, 2026

Installation

$ npx skills add flpbalada/fb-skills --skill decompose

Summary

  • 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.

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

Also in this package

Other skills from flpbalada/fb-skills · top by installs.

npx skills add flpbalada/fb-skills

Browse all from flpbalada/fb-skills

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 7
Default branch main
Open issues 0
Status Active

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 1,459 B
  • docs SUMMARY.md 415 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 16 installs

SKILL.md

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]