unused-code-cleanup

Systematically identify and remove unused imports, variables, and dead code from TypeScript/React projects using --noUnusedLocals and --noUnusedParameters compiler flags

allowed_tools: Read, Edit, Bash, Grep

$ 설치

git clone https://github.com/phamhung075/4genthub-hooks /tmp/4genthub-hooks && cp -r /tmp/4genthub-hooks/skills/unused-code-cleanup ~/.claude/skills/4genthub-hooks

// tip: Run this command in your terminal to install the skill


name: unused-code-cleanup description: Systematically identify and remove unused imports, variables, and dead code from TypeScript/React projects using --noUnusedLocals and --noUnusedParameters compiler flags allowed-tools: Read, Edit, Bash, Grep

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

TaskCommand
Detectnpx 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

PatternCauseImpactDifficulty
Unused importsIcon libraries, API typesSmaller bundleEasy
Dead featureFeature removed, code remainsReveals subsystemsComplex
Unused parametersReact Query error callbacksClean conventionsEasy
Debug snapshotsDebugging code left inRuntime performanceEasy
Unused propsComponent refactoringInterface clarityMedium
Unused hooksRemoved functionalityPrevent unnecessary rendersEasy

Cleanup Strategy

  1. Prioritize high-impact → Files with 10+ warnings first
  2. Identify patterns → Imports (quick wins), state (dead features), parameters (callbacks), variables (debug)
  3. Verify each filenpm run build && npx tsc --noEmit
  4. 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

MistakeIssueSolution
Remove used destructurederror might be used laterCheck all references
Miss dynamic callsString references to functionsSearch for function name
No build verificationReflection/dynamic imports breakRun build after each file
Remove API-required paramsBreaking callback signatureUse _ for unused params

Session Metrics (Example: 2025-11-08)

MetricValue
Warnings148 → 101 (32% reduction)
Files cleaned6
Items removed47
Build time15.30s

Files:

FileWarningsItems
BranchContextDialog.tsx22Icons, parsing functions, state
useRealtimeSync.ts12Debug snapshot variables
useSubtasks.ts4Unused onError parameters
useTasks.ts2Unused onError parameters
api-lazy.ts4Unused type/API imports
LazySubtaskList/*5queryClient, 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

TaskCommand
Detectnpx tsc --noEmit --noUnusedLocals --noUnusedParameters
Count... | grep "error TS6133" | wc -l
High-impact... | sed 's/([0-9]*,[0-9]*).*//' | sort | uniq -c | sort -rn
Buildnpm run build
TypeScriptnpx 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