{"id":"cf73a1cb-0f5c-4322-aa39-b12c4e74e9d1","shortId":"6PjGpF","kind":"skill","title":"perf-audit","tagline":"Audit frontend bundle size and performance. Use when user asks to \"audit performance\", \"/perf-audit\", \"analyze bundle\", \"check bundle size\", or wants to find performance bottlenecks. Don't use for backend performance, database query optimization, or projects without a frontend bu","description":"# Performance Audit\n\n## Workflow\n\n1. Detect build tool from `package.json` (vite, webpack, next, rollup)\n2. Run production build if no recent build exists:\n   - Vite: `npm run build`\n   - Next.js: `npm run build` (reads `.next/analyze/` if `ANALYZE=true`)\n3. Analyze bundle output:\n\n   **Vite:**\n   ```bash\n   npx vite-bundle-visualizer\n   ```\n\n   **webpack/Next.js:**\n   ```bash\n   npx webpack-bundle-analyzer <stats-file>\n   ```\n\n4. Check `package.json` for known heavy packages (see table below)\n5. Report findings with size impact\n\n## Budget Thresholds\n\n| Asset | Good | Warning | Critical |\n|---|---|---|---|\n| Initial JS (gzip) | < 150 KB | 150-300 KB | > 300 KB |\n| Initial CSS (gzip) | < 20 KB | 20-50 KB | > 50 KB |\n| Individual chunk | < 50 KB | 50-100 KB | > 100 KB |\n| Total page weight | < 500 KB | 500 KB-1 MB | > 1 MB |\n\n## Heavy Packages\n\n| Package | Size | Alternative | Savings |\n|---|---|---|---|\n| `moment` | ~230 KB | `date-fns` / `dayjs` | ~200 KB |\n| `lodash` (full) | ~70 KB | `lodash/merge` or native | ~60 KB |\n| `@mui/material` (full) | ~300 KB | Named imports | ~150 KB |\n| `react-icons` (all) | variable | Import only used icon packs | varies |\n| `axios` | ~15 KB | `ky` or native `fetch` | ~10 KB |\n\n## Lighthouse Scores\n\n| Metric | Good | Needs work | Poor |\n|---|---|---|---|\n| Performance | >= 90 | 50-89 | < 50 |\n| FCP | < 1.8s | 1.8-3s | > 3s |\n| LCP | < 2.5s | 2.5-4s | > 4s |\n| TBT | < 200ms | 200-600ms | > 600ms |\n| CLS | < 0.1 | 0.1-0.25 | > 0.25 |\n\n## Output format\n\n- **Bundle summary**: total size / gzipped size vs budget\n- **Large chunks**: name + size + % of total\n- **Heavy deps**: package + size + lighter alternative\n- **Quick wins**: sorted by estimated savings\n\n## Rules\n\n- Compare against budget thresholds above\n- Report gzipped sizes (what the browser downloads)\n- Never auto-change dependencies -- report and suggest only\n\n## Error Handling\n\n- Build fails -- report the error and stop; fix build issues before auditing\n- No build output found -- run production build first\n- Build tool unrecognized -- fall back to scanning `package.json` for heavy packages only","tags":["perf","audit","agent","skills","helderberto","agent-skills","ai-tools","antigravity","claude-code","cursor","developer-tools","gemini-cli"],"capabilities":["skill","source-helderberto","skill-perf-audit","topic-agent-skills","topic-ai-tools","topic-antigravity","topic-claude-code","topic-cursor","topic-developer-tools","topic-gemini-cli","topic-markdown","topic-plugin","topic-sdlc","topic-skills","topic-tracer-bullet"],"categories":["agent-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/helderberto/agent-skills/perf-audit","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add helderberto/agent-skills","source_repo":"https://github.com/helderberto/agent-skills","install_from":"skills.sh"}},"qualityScore":"0.454","qualityRationale":"deterministic score 0.45 from registry signals: · indexed on github topic:agent-skills · 8 github stars · SKILL.md body (2,117 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:09:13.853Z","embedding":null,"createdAt":"2026-05-18T13:14:54.149Z","updatedAt":"2026-05-18T19:09:13.853Z","lastSeenAt":"2026-05-18T19:09:13.853Z","tsv":"'-0.25':246 '-1':155 '-100':144 '-3':227 '-300':125 '-4':234 '-50':135 '-600':240 '-89':221 '/perf-audit':17 '0.1':244,245 '0.25':247 '1':47,157 '1.8':224,226 '10':209 '100':146 '15':203 '150':122,124,189 '2':57 '2.5':231,233 '20':132,134 '200':172,239 '200ms':238 '230':166 '3':79 '300':127,185 '3s':229 '4':97 '4s':236 '5':107 '50':137,141,143,220,222 '500':151,153 '60':181 '600ms':242 '70':176 '90':219 'altern':163,269 'analyz':18,77,80,96 'ask':13 'asset':115 'audit':3,4,15,45,311 'auto':291 'auto-chang':290 'axio':202 'back':324 'backend':33 'bash':84,91 'bottleneck':28 'browser':287 'bu':43 'budget':113,257,279 'build':49,60,64,69,73,300,308,313,318,320 'bundl':6,19,21,81,88,95,250 'chang':292 'check':20,98 'chunk':140,259 'cls':243 'compar':277 'critic':118 'css':130 'databas':35 'date':169 'date-fn':168 'dayj':171 'dep':265 'depend':293 'detect':48 'download':288 'error':298,304 'estim':274 'exist':65 'fail':301 'fall':323 'fcp':223 'fetch':208 'find':26,109 'first':319 'fix':307 'fns':170 'format':249 'found':315 'frontend':5,42 'full':175,184 'good':116,214 'gzip':121,131,254,283 'handl':299 'heavi':102,159,264,329 'icon':193,199 'impact':112 'import':188,196 'individu':139 'initi':119,129 'issu':309 'js':120 'kb':123,126,128,133,136,138,142,145,147,152,154,167,173,177,182,186,190,204,210 'known':101 'ky':205 'larg':258 'lcp':230 'lighter':268 'lighthous':211 'lodash':174 'lodash/merge':178 'mb':156,158 'metric':213 'moment':165 'ms':241 'mui/material':183 'name':187,260 'nativ':180,207 'need':215 'never':289 'next':55 'next.js':70 'next/analyze':75 'npm':67,71 'npx':85,92 'optim':37 'output':82,248,314 'pack':200 'packag':103,160,161,266,330 'package.json':52,99,327 'page':149 'perf':2 'perf-audit':1 'perform':9,16,27,34,44,218 'poor':217 'product':59,317 'project':39 'queri':36 'quick':270 'react':192 'react-icon':191 'read':74 'recent':63 'report':108,282,294,302 'rollup':56 'rule':276 'run':58,68,72,316 'save':164,275 'scan':326 'score':212 'see':104 'size':7,22,111,162,253,255,261,267,284 'skill' 'skill-perf-audit' 'sort':272 'source-helderberto' 'stop':306 'suggest':296 'summari':251 'tabl':105 'tbt':237 'threshold':114,280 'tool':50,321 'topic-agent-skills' 'topic-ai-tools' 'topic-antigravity' 'topic-claude-code' 'topic-cursor' 'topic-developer-tools' 'topic-gemini-cli' 'topic-markdown' 'topic-plugin' 'topic-sdlc' 'topic-skills' 'topic-tracer-bullet' 'total':148,252,263 'true':78 'unrecogn':322 'use':10,31,198 'user':12 'vari':201 'variabl':195 'visual':89 'vite':53,66,83,87 'vite-bundle-visu':86 'vs':256 'want':24 'warn':117 'webpack':54,94 'webpack-bundle-analyz':93 'webpack/next.js':90 'weight':150 'win':271 'without':40 'work':216 'workflow':46","prices":[{"id":"4ef72ee5-e212-45c0-ab65-328e7f850110","listingId":"cf73a1cb-0f5c-4322-aa39-b12c4e74e9d1","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"helderberto","category":"agent-skills","install_from":"skills.sh"},"createdAt":"2026-05-18T13:14:54.149Z"}],"sources":[{"listingId":"cf73a1cb-0f5c-4322-aa39-b12c4e74e9d1","source":"github","sourceId":"helderberto/agent-skills/perf-audit","sourceUrl":"https://github.com/helderberto/agent-skills/tree/main/skills/perf-audit","isPrimary":false,"firstSeenAt":"2026-05-18T13:14:54.149Z","lastSeenAt":"2026-05-18T19:09:13.853Z"}],"details":{"listingId":"cf73a1cb-0f5c-4322-aa39-b12c4e74e9d1","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"helderberto","slug":"perf-audit","github":{"repo":"helderberto/agent-skills","stars":8,"topics":["agent-skills","ai","ai-tools","antigravity","claude-code","cursor","developer-tools","gemini-cli","markdown","plugin","sdlc","skills","tracer-bullet"],"license":"mit","html_url":"https://github.com/helderberto/agent-skills","pushed_at":"2026-05-14T11:37:47Z","description":"My personal SDLC toolbelt for AI coding agents — PRD to ship.","skill_md_sha":"0442d3c9cb47f0f98c30b657697646d9f1e8b6fa","skill_md_path":"skills/perf-audit/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/helderberto/agent-skills/tree/main/skills/perf-audit"},"layout":"multi","source":"github","category":"agent-skills","frontmatter":{"name":"perf-audit","description":"Audit frontend bundle size and performance. Use when user asks to \"audit performance\", \"/perf-audit\", \"analyze bundle\", \"check bundle size\", or wants to find performance bottlenecks. Don't use for backend performance, database query optimization, or projects without a frontend build step."},"skills_sh_url":"https://skills.sh/helderberto/agent-skills/perf-audit"},"updatedAt":"2026-05-18T19:09:13.853Z"}}