Cleanup Patterns

Comprehensive patterns and strategies for cleaning up TypeScript/JavaScript codebases. This skill provides guidance on identifying unused code, assets, and dependencies to reduce technical debt and improve maintainability.

Quick Reference

Cleanup Commands

Task Command Agent

Find unused imports /cleanup imports

import-analyzer

Find dead code /cleanup deadcode

dead-code-detector

Find unused assets /cleanup assets

asset-tracker

Audit dependencies /cleanup deps

dependency-auditor

Clean configs /cleanup configs

config-cleaner

Full analysis /cleanup all

All agents

Detection Tools

Tool Purpose Install

TypeScript Unused locals/params Built-in with tsc

ESLint Unused vars, unreachable code npm install eslint

depcheck Unused npm packages npm install -g depcheck

madge Circular dependencies npm install -g madge

ts-prune Unused exports npx ts-prune

Import Cleanup

Common Import Issues

• Unused imports - Imported but never referenced

• Duplicate imports - Same module imported multiple times

• Circular imports - Module A imports B, B imports A

• Side-effect only imports - Execute code but export nothing

Detection Strategy

TypeScript compiler check

npx tsc --noEmit --noUnusedLocals

ESLint with unused-imports plugin

npx eslint . --rule 'no-unused-vars: error'

Circular dependency detection

npx madge --circular --extensions ts,tsx src/

Quick Fixes

// Before: Multiple unused imports import { useState, useEffect, useCallback, useMemo } from 'react'; import lodash from 'lodash';

// After: Only used imports remain import { useState, useCallback } from 'react';

See references/import-patterns.md for detailed patterns.

Dead Code Detection

Categories

• Unreachable code - Code after return/throw statements

• Unused functions - Defined but never called

• Unused variables - Declared but never read

• Unused exports - Exported but never imported elsewhere

• Unused class members - Methods/properties never accessed

Detection Strategy

TypeScript checks

npx tsc --noEmit --noUnusedLocals --noUnusedParameters

Find unused exports

npx ts-prune

ESLint rules

npx eslint . --rule 'no-unreachable: error'

Confidence Levels

Level Criteria Action

High Zero references, private scope Safe to remove

Medium Only test references Verify with user

Low Dynamic usage patterns Manual review required

See references/dead-code-patterns.md for detailed patterns.

Asset Tracking

Asset Types

Type Extensions Common Locations

Images png, jpg, svg, webp, gif public/, src/assets/

Styles css, scss, sass, less src/styles/, public/

Fonts woff, woff2, ttf, otf public/fonts/

Data json, yaml src/data/, public/

Reference Patterns to Search

// Direct imports import logo from './logo.png';

// HTML/JSX references <img src="/images/hero.png" />

// CSS references background-image: url('/images/bg.jpg');

// Dynamic (flag for review) const img = require(./images/${name}.png);

See references/asset-patterns.md for detailed patterns.

Dependency Auditing

Analysis Categories

• Unused packages - In package.json but never imported

• Security vulnerabilities - Known CVEs in dependencies

• Duplicate packages - Same functionality, different packages

• Misplaced dependencies - devDeps vs deps incorrect

• Outdated packages - Behind latest versions

Quick Commands

Find unused packages

npx depcheck

Security audit

npm audit

Check outdated

npm outdated

Package size analysis

npx package-size lodash moment axios

Common Functional Duplicates

Category Packages (pick one)

Dates moment, dayjs, date-fns

HTTP axios, node-fetch, got, ky

Utilities lodash, ramda, underscore

UUID uuid, nanoid, cuid

Schema zod, yup, joi

See references/dependency-patterns.md for detailed patterns.

Configuration Cleanup

What to Check

• Environment variables - Defined in .env but never used

• Config files - For tools no longer installed

• Feature flags - Stale or always-on flags

• Build configs - Redundant or default options

Common Obsolete Configs

File Check If

.babelrc Babel in dependencies

tslint.json TSLint deprecated, use ESLint

.travis.yml Still using Travis CI

webpack.config.js Using Vite/Next.js instead

Best Practices

Before Cleanup

• Commit current state - Ensure clean git status

• Run tests - Verify tests pass before changes

• Document public APIs - Know what shouldn't be removed

• Backup configs - Save current configuration

During Cleanup

• Start with high confidence - Remove obvious dead code first

• Batch similar changes - Group related removals

• Test incrementally - Run tests after each batch

• Use git diff - Review changes before committing

After Cleanup

• Run full test suite - Verify nothing broke

• Check bundle size - Measure improvement

• Update documentation - Remove references to deleted code

• Commit with clear message - Document what was removed

Common Pitfalls

False Positives to Avoid

• Dynamic usage - objmethodName patterns

• Framework magic - Decorated methods, lifecycle hooks

• External consumers - Public library exports

• Test utilities - Only used in test files

• Generated code - Files with @generated comments

Edge Cases

// Looks unused but called dynamically export function helper_a() { } export function helper_b() { } const fn = helpers[helper_${type}];

// Framework-managed lifecycle @Component({}) class MyComponent { ngOnInit() { } // Called by Angular }

// Re-exports for public API export { Button } from './Button'; // Used by consumers

Report Format

The /cleanup command generates reports in this format:

Codebase Cleanup Report

Summary

High Priority (Safe to Remove)

[Detailed findings with file paths and line numbers]

Medium Priority (Review Required)

[Findings that need verification]

Low Priority (Manual Review)

[Potential issues with dynamic patterns]

References

• references/import-patterns.md

• Import analysis patterns

• references/dead-code-patterns.md

• Dead code detection strategies

• references/asset-patterns.md

• Asset tracking methodology

• references/dependency-patterns.md

• Dependency audit procedures

Examples

• examples/cleanup-examples.md
• Before/after cleanup examples