skills.rest
kurokeita
kurokeitaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

component-refactoring

Automate structured refactoring of complex React components with staged plans.

1|Updated Jan 17, 2026
Search Tags:#React#frontend#hooks#component#pnpm#refactor#code-splitting
One-click install
npx skills add https://github.com/kurokeita/ai-agent --skill component-refactoring-kurokeita
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-refactoring
Source: https://github.com/kurokeita/ai-agent/tree/main/skills/component-refactoring
Command: npx skills add https://github.com/kurokeita/ai-agent --skill component-refactoring-kurokeita

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Refactor high-complexity React components in the Dify frontend to reduce cognitive complexity, improve maintainability, and enable scalable UI patterns.

Core Features & Use Cases

  • Automated refactoring workflow: Guides detection, planning, and incremental extraction of hooks, sub-components, and modularization.
  • Pattern-guided refactoring: Provides core patterns such as extracting hooks, sub-components, API/data logic, modal management, and form logic to simplify components.
  • Use cases: When a component exhibits complexity > 50 or line counts > 300, and when users request code-splitting or hook extraction to improve testability.

Quick Start

Use the skill to start a refactoring session in the web codebase:

  • cd web
  • pnpm refactor-component <path-to-component>
  • pnpm refactor-component <path> --json
  • pnpm analyze-component <path> --json
  • Follow prompts to generate an incremental plan and run lint/type-check/test after each extraction.

Frequently Asked Questions about component-refactoring

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

FAQPage Schema
How do I refactor complex React components to extract hooks and split code?▼

Refactor complex React components by running pnpm refactor-component to generate a staged plan for hook extraction, sub-component creation, and code-splitting. This workflow ensures incremental modularization while preserving original behavior through linting, type-checking, and tests.

When do I need to start refactoring a React component for better maintainability?▼

Refactoring is needed when a React component exhibits a complexity metric above 50 or exceeds 300 lines of code. These thresholds indicate high cognitive complexity, signaling that hook extraction and modularization are necessary to improve maintainability and testability.

What's the best way to automate modularization workflows for frontend modules?▼

Automate frontend modularization by using pnpm analyze-component to assess complexity and pnpm refactor-component to guide the extraction process. This provides pattern-guided refactoring for API logic, modal management, and form logic to simplify highly coupled UI modules.

Does this guided React refactoring workflow run lint and type checks after code extraction?▼

Yes, guided React refactoring requires running lint, type-checking, and tests after each incremental extraction stage. This staged approach validates that behavior is preserved and code-splitting operations do not introduce type errors or regressions in the frontend.

Can I get a structured JSON analysis of my React component's complexity metrics?▼

Yes, you can retrieve structured JSON analysis of React component complexity by running pnpm analyze-component <path> --json. This outputs measurable metrics to help identify when code-splitting, hook extraction, or sub-component creation is required.

What patterns are prescribed for simplifying high-complexity React components?▼

Prescribed patterns for simplifying complex React components include extracting custom hooks, creating sub-components, isolating API and data logic, and separating modal and form management. These modularization patterns reduce cognitive load and enable scalable UI architecture.

Related Skills

Explore More Software Engineering Skills→
langgeniuslanggenius
151.8k

component-refactoring

Refactor high-complexity React components in the Dify frontend.

Official
Advanced
djnsty23djnsty23
2

refactor

Refactor TypeScript and JavaScript code with pattern-based guidance.

Community
Advanced
cpa03cpa03

typescript-refactor

Refactor TypeScript code while preserving type safety and test coverage.

Community
Advanced
akshatdaltonakshatdalton

efx

Execute bash, python, or pytest commands on eightfold EC2 boxes via SSH.

Community
Advanced