refactorlisted
Install: claude install-skill djnsty23/claude-auto-dev
# Refactoring Patterns
**Rule #1:** Tests pass before AND after. No behavior change.
## When to Refactor
| Signal | Refactoring |
|--------|-------------|
| File > 300 lines | Split into modules |
| Component > 200 lines | Extract sub-components |
| Function > 50 lines | Extract helpers |
| 3+ similar blocks | Extract shared utility |
| Prop drilling > 3 levels | Context or composition |
| God object/file | Single responsibility split |
## Pattern: Split Large File
```
Before: piapi.ts (1240 lines)
After:
piapi/
├── index.ts (barrel export)
├── client.ts (base client, auth)
├── music.ts (music generation)
├── image.ts (image generation)
└── types.ts (shared types)
```
**Steps:**
1. Identify logical groups (by domain, not by size)
2. Create module directory with `index.ts` barrel
3. Move code group by group, fixing imports
4. `npm run typecheck` after each move
5. Barrel export preserves existing import paths
```typescript
// index.ts - barrel export (no breaking changes)
export { PiAPIClient } from './client'
export { generateMusic, extendSong } from './music'
export { generateImage } from './image'
export type { MusicParams, ImageParams } from './types'
```
## Pattern: Extract Component
```tsx
// Before: page.tsx (500 lines)
export default function LibraryPage() {
// 50 lines of filter logic
// 30 lines of bulk actions
// 200 lines of song list
// 100 lines of pagination
}
// After:
// components/libra