refactor-components

Identify large React components and generate structured refactoring plans.

20|1|Updated Feb 6, 2026

Search Tags:#architecture #react #maintainability #component #refactor #code-smell #refactoring-plan

Ready to run

npx skills add https://github.com/BrOrlandi/my-claude-skills --skill refactor-components

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: refactor-components
Source: https://github.com/BrOrlandi/my-claude-skills/tree/main/refactor-components
Command: npx skills add https://github.com/BrOrlandi/my-claude-skills --skill refactor-components

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Find large React components (.tsx/.jsx) with too many responsibilities and refactor them into smaller, focused components. Use when the user wants to clean up or split large components.

Core Features & Use Cases

Identify oversized React components by file type (.tsx/.jsx) and line counts.
Analyze component responsibilities and propose a structured refactoring plan.
Guide the user through selection of extractions (Component, Custom Hook, or Utility) and plan execution.

Quick Start

Scan a project path for .tsx and .jsx files, specify an optional threshold, review the suggested extractions, and approve the plan to proceed.

Frequently Asked Questions about refactor-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I split large React components into smaller focused pieces?▼

To split large React components, scan .tsx and .jsx files by line count to identify oversized units, analyze their responsibilities, and generate a structured refactoring plan with candidate extractions, file paths, and interfaces while preserving existing behavior.

When do I need to refactor a monolithic React component?▼

You need to refactor a monolithic React component when it handles too many responsibilities, such as managing dashboards, forms, or lists, making the code difficult to maintain and requiring extraction into focused units.

What is the best way to identify code smells in React components?▼

The best way to identify code smells in React components is to scan .tsx and .jsx files using a specified line count threshold to find oversized files, then analyze them to propose a structured refactoring plan.

Can I refactor React components while preserving existing behavior?▼

Yes, you can refactor React components while preserving existing behavior by generating a structured plan that includes candidate extractions, file paths, and interfaces to split monolithic components into smaller, focused units safely.

How do I extract custom hooks and utilities from a React component?▼

To extract custom hooks and utilities from a React component, analyze the component's responsibilities to generate a refactoring plan, then guide through the selection of extractions to separate logic into focused units.