React & TypeScript Refactoring

소개

Designed to combat code bloat and maintainability issues, this skill provides a systematic approach to refactoring React and TypeScript projects. It targets specific linter failures—such as high cognitive complexity or excessive function length—and provides actionable patterns for component extraction, custom hook creation, and logic simplification. Whether you are dealing with deeply nested conditionals or massive components, this skill offers a clear workflow to transform brittle code into clean, modular, and testable architectures.

주요 기능

• Complexity reduction targeting SonarJS cognitive, cyclomatic, and expression metrics
• Component decomposition strategies to maintain clean file structures and small LOC counts
• Integration of Zod for robust, centralized form and data validation logic
• 1 GitHub stars
• Standardized patterns for extracting business logic into custom React hooks
• Logic simplification through early returns, guard clauses, and boolean extraction

사용 사례

• Refactoring legacy 'God Components' into a modular atomic design
• Migrating complex inline business logic into reusable custom hooks
• Fixing ESLint complexity errors during CI/CD or local development