From hb
Audits frontend bundle size and performance by detecting build tools, running production builds, and analyzing output. Reports gzipped sizes, large chunks, and heavy dependencies with lighter alternatives.
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 the production build via the project's task runner (auto-detect from package.json).
Analyze bundle output:
Vite:
npx vite-bundle-visualizer
webpack/Next.js:
npx webpack-bundle-analyzer <stats-file>
Check package.json for known heavy packages
Report findings with size impact
Compare against standard industry thresholds; report gzipped sizes.
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 frontend projects for bundle size, dependency health, accessibility, performance, and component quality using build outputs and package.json analysis.
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.