scip-react-maintainability

name	scip-react-maintainability
description	Review React maintainability with scip-query. Use for React, TSX, JSX, Next.js, duplicated components, hook candidates, large components, frontend health pressure, or verifying reuse after refactors.
commands	[{"template":"scip-query react-component-duplicates --scope <scope> --full --json","when":"Bound and scan: duplicated JSX structure candidates."},{"template":"scip-query react-hook-candidates --scope <scope> --full --json","when":"Bound and scan: shared state/effect/request extraction candidates."},{"template":"scip-query react-large-component-pressure --scope <scope> --full --json","when":"Bound and scan: components carrying several reasons to change."},{"template":"scip-query recent-duplicates --scope <scope> --full --json","when":"Bound and scan: recent code re-implementing established components."},{"template":"scip-query similar <closest-existing-component-or-hook>","when":"Cross-check candidates: existing component or hook to reuse instead."},{"template":"scip-query health --scope <scope> --json","when":"Bound and scan: frontend health pressure for the scope."}]

scip-react-maintainability

Use this skill to review React frontends as maintainable systems of components, hooks, JSX structure, and behavior lifecycles.

Load shared mechanics from ../_shared/SKILL.md.

Commands for this skill

Command	Purpose	When
scip-query react-component-duplicates --scope <scope> --full --json	Find heuristic duplicated React component structure candidates from JSX tags, props, events, and bindings	Bound and scan: duplicated JSX structure candidates.
scip-query react-hook-candidates --scope <scope> --full --json	Find heuristic React hook extraction candidates from shared state, effects, requests, and handlers	Bound and scan: shared state/effect/request extraction candidates.
scip-query react-large-component-pressure --scope <scope> --full --json	Find heuristic large React component pressure candidates from component lines, JSX structure, and hook behavior	Bound and scan: components carrying several reasons to change.
scip-query recent-duplicates --scope <scope> --full --json	Directional duplicate candidates: recent code that re-implements established callable, React, or Vue code	Bound and scan: recent code re-implementing established components.
scip-query similar <closest-existing-component-or-hook>	Find heuristic function similarity candidates from callee fingerprints	Cross-check candidates: existing component or hook to reuse instead.
scip-query health --scope <scope> --json	Composite codebase health report with prioritized action list	Bound and scan: frontend health pressure for the scope.

Use this shortlist first. Open ../_shared/SKILL.md only when it is insufficient.

Terms

A React component duplicate candidate is a pair or group of rendered structures that repeat the same user-facing arrangement, controls, states, props, or data-presentation shape enough that a shared component may reduce drift.

A React hook candidate is a pair or group of component behaviors that repeat the same state lifecycle, effects, requests, validation, persistence, callback policy, or derived-data rule enough that a shared hook may preserve behavior better.

Large component pressure means one component or file contains several kinds of knowledge that change for different reasons.

Workflow

1. Bound and scan

Pick the narrowest React source root, feature area, or changed-file scope that still includes likely reuse partners. Run uncapped commands:

scip-query react-component-duplicates --scope <scope> --full --json
scip-query react-hook-candidates --scope <scope> --full --json
scip-query react-large-component-pressure --scope <scope> --full --json
scip-query recent-duplicates --scope <scope> --full --json
scip-query health --scope <scope> --json

This step is complete only when command scope, counts, and uncapped/full status are recorded.

2. Cross-check candidates

• Component duplicate only: inspect for shared presentational component or existing component reuse.
• Hook candidate only: inspect for shared behavior, lifecycle, request, validation, persistence, or derived-state policy.
• Both: inspect for a feature-level concept needing both component and hook boundaries.
• Large component only: split by reason to change, not by line count.

Use:

scip-query outline <file>
scip-query deps <file>
scip-query rdeps <file>
scip-query similar-files --scope <scope>
scip-query similar <closest-existing-component-or-hook>

This step is complete only when each top candidate is reuse, extract, split, skip, or blocked.

3. Act on findings

Prefer reuse before extraction. Extract components for repeated UI structure, states, props, slots/children, or design-system composition. Extract hooks for repeated state, effects, requests, subscriptions, memoized derivations, callbacks, or persistence. Keep domain-specific variation at call sites when essential.

This step is complete only when the chosen action reduces future drift without creating boolean-soup APIs or wrapper components with no policy.

4. Verify

Run routed postchecks from the shared reference, including React commands, incomplete-migration, recent-duplicates, unused-params, and wrapper/passthrough/stale checks, then invoke scip-verify.

The work is complete only when acted-on candidate pairs disappear, weaken materially, or are explicitly accepted as essential variation.

False Positive Checks

Shared design-system primitives, icons, labels, route names, or test IDs are not enough. Similar JSX with different domain lifecycles may justify a presentational component but not a hook. A large file is review pressure, not proof of duplication.

Report

Report executive read, command evidence, candidate groups, recommended action, post-change proof, and remaining accepted variation.