skills.rest
BrOrlandi
BrOrlandiCOMMUNITY
Explore all skills by this author →
Website𝕏@brorlandiGitHub

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
One-click install
npx skills add https://github.com/BrOrlandi/my-claude-skills --skill refactor-components
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
meirmmeirm
13

checking-code-formatting

Detect code formatting issues across multiple programming languages.

Community
Advanced
SethGammonSethGammon
820

refactor

Plan and execute multi-file refactorings with automatic rollback on failure.

Community
Advanced
qazuorqazuor

react-patterns

Standardize React component design with reusable TypeScript patterns for components, hooks, and composition.

Community
Basic
ahoymahoym
2

do-refactor-code

Analyzes Python code files for refactoring opportunities and provides suggestions.

Community
Advanced