skills.rest
pproenca
pproencaCOMMUNITY
Explore all skills by this author →
𝕏@ThePedroProencaGitHub

react-refactor

Guide architectural refactoring of React applications with structured rules.

193|17|Updated Jan 16, 2026
Search Tags:#code quality#architecture#best practices#refactoring#react#component design
One-click install
npx skills add https://github.com/pproenca/dot-skills --skill react-refactor
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-refactor
Source: https://github.com/pproenca/dot-skills/tree/main/skills/.experimental/react-refactor
Command: npx skills add https://github.com/pproenca/dot-skills --skill react-refactor

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the challenges of maintaining and evolving React codebases by providing a structured methodology for architectural refactoring, improving code quality, testability, and maintainability.

Core Features & Use Cases

  • Comprehensive Rule Set: Offers 40+ rules across 7 categories (Component Architecture, State Architecture, Hook Patterns, Component Decomposition, Coupling & Cohesion, Data & Side Effects, Refactoring Safety).
  • Actionable Guidance: Each rule includes code smell indicators, before/after transforms, and safe refactoring steps.
  • Use Case: When reviewing a large Pull Request, use this Skill to identify potential architectural issues and suggest best practices for improving component structure, state management, and module boundaries.

Quick Start

Use the react-refactor skill to identify and fix issues related to component decomposition in the 'src/components/UserProfile.tsx' file.

Frequently Asked Questions about react-refactor

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

FAQPage Schema
How do I refactor React components to improve architecture and maintainability?▼

To refactor React components effectively, apply a structured methodology covering component decomposition, state management, and hook patterns to improve code quality, testability, and maintainability across your application.

What are common React anti-patterns to look for when reviewing a pull request?▼

Common React anti-patterns include poor component structure, improper state management, tight coupling, and flawed data flow. Reviewing pull requests against a rule set of architectural best practices helps identify these issues.

How do I safely decompose large React components into smaller, manageable ones?▼

Safely decompose large React components by following actionable guidance with before and after transforms, ensuring refactoring safety by addressing component boundaries, cohesion, and data flow step by step.

Does this approach to React refactoring work for large-scale restructuring efforts?▼

Yes, this approach works for large-scale restructuring by providing a comprehensive rule set across seven categories like component architecture and state architecture, guiding complex codebase evolution with confidence.

What is the best way to identify code smells in React state management and hooks?▼

The best way to identify code smells in React state management is evaluating hook patterns and data flow against established architectural rules, using specific indicators to spot improper state design.

Related Skills

Explore More Software Engineering Skills→
langgeniuslanggenius
151.8k

component-refactoring

Refactor high-complexity React components in the Dify frontend.

Official
Advanced
gkganesh12gkganesh12
1

gk-review

Audit source code against documentation and test suites for architectural drift.

Community
Advanced
koralliskorallis
90

standards-enforcement

Configure ESLint, Prettier, and Husky to enforce coding standards.

Community
Intermediate
lukemcdonaldlukemcdonald
1

next-upgrade

Upgrade a Next.js project to the latest version with codemods and dependency updates.

Community
Intermediate