component-refactor
CommunityRefactor React components, cut duplication by 80%.
Software Engineering#refactoring#React#maintainability#custom hooks#reusable components#component composition#code duplication
Authorjoaopelegrino
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This skill tackles the problem of extensive code duplication (currently ~25% or 800 lines) across similar React components, leading to high maintenance costs and inconsistent codebases. It streamlines development by promoting reusable, generic components and custom hooks.
Core Features & Use Cases
- Duplicate Code Elimination: Identify and refactor repetitive logic into reusable custom hooks (e.g.,
useAutoSaveNotes,useModuleProgress). - Generic Component Creation: Develop a
BaseLearningSystemcomponent to serve as a template for multiple learning systems, drastically reducing boilerplate. - Modular Subcomponents: Extract common UI blocks (e.g.,
Breadcrumb,ProgressBar,NotesSection) into shared, reusable components. - Use Case: Transform five highly duplicated
*LearningSystem.jsxcomponents into a singleBaseLearningSystemcomponent, reducing 800 lines of repeated code to a minimal, maintainable structure.
Quick Start
Use the component-refactor skill to extract the auto-save logic from CLearningSystem.jsx into a new useAutoSaveNotes.js custom hook.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: component-refactor Download link: https://github.com/joaopelegrino/app-controle/archive/main.zip#component-refactor Please download this .zip file, extract it, and install it in the .claude/skills/ directory.