Stats
Actions
Tags
From hb
Audits frontend bundle size and performance by analyzing build output, identifying heavy dependencies, and comparing against budget thresholds.
How this skill is triggered — by the user, by Claude, or both
Slash command
/hb:perf-auditThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
1. Detect build tool from `package.json` (vite, webpack, next, rollup)
Detect build tool from package.json (vite, webpack, next, rollup)
Run production build if no recent build exists:
npm run buildnpm run build (reads .next/analyze/ if ANALYZE=true)Analyze bundle output:
Vite:
npx vite-bundle-visualizer
webpack/Next.js:
npx webpack-bundle-analyzer <stats-file>
Check package.json for known heavy packages (see table below)
Report findings with size impact
| Asset | Good | Warning | Critical |
|---|---|---|---|
| Initial JS (gzip) | < 150 KB | 150-300 KB | > 300 KB |
| Initial CSS (gzip) | < 20 KB | 20-50 KB | > 50 KB |
| Individual chunk | < 50 KB | 50-100 KB | > 100 KB |
| Total page weight | < 500 KB | 500 KB-1 MB | > 1 MB |
| Package | Size | Alternative | Savings |
|---|---|---|---|
moment | ~230 KB | date-fns / dayjs | ~200 KB |
lodash (full) | ~70 KB | lodash/merge or native | ~60 KB |
@mui/material (full) | ~300 KB | Named imports | ~150 KB |
react-icons (all) | variable | Import only used icon packs | varies |
axios | ~15 KB | ky or native fetch | ~10 KB |
| Metric | Good | Needs work | Poor |
|---|---|---|---|
| Performance | >= 90 | 50-89 | < 50 |
| FCP | < 1.8s | 1.8-3s | > 3s |
| LCP | < 2.5s | 2.5-4s | > 4s |
| TBT | < 200ms | 200-600ms | > 600ms |
| CLS | < 0.1 | 0.1-0.25 | > 0.25 |
package.json for heavy packages onlynpx claudepluginhub helderberto/agent-skills --plugin hbRuns local performance audits for images, bundle sizes, and heavy dependencies without network calls. Outputs structured JSON for before/after measurement.
Audits JavaScript bundle size to reduce parse/compile time and improve TTI. Covers tree-shaking, code-splitting, and budget enforcement with tools like webpack-bundle-analyzer.
Analyzes and reduces frontend bundle sizes using webpack-bundle-analyzer, rollup-plugin-visualizer, source-map-explorer. Guides tree-shaking, code splitting, lazy loading for large bundles.