Tree Shaking

Pulls in tree shaking patterns to help you eliminate dead code from your JavaScript bundles. This is the skill to use when you're importing from libraries but only using a fraction of what they export, and your bundle size is bloating. It teaches ES2015 module syntax requirements, the difference between named and wildcard imports, and how to mark packages as side-effect-free in package.json. The content from patterns.dev does a solid job explaining how bundlers like webpack treat your code as a graph and traverse from entry points. One thing to internalize: side effects break everything, so understanding when imported code touches global scope matters more than you'd think.

skills.sh installs: 1.6K
GitHub stars: 258
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add patternsdev/skills --skill tree-shaking --agent claude-code

Installs into .claude/skills of the current project.

Files

Tree Shaking

It can happen that we add code to our bundle that isn't used anywhere in our application. This piece of dead code can be eliminated in order to reduce the size of the bundle, and prevent unnecessarily loading more data! The process of eliminating dead code before adding it to our bundle, is called tree-shaking.

When to Use

Use this when your bundle includes unused code from imported modules
This is helpful for keeping JavaScript bundles lean and improving load performance

Instructions

Use ES2015 import/export syntax — only ES modules can be tree-shaken
Use named imports instead of importing entire modules to enable effective tree-shaking
Mark packages as side-effect-free in package.json when appropriate
Be aware that modules with side effects cannot be safely tree-shaken