Does this skill perform visual redesigns?

No, the skill's guardrails strictly prohibit mixing visual redesigns with structural refactoring to ensure the public API and DOM remain stable.

Does it support monorepos?

Yes, it is optimized for monorepo environments and uses package-specific filters to run linting, type-checking, and tests.

Will this skill break my existing tests?

No. A core requirement of this skill is to create or update tests for every extracted component. It runs coverage checks and will not proceed if thresholds fail.

What is the recommended PR strategy for these refactors?

The skill follows an incremental approach, focusing first on structural extraction without behavior changes, followed by optional cleanup in subsequent PRs.

How does the skill identify which components to split?

The skill searches for TSX files over 300 lines or files containing multiple export definitions, prioritizing components with distinct UI sections, deep nesting, or repetitive JSX patterns.

React Component Refactor & Split

Name: React Component Refactor & Split
Author: a2f0

bya2f0

0•

開発者ツール

Refactors oversized React component files into modular, test-backed subcomponents to improve maintainability and code quality.

This skill automates the process of identifying and refactoring monolithic React files within a monorepo. It scans for TSX files exceeding 300 lines or containing multiple component definitions, then intelligently extracts them into a standardized 'one-component-per-file' structure. By ensuring each new module is colocated with its own tests and maintains existing coverage thresholds, it helps teams manage technical debt during maintenance cycles or downtime without risking regressions or CI failures.

主な機能

01Mandatory test colocation and coverage validation for all new modules

020 GitHub stars

03Structural refactoring that preserves public APIs and DOM stability

04Automated discovery of oversized TSX files and multiple component definitions

05Incremental PR strategy for safe, reviewable code organization

06Intelligent extraction of subcomponents based on logical UI boundaries

ユースケース

01Standardizing folder organization and test colocation across a large monorepo

02Improving codebase maintainability during scheduled technical debt sessions

03Refactoring legacy monolithic React pages into manageable, reusable components

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add a2f0/tearleads preen-split-react-components

For use in Claude.ai and ChatGPT

Download Skill