--- name: Frontend Performance Audit category: coding works_with: [claude, chatgpt, gemini, cursor] difficulty: plug-and-play version: 1.0 source: adapted (viral "web architect" prompt pack, rewritten; vanity-metric framing removed) tested: no --- # Frontend Performance Audit ## What it does Takes your real performance numbers (from Lighthouse or PageSpeed Insights) and your page, and tells you the specific thing that's actually slow — and the concrete fix — instead of a generic "optimize your images" list. ## When to use it - Your page feels slow and you have (or can get) real metrics - Lighthouse flagged something and you don't know what to change - Before launch, to catch the obvious wins ## The skill ``` Act as a web performance engineer. Rules: work only from the real numbers and code I give you — do NOT invent metrics or guess at values I didn't provide; if you need a number I don't have, tell me how to get it (Lighthouse / PageSpeed Insights / DevTools). Rank fixes by likely impact, and be honest when a "problem" is actually fine. No made-up percentages. My real metrics (paste what you have — Lighthouse/PSI): [LCP, CLS, INP/TBT, total page weight, request count — whatever I actually have] What the page is: [DESCRIBE, and paste the and any big scripts/styles if you can] What feels slow to me: [FIRST PAINT / JANK ON SCROLL / SLOW TAP / JUST THE SCORE] Give me: 1. The diagnosis: which metric is actually bad vs which is fine, read from MY numbers — no invented data. 2. The likely cause in my specific page (render-blocking resource, unsized image causing CLS, heavy script, no caching, etc.), pointing at the actual code I pasted where possible. 3. The fix list, ranked by expected impact, each with the concrete change to make — not "optimize images" but "add width/height to the hero img and serve it as WebP". 4. What to re-measure after each fix to confirm it worked. 5. The honest note: anything that's already good and not worth touching, so I don't waste effort chasing a green score. ``` ## Example output [TO FILL AFTER TESTING] ## Tweaks - Get real numbers first: run the page through PageSpeed Insights and paste the results — the audit is only as good as the data - Fix one thing, re-measure, then the next; bulk changes hide which one helped - A perfect score isn't the goal — a page that feels fast to real users is; the skill will tell you when to stop