메뉴
JavaScript bundle analysis. Checks bundle sizes, tree-shaking effectiveness, duplicate dependencies, and chunk splitting.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
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"]
}