skills.rest
bkinsey808
bkinsey808COMMUNITY
Explore all skills by this author →
𝕏@bkinsey808GitHub

source-refactoring

Split TypeScript/React functions and components into dedicated files with preserved exports and JSDoc.

Updated Aug 27, 2026
Search Tags:#testing#refactor#modularization#code-splitting#exports
One-click install
npx skills add https://github.com/bkinsey808/songshare-effect --skill source-refactoring
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: source-refactoring
Source: https://github.com/bkinsey808/songshare-effect/tree/main/.github/skills/source-refactoring
Command: npx skills add https://github.com/bkinsey808/songshare-effect --skill source-refactoring

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Patterns for splitting functions and components into their own files while ensuring consistent exports, JSDoc preservation, and test colocation. This guide helps teams decompose large files into focused modules to improve maintainability, reuse, and clarity across a codebase.

Core Features & Use Cases

  • One function per file by default to promote focused, reusable units.
  • Single symbol exports: use default export for single-symbol files; support multi-symbol files with named exports when necessary.
  • Naming conventions: name files after the symbol for single-symbol files; use kebab-case for multi-symbol files that export multiple symbols.
  • JSDoc preservation: carry over existing documentation and comments during refactoring.
  • Test colocations: move and colocate tests next to the new source file.
  • Import management: update all references to moved symbols across the codebase.

Quick Start

Identify a candidate function or component to extract, create a new file named after the symbol, and move its tests beside the new source file.

Frequently Asked Questions about source-refactoring

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

FAQPage Schema
How do I split a large TypeScript React file into separate modules?▼

To split a large TypeScript React file, extract functions and components into dedicated files named after the symbol. Use default exports for single-symbol files and named exports for multi-symbol files to ensure consistent, reusable units.

What is the best way to preserve JSDoc comments when refactoring code?▼

During code refactoring, preserve existing JSDoc documentation and comments by explicitly carrying them over to the new dedicated source files when you move functions and components.

How do I manage imports and test colocation when extracting components?▼

Manage imports by updating all references to moved symbols across the codebase with absolute imports. Colocate tests by moving them next to the new source file to improve maintainability and clarity.

When should I use default exports vs named exports in a modularized codebase?▼

Use default exports for single-symbol files where one function or component is extracted, and use named exports for multi-symbol files that export multiple symbols using kebab-case naming conventions.

Why does code modularization improve maintainability in React projects?▼

Code modularization improves maintainability by decomposing large files into focused, single-symbol units. This deliberate code-splitting promotes reuse, enforces consistent exports, and clarifies absolute import paths across the codebase.

Related Skills

Explore More Software Engineering Skills→
WomenDefiningAIWomenDefiningAI
9

code-refactoring

Detect oversized code files and suggest refactors across JavaScript, TypeScript, React, and Python.

Official
Intermediate
sorryhyunsorryhyun
12

import-refactor

Update import statements and references across Python, TypeScript, and JavaScript projects.

Community
Intermediate
TechyMTTechyMT
5

naming-conventions

Enforces naming conventions for files and identifiers in TypeScript and React projects.

Community
Basic
simorgh3196simorgh3196
1

rust-refactor-helper

Refactor Rust code with LSP-driven impact analysis and dry-run reports.

Community
Advanced