← Back to list

refactorslice-file
by CheekyCodexConjurer
AERA: local-first workstation for quantitative research, visualization, and backtesting.
⭐ 0🍴 0📅 Jan 6, 2026
SKILL.md
name: Refactor/Slice File description: Use 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.mdMode 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)
Score
Total Score
55/100
Based on repository quality metrics
✓SKILL.md
SKILL.mdファイルが含まれている
+20
○LICENSE
ライセンスが設定されている
0/10
○説明文
100文字以上の説明がある
0/10
○人気
GitHub Stars 100以上
0/15
✓最近の活動
3ヶ月以内に更新
+5
○フォーク
10回以上フォークされている
0/5
✓Issue管理
オープンIssueが50未満
+5
✓言語
プログラミング言語が設定されている
+5
✓タグ
1つ以上のタグが設定されている
+5
Reviews
💬
Reviews coming soon
