🪴 Vaibhav's KB

Prompt

3 min read

FILE_TO_REFACTOR: $filepath

Context & Capabilities

  • You have read access to the entire codebase
  • You have access to: terminal (nodejs, python, basic Linux utilities), web browser
  • You cannot run or test the code
  • Max lines per file limit: 300 lines
  • Purpose: Reduce lines of code while maintaining/improving type safety and readability

Initial Analysis Steps

  1. First, examine the project structure:
# Navigate to repo root and check configuration
cat .eslintrc
cat .prettierrc
cat tsconfig.json
 
# Get file stats
wc -l [filename]
  1. Analyze the target file:
# Check imports and dependencies
grep -r "import" [filename]
grep -r "from" [filename]
 
# Find related files
find . -type f -name "*.ts*" | grep -i "[relevant-pattern]"
  1. Look for these patterns in the file:
  • Large interfaces/types (can be split or moved)
  • Repeated utility functions
  • Common UI patterns (if React)
  • Shared business logic
  • Large switch/if-else blocks
  • Repeated string constants/enums
  • Complex type definitions
  • Unused imports/code

Refactoring Strategies

  1. Type Definitions:
// BEFORE
interface LargeInterface {
  prop1: type1;
  prop2: type2;
  // ... many more props
}
 
// AFTER
// types/componentTypes.ts
export interface CoreProps { 
  prop1: type1;
}
export interface ExtendedProps {
  prop2: type2;
}
// Original file
import { CoreProps, ExtendedProps } from './types/componentTypes';
type LargeInterface = CoreProps & ExtendedProps;
  1. Shared Constants/Config:
// BEFORE
const ERROR_MESSAGES = {
  error1: 'Error message 1',
  error2: 'Error message 2',
  // ... many more
}
 
// AFTER
// constants/errors.ts
export const ERROR_MESSAGES = { ... }
// Original file
import { ERROR_MESSAGES } from './constants/errors';
  1. Utility Functions:
// BEFORE
class Component {
  utilFunc1() { ... }
  utilFunc2() { ... }
  mainLogic() { ... }
}
 
// AFTER
// utils/componentUtils.ts
export const utilFunc1 = () => { ... }
export const utilFunc2 = () => { ... }
// Original file
import { utilFunc1, utilFunc2 } from './utils/componentUtils';
  1. Component Logic (if React):
// BEFORE
const LargeComponent = () => {
  // lots of rendering logic
}
 
// AFTER
// components/SubComponents.tsx
export const SubComponentA = () => { ... }
// Original file
import { SubComponentA } from './components/SubComponents';

File Organization Rules

  1. Follow existing patterns in the codebase for:

    • File naming (check similar files)
    • Directory structure
    • Export/import style
    • Component organization

  2. New files should match patterns from .eslintrc/.prettierrc:

    • Check indentation rules
    • Check naming conventions
    • Check import/export rules

Step-by-Step Process

  1. Analyze Current File

    • Count total lines
    • Identify main sections
    • Note import patterns
    • List potential extractions

  2. Plan Extractions

    • List new files needed
    • Define interfaces/types to move
    • Identify shared utilities
    • Note dependencies

  3. Create New Files

    • Follow naming conventions
    • Maintain type safety
    • Keep related code together
    • Document exports

  4. Update Original File

    • Update imports
    • Remove extracted code
    • Verify type completeness
    • Keep under 300 lines

  5. Document Changes

    • List files created/modified
    • Explain major changes
    • Note any type improvements
    • Highlight potential impacts

Output Format

Make sure the output format after the fact is as follows (make sure to also mention these in commit body):

### Analysis
- Current line count: X
- Main sections identified: [list]
- Patterns found: [list]
 
### Planned Changes
- New files to create: [list]
- Sections to extract: [list]
- Type improvements: [list]
 
### Implementation
[Provide all new file contents and modified original file]
 
### File Structure Impact
- New files created: [list with paths]
- Modified files: [list with paths]
 
### Type Safety
- Types maintained: [list]
- Type improvements: [list]

Graph View