mcpField
R
refactor

refactor

github.com/johnlindquistDevelopment2642 installsUpdated 45w ago
Repository

About refactor

Refactor is a skill that guides systematic code refactoring with AI suggestions and AST-based tools. It covers common transformations and recommends small, tested changes that preserve behavior.

Key features

  1. 01AI-guided refactoring analysis
  2. 02JavaScript-to-TypeScript conversion guidance
  3. 03React class-to-hooks guidance
  4. 04AST-based rename transforms
  5. 05Tested, incremental workflow

Use cases

  1. 01Plan safe changes to legacy code
  2. 02Identify duplication and complex functions
  3. 03Rename code symbols with AST transforms

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/johnlindquist/claude --skill refactor

After installing, type/refactorin Claude Code to confirm it loaded.

Details

From the project README

Refactoring Assistant

Systematic code refactoring with AI guidance.

Prerequisites

# Gemini for analysis and suggestions
pip install google-generativeai
export GEMINI_API_KEY=your_api_key

# AST-based tools
npm install -g jscodeshift
npm install -g typescript

Refactoring Operations

JavaScript to TypeScript
# Step 1: Rename file
mv file.js file.ts

# Step 2: AI assistance for types
CODE=$(cat file.ts)
gemini -m pro -o text -e "" "Convert this JavaScript to TypeScript with proper types:

$CODE

Requirements:
- Add explicit types for function parameters and returns
- Create interfaces for object shapes
- Use strict TypeScript (no any unless necessary)
- Preserve functionality exactly"
Class to React Hooks
CODE=$(cat ClassComponent.tsx)
gemini -m pro -o text -e "" "Convert this React class component to functional component with hooks:

$CODE

Requirements:
- Convert state to useState
- Convert lifecycle methods to useEffect
- Convert class methods to functions
- Preserve all functionality
- Use proper TypeScript types"
Modernize Code
CODE=$(cat legacy.ts)
gemini -m pro -o text -e "" "Modernize this code to current best practices:

$CODE

Apply:
- ES2023+ features where appropriate
- Modern TypeScript patterns
- Current framework idioms
- Better error handling
- Improved readability"
Systematic Rename
# Using sed for simple renames
find src -name "*.ts" -exec sed -i '' 's/oldName/newName/g' {} +

# Using ripgrep to preview
rg "oldName" src/

# With jscodeshift for AST-safe rename
npx jscodeshift -t rename-transform.ts src/

# AI-assisted rename planning
gemini -m pro -o text -e "" "I want to rename 'oldName' to 'newName' across the codebase.

Files that use it:
$(rg -l "oldName" src/)

Suggest:
1. Order of changes to avoid breaks
2. Any tricky cases to watch for
3. Tests to run after"

Analysis Commands

Find Refactoring Opportunities
gemini -m pro -o text -e "" "Analyze this code for refactoring opportunities:

$(cat src/module.ts)

Look for:
- Code duplication
- Long functions
- Deep nesting
- Magic numbers/strings
- Poor naming
- Missing abstractions
- Tight coupling"
Complexity Analysis
# Find complex functions
rg "function|=>\s*{" src/ -A 50 | head -200

# Ask AI to identify complexity
gemini -m pro -o text -e "" "Identify the most complex functions in this code and suggest simplifications:

$(cat src/complex-file.ts)"

Safe Refactoring Workflow

Step 1: Ensure Test Coverage
# Check coverage before refactoring
npm test -- --coverage

# Identify untested code
npx jest --coverage --coverageReporters=text | grep -E "^(File|.*\|)"
Step 2: Plan the Refactoring
gemini -m pro -o text -e "" "Plan a safe refactoring for:

CURRENT CODE:
$(cat src/file.ts)

GOAL: [what you want to improve]

Provide:
1. Step-by-step plan
2. Risk assessment
3. Rollback strategy
4. Tests to add first"
Step 3: Small, Tested Changes
# Make one small change
# Run tests
npm test

# Commit if green
git add -A && git commit -m "refactor: [specific change]"

# Repeat
Step 4: Verify Behavior
# Compare before/after behavior
# Run integration tests
# Manual testing if needed

Common Refactorings

Extract Function
gemini -m pro -o text -e "" "Extract a reusable function from this code:

$(cat src/file.ts | sed -n '10,50p')

Create a well-named function with:
- Clear parameters
- Typed return value
- JSDoc comment
- Single responsibility"
Simplify Conditionals
gemini -m pro -o text -e "" "Simplify these conditionals:

\`\`\`typescript
$(rg -A 10 "if.*{" src/file.ts)
\`\`\`

Use:
- Early returns
- Guard clauses
- Lookup tables where appropriate
- Optional chaining"
Remove Duplication
# Find similar code
gemini -m pro -o text -e "" "Find duplicate or similar code patterns in:

$(cat src/*.ts)

Suggest how to DRY it up with:
- Shared functions
- Higher-order functions
- Generics if TypeScript"

jscodeshift Transforms

Create Transform
// rename-transform.ts
export default function transformer(file, api) {
  const j = api.jscodeshift;
  return j(file.source)
    .find(j.Identifier, { name: 'oldName' })
    .replaceWith(j.identifier('newName'))
    .toSource();
}
Run Transform
# Dry run
npx jscodeshift -d -p -t transform.ts src/

# Apply
npx jscodeshift -t transform.ts src/

Best Practices

  1. Test first - Don't refactor untested code
  2. Small steps - One change at a time
  3. Commit often - Each working state
  4. Preserve behavior - Refactoring isn't rewriting
  5. Use tools - AST transforms > find-replace
  6. Review diffs - Verify each change
  7. Run tests continuously - Catch breaks early

Comments

Markdown supported