Exécutez n'importe quel Skill dans Manus
en un clic

Exécutez n'importe quel Skill dans Manus en un clic

Commencer

component-refactoring

Étoiles0

Forks0

Mis à jour8 février 2026 à 13:35

Use when React components are too large or complex and need extraction, simplification, or separation of concerns.

Installation

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Exécuter dans Manus

Source

luxunxiansheng

luxunxiansheng/skills2026

Ouvrir le dépôt GitHub Voir les dépôts du créateur

Téléchargement

Exécuter dans Manus

Métiers associésSOC

Basé sur la classification professionnelle SOC

Développeurs de logicielsProfessions informatiques et mathématiques·SOC 15-1252

SKILL.md

readonly

name	component-refactoring
description	Use when React components are too large or complex and need extraction, simplification, or separation of concerns.

Component Refactoring Skill

Refactor high-complexity React components with the patterns and workflow below.

Complexity Threshold: Components with lineCount > 300 should be considered for refactoring.

Core Refactoring Patterns

Pattern 1: Extract Custom Hooks (for complex state/business logic)
Pattern 2: Extract Sub-Components (for monolithic JSX)
Pattern 3: Simplify Conditional Logic (for deep nesting/complex ternaries)
Pattern 4: Extract API/Data Logic (use @tanstack/react-query or similar hooks)
Pattern 5: Extract Modal/Dialog Management (isolated open/close states)

Refactoring Workflow

Analyze Component (Check file size and search for long functions/JSX blocks)
Plan Refactoring based on identified patterns.
Execute Incrementally (extract logic/JSX into new files, verify lint and type-checks)
Verify that the component is now more readable and maintainable.

Plus depuis ce dépôt

même dépôt

api-design-pro

luxunxiansheng/skills2026

Use when designing, reviewing, or modifying backend API endpoints, schemas, validation, and API documentation.

2026-02-080

architecture-advisor

luxunxiansheng/skills2026

Use when reviewing architecture boundaries, dependency direction, or multi-layer design decisions across modules.

2026-02-080

brainstorming

luxunxiansheng/skills2026

Use when shaping new features or behavior changes that need requirements clarification and option tradeoff exploration before implementation.

2026-02-080

dispatching-parallel-agents

luxunxiansheng/skills2026

Use when facing 2+ independent tasks that can be worked on without shared state or sequential dependencies

2026-02-080

domain-driven-design

luxunxiansheng/skills2026

Use when modeling domain concepts, aggregates, and bounded contexts or checking DDD alignment in existing code.

2026-02-080

football-data-ai

luxunxiansheng/skills2026

Use when implementing or reviewing football data logic, pitch coordinates, event modeling, or sports vision pipelines.

2026-02-080

name	component-refactoring
description	Use when React components are too large or complex and need extraction, simplification, or separation of concerns.

Component Refactoring Skill

Refactor high-complexity React components with the patterns and workflow below.

Complexity Threshold: Components with lineCount > 300 should be considered for refactoring.

Core Refactoring Patterns

Pattern 1: Extract Custom Hooks (for complex state/business logic)
Pattern 2: Extract Sub-Components (for monolithic JSX)
Pattern 3: Simplify Conditional Logic (for deep nesting/complex ternaries)
Pattern 4: Extract API/Data Logic (use @tanstack/react-query or similar hooks)
Pattern 5: Extract Modal/Dialog Management (isolated open/close states)

Refactoring Workflow

Analyze Component (Check file size and search for long functions/JSX blocks)
Plan Refactoring based on identified patterns.
Execute Incrementally (extract logic/JSX into new files, verify lint and type-checks)
Verify that the component is now more readable and maintainable.