refactorslice-file

CheekyCodexConjurer's avatarfrom CheekyCodexConjurer

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

⭐0stars🔀0forks📁View on GitHub🕐Updated Dec 30, 2025
[Architecture Design]

When & Why to Use This Skill

This Claude skill automates the refactoring of oversized source files by implementing the 'Slicing' pattern to reduce technical debt and cognitive load. It systematically decomposes monolithic files—specifically those exceeding 350-500 lines—into modular structures by separating UI components, business logic (custom hooks), and type definitions. This approach optimizes code maintainability, enhances reusability, and improves AI context window efficiency for better development performance.

Use Cases

  • Legacy Code Cleanup: Systematically split massive monolithic React or TypeScript components into manageable sub-components and custom hooks.
  • Technical Debt Reduction: Decouple complex business logic from UI presentation layers to improve unit testability and code clarity.
  • Context Window Optimization: Reduce individual file sizes to stay within AI model token limits, ensuring more accurate and faster code analysis and completions.
  • Architectural Standardization: Enforce a consistent directory structure (View, Logic, Types) across large-scale projects to improve team collaboration and onboarding.
nameRefactor/Slice File
descriptionUse this skill when a file exceeds ~350 lines (target) / approaches the 500-line hard cap, or has mixed responsibilities (UI + Logic + Types).

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

/MyComponent
  /index.tsx       (The main export)
  /MyComponent.tsx (The View)
  /useMyComponent.ts (The Logic)
  /MyComponent.types.ts (The Contract)