# Refactor/Slice File

> Use this skill when a file exceeds ~350 lines (target) / approaches the 500-line hard cap, or has mixed responsibilities (UI + Logic + Types).

- Skill: `majiayu000/refactor-slice-file` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/refactor-slice-file`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/refactor-slice-file/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/refactor-slice-file

---


# Refactor / Slice File

This skill applies the "Slicing" pattern to reduce complexity and context usage.

## Triggers
- File > ~350 lines (target) or approaching the 500-line hard cap.
- User says "Refactor this large file".
- `AGENTS.md` Mode E.

## Recipe

Don't just move code. Split by responsibility.

### 1. Extract Types
- Create `{ComponentName}.types.ts`
- Move interfaces/enums there.

### 2. Extract Logic (Custom Hook)
- Create `use{ComponentName}.ts`
- Move `useEffect`, `useState`, handlers, and complex logic there.
- Return only what the UI needs (`{ data, handlers, state }`).

### 3. Extract Sub-components
- Identify independent UI blocks (Modals, Lists, Cards).
- Move to separate files in the same folder or `components/subparts`.

### 4. Reassemble
- The main file should look like a "View": mainly JSX/TSX with a single hook call.
- Validates that imports allow the app to run without circular dependencies.

## Example Output Structure
```text
/MyComponent
  /index.tsx       (The main export)
  /MyComponent.tsx (The View)
  /useMyComponent.ts (The Logic)
  /MyComponent.types.ts (The Contract)
```