modular-refactoring-pattern

Extract constants, helpers, and utilities into focused files for TypeScript/JavaScript projects.

Updated Oct 1, 2025
One-click install
npx skills add https://github.com/j0KZ/mcp-agents --skill modular-refactoring-pattern
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: modular-refactoring-pattern
Source: https://github.com/j0KZ/mcp-agents/tree/main/starter-kit/template/.claude/skills/modular-refactoring-pattern
Command: npx skills add https://github.com/j0KZ/mcp-agents --skill modular-refactoring-pattern

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill promotes a modular architecture approach to keep individual files under 300 LOC by extracting constants, helpers, and utilities.

Core Features & Use Cases

  • File size and complexity guidance to trigger extraction
  • Extraction patterns for constants, helpers, and utilities
  • Step-by-step refactoring workflow with minimal disruption
  • Real-world guardrails to prevent duplication

Quick Start

Identify long files, create a constants/ and helpers/ structure, move magic numbers and complex logic into extracted modules.

Frequently Asked Questions about modular-refactoring-pattern

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

FAQPage Schema
How do I refactor TypeScript files that are getting too large?

Refactor long files by extracting constants, helpers, and utilities into separate focused modules. Identify files approaching 300 LOC or showing rising complexity, then move magic numbers into constants/, reusable logic into helpers/, and shared utilities into utils/ directories to reduce duplication and keep individual files under 300 LOC.

What's the best way to organize constants and helper functions in a JavaScript project?

Create a modular extraction pattern using dedicated constants/, helpers/, and utils/ directories. Move magic numbers and hardcoded values into constants, isolate complex or repeated logic into helpers, and place generic utility functions in utils. This standard structure enforces <300 LOC per file and complexity under 50.

When should I extract code into separate files to avoid duplication?

Extract code when files exceed 300 LOC, exhibit rising complexity, or show repeated logic patterns. Use a decision tree to identify which logic moves to constants, helpers, or utilities. Extracting early prevents duplication buildup and maintains measurable refactoring outcomes including zero duplication and reduced file complexity.

Can I apply modular refactoring to an existing large codebase?

Yes. The refactoring workflow uses a step-by-step approach with minimal disruption to existing code. Start by identifying long files and high-complexity sections, then systematically relocate logic into the constants/, helpers/, and utils/ structure while maintaining functionality and preventing code duplication.

What metrics define when a TypeScript file is too complex to maintain?

Complexity triggers include file size approaching 300 LOC, cyclomatic complexity exceeding 50, and duplicated logic across multiple locations. This Skill guides extraction decisions using these measurable thresholds to determine when constants, helpers, and utilities should be extracted into separate modules.