What problem does it solve? Duplication gates like jscpd or qlty flag cloned component code, but extracting the shared block risks silently changing what every consumer renders. This Skill guides the extraction of duplicated React component internals into a shared module and proves the refactor is safe by requiring a full visual regression suite run with zero rewritten baselines. ## Core Features & Use Cases - Guided extraction workflow: Confirm the clone is real, extract into the shared internals location under the source root, export through the barrel, and migrate every consumer. - Visual regression proof: Run the full visual suite and require zero rewritten baselines, so the rendered DOM is byte-identical for all consumers. - Repository-shape awareness: Adapts to React SPA, Next.js, and component-library shapes, with fallback steps when no visual suite or duplication gate exists. - Use Case: A jscpd failure flags two icon components differing only in path and viewBox. Extract the shared markup into the internals barrel, migrate all consumers, run the visual suite, and confirm no baseline changed before re-running the duplication gate. ## Quick Start Extract the duplicated component code flagged by the duplication gate into a shared module and verify the refactor with the full visual test suite.
