Jeden Skill in Manus ausführen
mit einem Klick

Jeden Skill in Manus mit einem Klick ausführen

Loslegen

component-refactoring

Sterne0

Forks0

Aktualisiert8. Februar 2026 um 13:35

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

Installation

Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.

In Manus ausführen

Quelle

luxunxiansheng

luxunxiansheng/skills2026

GitHub-Repository öffnen Creator-Repositorys ansehen

Download

In Manus ausführen

Verwandte BerufeSOC

Basierend auf der SOC-Berufsklassifikation

SoftwareentwicklerInformatik- und Mathematikberufe·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.

Mehr aus diesem Repository

gleiches Repository

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.