Menu
JavaScript bundle analysis. Checks bundle sizes, tree-shaking effectiveness, duplicate dependencies, and chunk splitting.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Merges bookend agent reports into revised readiness, complexity, and decomposition plan. Produces the final evidence-backed assessment consumed by sprint-architect-agent.
Fast filesystem readiness scan — counts docs, source files, manifests, platform signals. Produces initial ReadinessReport for agent spawning decisions.
Scores proposal complexity against codebase surface. Uses proposal text analysis and readiness stats to determine decomposition tier and agent count.
Generation-time design taste for web UI work. Anti-cliche bans, layout and motion hard rules, and client-intent dials. Advisory only - shapes drafts; declared measured contracts remain the sole gate authority.
Rigorously reasons about definitions, proofs, and computations in algebra, analysis, discrete math, probability, linear algebra, and applied math. Verifies derivations, spots invalid steps, and states assumptions clearly. Use when solving or proving math problems, reviewing mathematical arguments, modeling with equations, interpreting statistics, or when the user mentions proofs, lemmas, theorems, integrals, series, matrices, optimization, or numerical methods.
Visual verification for interactive elements (popups, modals, tooltips). Clicks elements and captures screenshots for analysis. Bypasses MCP browser tool limitations with cross-origin CSS.
| name | bundle-analyze |
| description | JavaScript bundle analysis. Checks bundle sizes, tree-shaking effectiveness, duplicate dependencies, and chunk splitting. |
Analyzes JavaScript bundles for size issues, duplicate dependencies, and optimization opportunities.
{
"project_dir": "/path/to/project",
"build_dir": "dist/",
"budgets": {
"total": "500KB",
"main": "200KB",
"vendor": "300KB"
},
"checks": ["size", "duplicates", "tree_shaking"]
}
# Get file sizes
du -h dist/*.js
# Get gzipped sizes
gzip -c dist/main.js | wc -c
# Generate bundle analysis
npx source-map-explorer dist/main.js --json > bundle-analysis.json
# Find duplicate packages
npx depcheck --json | jq '.missing, .dependencies'
# Check bundle for duplicates
npx webpack-bundle-analyzer dist/stats.json --mode static
// Check if unused exports are removed
// Look for side-effect-free imports that should be eliminated
{
"skill": "bundle-analyze",
"status": "pass|warning|fail",
"bundles": {
"total": {
"raw": "423KB",
"gzip": "142KB",
"budget": "500KB",
"passed": true
},
"main": {
"raw": "156KB",
"gzip": "52KB",
"budget": "200KB",
"passed": true
},
"vendor": {
"raw": "267KB",
"gzip": "90KB",
"budget": "300KB",
"passed": true
}
},
"duplicates": [
{
"package": "lodash",
"versions": ["4.17.21", "4.17.19"],
"size_impact": "24KB",
"suggestion": "Dedupe to single version"
}
],
"large_modules": [
{
"module": "moment",
"size": "67KB",
"suggestion": "Replace with date-fns or dayjs"
}
],
"tree_shaking": {
"effective": true,
"unused_exports": []
},
"suggestions": [
"Consider lazy loading for route /dashboard",
"Replace moment.js with lighter alternative"
],
"errors": [],
"next_action": "proceed|optimize"
}
| Bundle Type | Warning | Fail |
|---|---|---|
| Total | >400KB | >600KB |
| Main | >150KB | >250KB |
| Vendor | >250KB | >400KB |
| Per-route chunk | >100KB | >200KB |
| Check | What it Validates |
|---|---|
size | Bundle sizes within budget |
duplicates | No duplicate package versions |
tree_shaking | Unused code eliminated |
chunks | Proper code splitting |
sourcemaps | Source maps generated |
Any bundle exceeds fail threshold?
YES → status: "fail", next_action: "optimize"
Any bundle exceeds warning threshold?
YES → status: "warning", suggestions populated
Duplicate packages found?
YES → Add to suggestions
All within budget?
YES → status: "pass", next_action: "proceed"
Full bundle analysis:
{
"project_dir": "/projects/react-app",
"build_dir": "build/",
"budgets": {
"total": "500KB",
"main": "200KB",
"vendor": "300KB"
},
"checks": ["size", "duplicates", "tree_shaking"]
}
Quick size check:
{
"project_dir": "/projects/react-app",
"build_dir": "dist/",
"budgets": {
"total": "500KB"
},
"checks": ["size"]
}
Duplicate detection:
{
"project_dir": "/projects/react-app",
"build_dir": "dist/",
"checks": ["duplicates"]
}