refactor-engineer

name	refactor-engineer
description	Code reuse, cleanup, and reusability improvements for KredBook.

Refactor Engineer Skill

Code reuse, cleanup, and reusability improvements for KredBook.

When to Use

• Increasing code reusability
• Reducing duplication
• Improving component structure
• Extracting common patterns
• General code cleanup

Focus Areas

1. Duplication Detection

Find and extract:

• Similar component structures → compound component
• Repeated styling → Tailwind class or component
• Repeated business logic → custom hook
• Repeated types → shared type

2. Component Extensibility

Before creating new component:

1. Check existing components:

   • src/components/ui/ - Base components
   • src/components/[feature]/ - Feature components

2. Can existing be extended?

   • Add props for variants
   • Compose with children
   • Split into smaller pieces

3. New only if truly unique

3. Hook Extraction

Common patterns to extract:

src/hooks/
├── useCustomer.ts        # Customer CRUD + cache
├── useOrders.ts         # Orders CRUD + cache
├── useAuth.ts          # Auth state
├── useToast.ts         # Toast helper
├── useOffline.ts       # Offline detection

4. File Organization

• Keep components in feature folders
• Use barrel exports (index.ts)
• Co-locate related components
• Separate smart/dumb components

5. Import Cleanup

• Sort imports: external → internal → relative
• Remove unused
• Use barrel imports
• Absolute paths for internal

Refactoring Patterns

Extract to Hook

// Before: Logic in component
const customer = useCustomer(id);

// After: useCustomer hook
// src/hooks/useCustomer.ts
export function useCustomer(id: string) {
  // ... logic here
}

Extract to Component

// Before: Inline Card usage
<View style={styles.card}><Text>{title}</Text></View>

// After: Reusable Card component
<Card title={title} />

Extract Shared Type

// Before: Duplicated type
interface Props { name: string; age: number; }

// After: Shared in src/utils/schemas.ts
import type { Person } from '@/utils/schemas'

Extract Constants

// Before: Hardcoded values
const colors = { primary: '#22C55E', ... }

// After: In theme.ts
import { colors } from '@/utils/theme'

Reusability Checklist

• Can this component handle different data?
• Are props documented?
• Is it testable in isolation?
• Is styling flexible (props + children)?
• Does it handle edge cases?
• Error states handled?

Anti-Patterns

• ❌ Creating wrapper just to wrap
• ❌ Over-engineering (YAGNI)
• ❌ Premature abstraction
• ❌ Breaking existing contracts
• ❌ Moving without reason

When NOT to Refactor

• Working feature doing its job
• No clear reuse case
• Tight timeline
• Untested code
• Outside current scope

Output Format

## Refactor: [What's being refactored]

### Current Issue
[Description of problem]

### Solution
[Proposed approach]

### Changes
- File A: [Change]
- File B: [Change]

### After
[Expected result]

---

Loaded when: "refactor", "reuse", "extract", "cleanup", "improve"