Agent skill
refactor
Code refactoring with AI assistance. Use for modernizing code, converting JavaScript to TypeScript, class to hooks conversions, and systematic renaming.
Install this agent skill to your Project
npx add-skill https://github.com/johnlindquist/claude/tree/main/skills/refactor
SKILL.md
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
- Test first - Don't refactor untested code
- Small steps - One change at a time
- Commit often - Each working state
- Preserve behavior - Refactoring isn't rewriting
- Use tools - AST transforms > find-replace
- Review diffs - Verify each change
- Run tests continuously - Catch breaks early
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
testgen
Generate tests using AI and run test suites. Use for generating unit tests, running coverage reports, and mutation testing.
article
Generate technical articles and documentation using AI. Use for writing blog posts, documentation, and technical content.
packx
Bundle code context for AI. ALWAYS use --limit 49k unless user explicitly requests otherwise. Use for creating shareable code bundles and preparing context for LLMs.
long-agent
Manage long-running agent sessions. Use for tracking progress in extended tasks, maintaining context across long sessions, and managing multi-step workflows.
db
Database operations for SQLite, PostgreSQL, and MySQL. Use for queries, schema inspection, migrations, and AI-assisted query generation.
investigate
Debug and investigate code issues using search and AI analysis. Use when stuck on bugs, tracing execution flow, or understanding complex code.
Didn't find tool you were looking for?