Unused Code Cleanup Skill

Unused Code Cleanup

Identify and remove unused imports/variables/dead code from TypeScript/React projects.

When to Use

TypeScript projects with unused code warnings
After major refactoring or feature removal
Pre-production cleanup for bundle size optimization
Code quality improvement initiatives

Detection

| Task | Command | |------|---------| | Detect | npx tsc --noEmit --noUnusedLocals --noUnusedParameters 2>&1 \| grep "error TS6133" | | Count | ... \| wc -l | | High-impact files | ... \| sed 's/([0-9]*,[0-9]*).*//' \| sort \| uniq -c \| sort -rn \| head -15 |

Common Patterns

| Pattern | Cause | Impact | Difficulty | |---------|-------|--------|-----------| | Unused imports | Icon libraries, API types | Smaller bundle | Easy | | Dead feature | Feature removed, code remains | Reveals subsystems | Complex | | Unused parameters | React Query error callbacks | Clean conventions | Easy | | Debug snapshots | Debugging code left in | Runtime performance | Easy | | Unused props | Component refactoring | Interface clarity | Medium | | Unused hooks | Removed functionality | Prevent unnecessary renders | Easy |

Cleanup Strategy

Prioritize high-impact → Files with 10+ warnings first
Identify patterns → Imports (quick wins), state (dead features), parameters (callbacks), variables (debug)
Verify each file → npm run build && npx tsc --noEmit
Track progress → Start count → Current count

Key Insights

Cascading dependencies: Unused state → unused setters → unused conversion functions → entire dead feature subsystems

Performance:

Removing unused getQueryData() improves runtime
Smaller bundle from unused import removal
Faster TypeScript compilation

Debug archaeology: beforeCache/afterCache variables reveal debugging history (often paired with removed console.log)

Common Mistakes

| Mistake | Issue | Solution | |---------|-------|----------| | Remove used destructured | error might be used later | Check all references | | Miss dynamic calls | String references to functions | Search for function name | | No build verification | Reflection/dynamic imports break | Run build after each file | | Remove API-required params | Breaking callback signature | Use _ for unused params |

Session Metrics (Example: 2025-11-08)

| Metric | Value | |--------|-------| | Warnings | 148 → 101 (32% reduction) | | Files cleaned | 6 | | Items removed | 47 | | Build time | 15.30s |

Files: | File | Warnings | Items | |------|----------|-------| | BranchContextDialog.tsx | 22 | Icons, parsing functions, state | | useRealtimeSync.ts | 12 | Debug snapshot variables | | useSubtasks.ts | 4 | Unused onError parameters | | useTasks.ts | 2 | Unused onError parameters | | api-lazy.ts | 4 | Unused type/API imports | | LazySubtaskList/* | 5 | queryClient, props, parameters |

Automation

ESLint

{
  "rules": {
    "@typescript-eslint/no-unused-vars": ["error", {
      "argsIgnorePattern": "^_",
      "varsIgnorePattern": "^_"
    }]
  }
}

Pre-commit Hook

#!/bin/bash
unused=$(npx tsc --noEmit --noUnusedLocals --noUnusedParameters 2>&1 | grep "error TS6133" | wc -l)
[ $unused -gt 0 ] && echo "⚠️ $unused unused code warnings"

Quick Reference

| Task | Command | |------|---------| | Detect | npx tsc --noEmit --noUnusedLocals --noUnusedParameters | | Count | ... \| grep "error TS6133" \| wc -l | | High-impact | ... \| sed 's/([0-9]*,[0-9]*).*//' \| sort \| uniq -c \| sort -rn | | Build | npm run build | | TypeScript | npx tsc --noEmit |

Supporting Files

EXAMPLES.md - 9 patterns with before/after code, session example (148→101), cascading dependencies, performance impact
TEMPLATES.md - Detection commands, cleanup workflows, 9 pattern templates, progress tracking
VALIDATION.md - Pre/during/post checklists, validation commands, quality checks by pattern, metrics collection

Agent Skills: Unused Code Cleanup

Skill Files