[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-cloudflare-web-perf":3,"mdc--5g8dnm-key":39,"related-org-cloudflare-web-perf":1667,"related-repo-cloudflare-web-perf":1846},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":25,"repoUrl":26,"updatedAt":27,"license":28,"forks":29,"topics":30,"repo":34,"sourceUrl":37,"mdContent":38},"web-perf","analyze web performance","Analyzes web performance using Chrome DevTools MCP. Measures Core Web Vitals (LCP, INP, CLS) and supplementary metrics (FCP, TBT, Speed Index), identifies render-blocking resources, network dependency chains, layout shifts, caching issues, and accessibility gaps. Use when asked to audit, profile, debug, or optimize page load performance, Lighthouse scores, or site speed. Biases towards retrieval from current documentation over pre-trained knowledge.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},"cloudflare","Cloudflare","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fcloudflare.jpg",[12,16,19,22],{"name":13,"slug":14,"type":15},"Performance","performance","tag",{"name":17,"slug":18,"type":15},"Monitoring","monitoring",{"name":20,"slug":21,"type":15},"MCP","mcp",{"name":23,"slug":24,"type":15},"Web Development","web-development",2112,"https:\u002F\u002Fgithub.com\u002Fcloudflare\u002Fskills","2026-04-06T18:07:34.156426",null,192,[31,8,32,33],"agents","skills","workers",{"repoUrl":26,"stars":25,"forks":29,"topics":35,"description":36},[31,8,32,33],"Skills for teaching agents how to build on Cloudflare.","https:\u002F\u002Fgithub.com\u002Fcloudflare\u002Fskills\u002Ftree\u002FHEAD\u002Fskills\u002Fweb-perf","---\nname: web-perf\ndescription: Analyzes web performance using Chrome DevTools MCP. Measures Core Web Vitals (LCP, INP, CLS) and supplementary metrics (FCP, TBT, Speed Index), identifies render-blocking resources, network dependency chains, layout shifts, caching issues, and accessibility gaps. Use when asked to audit, profile, debug, or optimize page load performance, Lighthouse scores, or site speed. Biases towards retrieval from current documentation over pre-trained knowledge.\n---\n\n# Web Performance Audit\n\nYour knowledge of web performance metrics, thresholds, and tooling APIs may be outdated. **Prefer retrieval over pre-training** when citing specific numbers or recommendations.\n\n## Retrieval Sources\n\n| Source | How to retrieve | Use for |\n|--------|----------------|---------|\n| web.dev | `https:\u002F\u002Fweb.dev\u002Farticles\u002Fvitals` | Core Web Vitals thresholds, definitions |\n| Chrome DevTools docs | `https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fdevtools\u002Fperformance` | Tooling APIs, trace analysis |\n| Lighthouse scoring | `https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Flighthouse\u002Fperformance\u002Fperformance-scoring` | Score weights, metric thresholds |\n\n## FIRST: Verify MCP Tools Available\n\n**Run this before starting.** Try calling `navigate_page` or `performance_start_trace`. If unavailable, STOP—the chrome-devtools MCP server isn't configured.\n\nAsk the user to add this to their MCP config:\n\n```json\n\"chrome-devtools\": {\n  \"type\": \"local\",\n  \"command\": [\"npx\", \"-y\", \"chrome-devtools-mcp@latest\"]\n}\n```\n\n## Key Guidelines\n\n- **Be assertive**: Verify claims by checking network requests, DOM, or codebase—then state findings definitively.\n- **Verify before recommending**: Confirm something is unused before suggesting removal.\n- **Quantify impact**: Use estimated savings from insights. Don't prioritize changes with 0ms impact.\n- **Skip non-issues**: If render-blocking resources have 0ms estimated impact, note but don't recommend action.\n- **Be specific**: Say \"compress hero.png (450KB) to WebP\" not \"optimize images\".\n- **Prioritize ruthlessly**: A site with 200ms LCP and 0 CLS is already excellent—say so.\n\n## Quick Reference\n\n| Task | Tool Call |\n|------|-----------|\n| Load page | `navigate_page(url: \"...\")` |\n| Start trace | `performance_start_trace(autoStop: true, reload: true)` |\n| Analyze insight | `performance_analyze_insight(insightSetId: \"...\", insightName: \"...\")` |\n| List requests | `list_network_requests(resourceTypes: [\"Script\", \"Stylesheet\", ...])` |\n| Request details | `get_network_request(reqid: \u003Cid>)` |\n| A11y snapshot | `take_snapshot(verbose: true)` |\n\n## Workflow\n\nCopy this checklist to track progress:\n\n```\nAudit Progress:\n- [ ] Phase 1: Performance trace (navigate + record)\n- [ ] Phase 2: Core Web Vitals analysis (includes CLS culprits)\n- [ ] Phase 3: Network analysis\n- [ ] Phase 4: Accessibility snapshot\n- [ ] Phase 5: Codebase analysis (skip if third-party site)\n```\n\n### Phase 1: Performance Trace\n\n1. Navigate to the target URL:\n   ```\n   navigate_page(url: \"\u003Ctarget-url>\")\n   ```\n\n2. Start a performance trace with reload to capture cold-load metrics:\n   ```\n   performance_start_trace(autoStop: true, reload: true)\n   ```\n\n3. Wait for trace completion, then retrieve results.\n\n**Troubleshooting:**\n- If trace returns empty or fails, verify the page loaded correctly with `navigate_page` first\n- If insight names don't match, inspect the trace response to list available insights\n\n### Phase 2: Core Web Vitals Analysis\n\nUse `performance_analyze_insight` to extract key metrics.\n\n**Note:** Insight names may vary across Chrome DevTools versions. If an insight name doesn't work, check the `insightSetId` from the trace response to discover available insights.\n\nCommon insight names:\n\n| Metric | Insight Name | What to Look For |\n|--------|--------------|------------------|\n| LCP | `LCPBreakdown` | Time to largest contentful paint; breakdown of TTFB, resource load, render delay |\n| CLS | `CLSCulprits` | Elements causing layout shifts (images without dimensions, injected content, font swaps) |\n| Render Blocking | `RenderBlocking` | CSS\u002FJS blocking first paint |\n| Document Latency | `DocumentLatency` | Server response time issues |\n| Network Dependencies | `NetworkRequestsDepGraph` | Request chains delaying critical resources |\n\nExample:\n```\nperformance_analyze_insight(insightSetId: \"\u003Cid-from-trace>\", insightName: \"LCPBreakdown\")\n```\n\n**Key thresholds (good\u002Fneeds-improvement\u002Fpoor):**\n- TTFB: \u003C 800ms \u002F \u003C 1.8s \u002F > 1.8s\n- FCP: \u003C 1.8s \u002F \u003C 3s \u002F > 3s\n- LCP: \u003C 2.5s \u002F \u003C 4s \u002F > 4s\n- INP: \u003C 200ms \u002F \u003C 500ms \u002F > 500ms\n- TBT: \u003C 200ms \u002F \u003C 600ms \u002F > 600ms\n- CLS: \u003C 0.1 \u002F \u003C 0.25 \u002F > 0.25\n- Speed Index: \u003C 3.4s \u002F \u003C 5.8s \u002F > 5.8s\n\n### Phase 3: Network Analysis\n\nList all network requests to identify optimization opportunities:\n```\nlist_network_requests(resourceTypes: [\"Script\", \"Stylesheet\", \"Document\", \"Font\", \"Image\"])\n```\n\n**Look for:**\n\n1. **Render-blocking resources**: JS\u002FCSS in `\u003Chead>` without `async`\u002F`defer`\u002F`media` attributes\n2. **Network chains**: Resources discovered late because they depend on other resources loading first (e.g., CSS imports, JS-loaded fonts)\n3. **Missing preloads**: Critical resources (fonts, hero images, key scripts) not preloaded\n4. **Caching issues**: Missing or weak `Cache-Control`, `ETag`, or `Last-Modified` headers\n5. **Large payloads**: Uncompressed or oversized JS\u002FCSS bundles\n6. **Unused preconnects**: If flagged, verify by checking if ANY requests went to that origin. If zero requests, it's definitively unused—recommend removal. If requests exist but loaded late, the preconnect may still be valuable.\n\nFor detailed request info:\n```\nget_network_request(reqid: \u003Cid>)\n```\n\n### Phase 4: Accessibility Snapshot\n\nTake an accessibility tree snapshot:\n```\ntake_snapshot(verbose: true)\n```\n\n**Flag high-level gaps:**\n- Missing or duplicate ARIA IDs\n- Elements with poor contrast ratios (check against WCAG AA: 4.5:1 for normal text, 3:1 for large text)\n- Focus traps or missing focus indicators\n- Interactive elements without accessible names\n\n## Phase 5: Codebase Analysis\n\n**Skip if auditing a third-party site without codebase access.**\n\nAnalyze the codebase to understand where improvements can be made.\n\n### Detect Framework & Bundler\n\nSearch for configuration files to identify the stack:\n\n| Tool | Config Files |\n|------|--------------|\n| Webpack | `webpack.config.js`, `webpack.*.js` |\n| Vite | `vite.config.js`, `vite.config.ts` |\n| Rollup | `rollup.config.js`, `rollup.config.mjs` |\n| esbuild | `esbuild.config.js`, build scripts with `esbuild` |\n| Parcel | `.parcelrc`, `package.json` (parcel field) |\n| Next.js | `next.config.js`, `next.config.mjs` |\n| Nuxt | `nuxt.config.js`, `nuxt.config.ts` |\n| SvelteKit | `svelte.config.js` |\n| Astro | `astro.config.mjs` |\n\nAlso check `package.json` for framework dependencies and build scripts.\n\n### Tree-Shaking & Dead Code\n\n- **Webpack**: Check for `mode: 'production'`, `sideEffects` in package.json, `usedExports` optimization\n- **Vite\u002FRollup**: Tree-shaking enabled by default; check for `treeshake` options\n- **Look for**: Barrel files (`index.js` re-exports), large utility libraries imported wholesale (lodash, moment)\n\n### Unused JS\u002FCSS\n\n- Check for CSS-in-JS vs. static CSS extraction\n- Look for PurgeCSS\u002FUnCSS configuration (Tailwind's `content` config)\n- Identify dynamic imports vs. eager loading\n\n### Polyfills\n\n- Check for `@babel\u002Fpreset-env` targets and `useBuiltIns` setting\n- Look for `core-js` imports (often oversized)\n- Check `browserslist` config for overly broad targeting\n\n### Compression & Minification\n\n- Check for `terser`, `esbuild`, or `swc` minification\n- Look for gzip\u002Fbrotli compression in build output or server config\n- Check for source maps in production builds (should be external or disabled)\n\n## Output Format\n\nPresent findings as:\n\n1. **Core Web Vitals Summary** - Table with metric, value, and rating (good\u002Fneeds-improvement\u002Fpoor)\n2. **Top Issues** - Prioritized list of problems with estimated impact (high\u002Fmedium\u002Flow)\n3. **Recommendations** - Specific, actionable fixes with code snippets or config changes\n4. **Codebase Findings** - Framework\u002Fbundler detected, optimization opportunities (omit if no codebase access)\n",{"data":40,"body":41},{"name":4,"description":6},{"type":42,"children":43},"root",[44,53,67,74,174,180,206,211,386,392,457,463,587,593,598,608,615,652,660,680,686,699,717,722,859,864,873,881,919,925,930,939,947,1065,1070,1079,1085,1090,1099,1107,1130,1136,1144,1149,1155,1160,1386,1398,1404,1475,1481,1507,1513,1563,1569,1607,1613,1618,1661],{"type":45,"tag":46,"props":47,"children":49},"element","h1",{"id":48},"web-performance-audit",[50],{"type":51,"value":52},"text","Web Performance Audit",{"type":45,"tag":54,"props":55,"children":56},"p",{},[57,59,65],{"type":51,"value":58},"Your knowledge of web performance metrics, thresholds, and tooling APIs may be outdated. ",{"type":45,"tag":60,"props":61,"children":62},"strong",{},[63],{"type":51,"value":64},"Prefer retrieval over pre-training",{"type":51,"value":66}," when citing specific numbers or recommendations.",{"type":45,"tag":68,"props":69,"children":71},"h2",{"id":70},"retrieval-sources",[72],{"type":51,"value":73},"Retrieval Sources",{"type":45,"tag":75,"props":76,"children":77},"table",{},[78,102],{"type":45,"tag":79,"props":80,"children":81},"thead",{},[82],{"type":45,"tag":83,"props":84,"children":85},"tr",{},[86,92,97],{"type":45,"tag":87,"props":88,"children":89},"th",{},[90],{"type":51,"value":91},"Source",{"type":45,"tag":87,"props":93,"children":94},{},[95],{"type":51,"value":96},"How to retrieve",{"type":45,"tag":87,"props":98,"children":99},{},[100],{"type":51,"value":101},"Use for",{"type":45,"tag":103,"props":104,"children":105},"tbody",{},[106,130,152],{"type":45,"tag":83,"props":107,"children":108},{},[109,115,125],{"type":45,"tag":110,"props":111,"children":112},"td",{},[113],{"type":51,"value":114},"web.dev",{"type":45,"tag":110,"props":116,"children":117},{},[118],{"type":45,"tag":119,"props":120,"children":122},"code",{"className":121},[],[123],{"type":51,"value":124},"https:\u002F\u002Fweb.dev\u002Farticles\u002Fvitals",{"type":45,"tag":110,"props":126,"children":127},{},[128],{"type":51,"value":129},"Core Web Vitals thresholds, definitions",{"type":45,"tag":83,"props":131,"children":132},{},[133,138,147],{"type":45,"tag":110,"props":134,"children":135},{},[136],{"type":51,"value":137},"Chrome DevTools docs",{"type":45,"tag":110,"props":139,"children":140},{},[141],{"type":45,"tag":119,"props":142,"children":144},{"className":143},[],[145],{"type":51,"value":146},"https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fdevtools\u002Fperformance",{"type":45,"tag":110,"props":148,"children":149},{},[150],{"type":51,"value":151},"Tooling APIs, trace analysis",{"type":45,"tag":83,"props":153,"children":154},{},[155,160,169],{"type":45,"tag":110,"props":156,"children":157},{},[158],{"type":51,"value":159},"Lighthouse scoring",{"type":45,"tag":110,"props":161,"children":162},{},[163],{"type":45,"tag":119,"props":164,"children":166},{"className":165},[],[167],{"type":51,"value":168},"https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Flighthouse\u002Fperformance\u002Fperformance-scoring",{"type":45,"tag":110,"props":170,"children":171},{},[172],{"type":51,"value":173},"Score weights, metric thresholds",{"type":45,"tag":68,"props":175,"children":177},{"id":176},"first-verify-mcp-tools-available",[178],{"type":51,"value":179},"FIRST: Verify MCP Tools Available",{"type":45,"tag":54,"props":181,"children":182},{},[183,188,190,196,198,204],{"type":45,"tag":60,"props":184,"children":185},{},[186],{"type":51,"value":187},"Run this before starting.",{"type":51,"value":189}," Try calling ",{"type":45,"tag":119,"props":191,"children":193},{"className":192},[],[194],{"type":51,"value":195},"navigate_page",{"type":51,"value":197}," or ",{"type":45,"tag":119,"props":199,"children":201},{"className":200},[],[202],{"type":51,"value":203},"performance_start_trace",{"type":51,"value":205},". If unavailable, STOP—the chrome-devtools MCP server isn't configured.",{"type":45,"tag":54,"props":207,"children":208},{},[209],{"type":51,"value":210},"Ask the user to add this to their MCP config:",{"type":45,"tag":212,"props":213,"children":218},"pre",{"className":214,"code":215,"language":216,"meta":217,"style":217},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\"chrome-devtools\": {\n  \"type\": \"local\",\n  \"command\": [\"npx\", \"-y\", \"chrome-devtools-mcp@latest\"]\n}\n","json","",[219],{"type":45,"tag":119,"props":220,"children":221},{"__ignoreMap":217},[222,255,298,377],{"type":45,"tag":223,"props":224,"children":227},"span",{"class":225,"line":226},"line",1,[228,234,240,244,250],{"type":45,"tag":223,"props":229,"children":231},{"style":230},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[232],{"type":51,"value":233},"\"",{"type":45,"tag":223,"props":235,"children":237},{"style":236},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[238],{"type":51,"value":239},"chrome-devtools",{"type":45,"tag":223,"props":241,"children":242},{"style":230},[243],{"type":51,"value":233},{"type":45,"tag":223,"props":245,"children":247},{"style":246},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[248],{"type":51,"value":249},": ",{"type":45,"tag":223,"props":251,"children":252},{"style":230},[253],{"type":51,"value":254},"{\n",{"type":45,"tag":223,"props":256,"children":258},{"class":225,"line":257},2,[259,264,270,274,279,284,289,293],{"type":45,"tag":223,"props":260,"children":261},{"style":230},[262],{"type":51,"value":263},"  \"",{"type":45,"tag":223,"props":265,"children":267},{"style":266},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[268],{"type":51,"value":269},"type",{"type":45,"tag":223,"props":271,"children":272},{"style":230},[273],{"type":51,"value":233},{"type":45,"tag":223,"props":275,"children":276},{"style":230},[277],{"type":51,"value":278},":",{"type":45,"tag":223,"props":280,"children":281},{"style":230},[282],{"type":51,"value":283}," \"",{"type":45,"tag":223,"props":285,"children":286},{"style":236},[287],{"type":51,"value":288},"local",{"type":45,"tag":223,"props":290,"children":291},{"style":230},[292],{"type":51,"value":233},{"type":45,"tag":223,"props":294,"children":295},{"style":230},[296],{"type":51,"value":297},",\n",{"type":45,"tag":223,"props":299,"children":301},{"class":225,"line":300},3,[302,306,311,315,319,324,328,333,337,342,346,351,355,359,363,368,372],{"type":45,"tag":223,"props":303,"children":304},{"style":230},[305],{"type":51,"value":263},{"type":45,"tag":223,"props":307,"children":308},{"style":266},[309],{"type":51,"value":310},"command",{"type":45,"tag":223,"props":312,"children":313},{"style":230},[314],{"type":51,"value":233},{"type":45,"tag":223,"props":316,"children":317},{"style":230},[318],{"type":51,"value":278},{"type":45,"tag":223,"props":320,"children":321},{"style":230},[322],{"type":51,"value":323}," [",{"type":45,"tag":223,"props":325,"children":326},{"style":230},[327],{"type":51,"value":233},{"type":45,"tag":223,"props":329,"children":330},{"style":236},[331],{"type":51,"value":332},"npx",{"type":45,"tag":223,"props":334,"children":335},{"style":230},[336],{"type":51,"value":233},{"type":45,"tag":223,"props":338,"children":339},{"style":230},[340],{"type":51,"value":341},",",{"type":45,"tag":223,"props":343,"children":344},{"style":230},[345],{"type":51,"value":283},{"type":45,"tag":223,"props":347,"children":348},{"style":236},[349],{"type":51,"value":350},"-y",{"type":45,"tag":223,"props":352,"children":353},{"style":230},[354],{"type":51,"value":233},{"type":45,"tag":223,"props":356,"children":357},{"style":230},[358],{"type":51,"value":341},{"type":45,"tag":223,"props":360,"children":361},{"style":230},[362],{"type":51,"value":283},{"type":45,"tag":223,"props":364,"children":365},{"style":236},[366],{"type":51,"value":367},"chrome-devtools-mcp@latest",{"type":45,"tag":223,"props":369,"children":370},{"style":230},[371],{"type":51,"value":233},{"type":45,"tag":223,"props":373,"children":374},{"style":230},[375],{"type":51,"value":376},"]\n",{"type":45,"tag":223,"props":378,"children":380},{"class":225,"line":379},4,[381],{"type":45,"tag":223,"props":382,"children":383},{"style":230},[384],{"type":51,"value":385},"}\n",{"type":45,"tag":68,"props":387,"children":389},{"id":388},"key-guidelines",[390],{"type":51,"value":391},"Key Guidelines",{"type":45,"tag":393,"props":394,"children":395},"ul",{},[396,407,417,427,437,447],{"type":45,"tag":397,"props":398,"children":399},"li",{},[400,405],{"type":45,"tag":60,"props":401,"children":402},{},[403],{"type":51,"value":404},"Be assertive",{"type":51,"value":406},": Verify claims by checking network requests, DOM, or codebase—then state findings definitively.",{"type":45,"tag":397,"props":408,"children":409},{},[410,415],{"type":45,"tag":60,"props":411,"children":412},{},[413],{"type":51,"value":414},"Verify before recommending",{"type":51,"value":416},": Confirm something is unused before suggesting removal.",{"type":45,"tag":397,"props":418,"children":419},{},[420,425],{"type":45,"tag":60,"props":421,"children":422},{},[423],{"type":51,"value":424},"Quantify impact",{"type":51,"value":426},": Use estimated savings from insights. Don't prioritize changes with 0ms impact.",{"type":45,"tag":397,"props":428,"children":429},{},[430,435],{"type":45,"tag":60,"props":431,"children":432},{},[433],{"type":51,"value":434},"Skip non-issues",{"type":51,"value":436},": If render-blocking resources have 0ms estimated impact, note but don't recommend action.",{"type":45,"tag":397,"props":438,"children":439},{},[440,445],{"type":45,"tag":60,"props":441,"children":442},{},[443],{"type":51,"value":444},"Be specific",{"type":51,"value":446},": Say \"compress hero.png (450KB) to WebP\" not \"optimize images\".",{"type":45,"tag":397,"props":448,"children":449},{},[450,455],{"type":45,"tag":60,"props":451,"children":452},{},[453],{"type":51,"value":454},"Prioritize ruthlessly",{"type":51,"value":456},": A site with 200ms LCP and 0 CLS is already excellent—say so.",{"type":45,"tag":68,"props":458,"children":460},{"id":459},"quick-reference",[461],{"type":51,"value":462},"Quick Reference",{"type":45,"tag":75,"props":464,"children":465},{},[466,482],{"type":45,"tag":79,"props":467,"children":468},{},[469],{"type":45,"tag":83,"props":470,"children":471},{},[472,477],{"type":45,"tag":87,"props":473,"children":474},{},[475],{"type":51,"value":476},"Task",{"type":45,"tag":87,"props":478,"children":479},{},[480],{"type":51,"value":481},"Tool Call",{"type":45,"tag":103,"props":483,"children":484},{},[485,502,519,536,553,570],{"type":45,"tag":83,"props":486,"children":487},{},[488,493],{"type":45,"tag":110,"props":489,"children":490},{},[491],{"type":51,"value":492},"Load page",{"type":45,"tag":110,"props":494,"children":495},{},[496],{"type":45,"tag":119,"props":497,"children":499},{"className":498},[],[500],{"type":51,"value":501},"navigate_page(url: \"...\")",{"type":45,"tag":83,"props":503,"children":504},{},[505,510],{"type":45,"tag":110,"props":506,"children":507},{},[508],{"type":51,"value":509},"Start trace",{"type":45,"tag":110,"props":511,"children":512},{},[513],{"type":45,"tag":119,"props":514,"children":516},{"className":515},[],[517],{"type":51,"value":518},"performance_start_trace(autoStop: true, reload: true)",{"type":45,"tag":83,"props":520,"children":521},{},[522,527],{"type":45,"tag":110,"props":523,"children":524},{},[525],{"type":51,"value":526},"Analyze insight",{"type":45,"tag":110,"props":528,"children":529},{},[530],{"type":45,"tag":119,"props":531,"children":533},{"className":532},[],[534],{"type":51,"value":535},"performance_analyze_insight(insightSetId: \"...\", insightName: \"...\")",{"type":45,"tag":83,"props":537,"children":538},{},[539,544],{"type":45,"tag":110,"props":540,"children":541},{},[542],{"type":51,"value":543},"List requests",{"type":45,"tag":110,"props":545,"children":546},{},[547],{"type":45,"tag":119,"props":548,"children":550},{"className":549},[],[551],{"type":51,"value":552},"list_network_requests(resourceTypes: [\"Script\", \"Stylesheet\", ...])",{"type":45,"tag":83,"props":554,"children":555},{},[556,561],{"type":45,"tag":110,"props":557,"children":558},{},[559],{"type":51,"value":560},"Request details",{"type":45,"tag":110,"props":562,"children":563},{},[564],{"type":45,"tag":119,"props":565,"children":567},{"className":566},[],[568],{"type":51,"value":569},"get_network_request(reqid: \u003Cid>)",{"type":45,"tag":83,"props":571,"children":572},{},[573,578],{"type":45,"tag":110,"props":574,"children":575},{},[576],{"type":51,"value":577},"A11y snapshot",{"type":45,"tag":110,"props":579,"children":580},{},[581],{"type":45,"tag":119,"props":582,"children":584},{"className":583},[],[585],{"type":51,"value":586},"take_snapshot(verbose: true)",{"type":45,"tag":68,"props":588,"children":590},{"id":589},"workflow",[591],{"type":51,"value":592},"Workflow",{"type":45,"tag":54,"props":594,"children":595},{},[596],{"type":51,"value":597},"Copy this checklist to track progress:",{"type":45,"tag":212,"props":599,"children":603},{"className":600,"code":602,"language":51},[601],"language-text","Audit Progress:\n- [ ] Phase 1: Performance trace (navigate + record)\n- [ ] Phase 2: Core Web Vitals analysis (includes CLS culprits)\n- [ ] Phase 3: Network analysis\n- [ ] Phase 4: Accessibility snapshot\n- [ ] Phase 5: Codebase analysis (skip if third-party site)\n",[604],{"type":45,"tag":119,"props":605,"children":606},{"__ignoreMap":217},[607],{"type":51,"value":602},{"type":45,"tag":609,"props":610,"children":612},"h3",{"id":611},"phase-1-performance-trace",[613],{"type":51,"value":614},"Phase 1: Performance Trace",{"type":45,"tag":616,"props":617,"children":618},"ol",{},[619,633,647],{"type":45,"tag":397,"props":620,"children":621},{},[622,624],{"type":51,"value":623},"Navigate to the target URL:",{"type":45,"tag":212,"props":625,"children":628},{"className":626,"code":627,"language":51},[601],"navigate_page(url: \"\u003Ctarget-url>\")\n",[629],{"type":45,"tag":119,"props":630,"children":631},{"__ignoreMap":217},[632],{"type":51,"value":627},{"type":45,"tag":397,"props":634,"children":635},{},[636,638],{"type":51,"value":637},"Start a performance trace with reload to capture cold-load metrics:",{"type":45,"tag":212,"props":639,"children":642},{"className":640,"code":641,"language":51},[601],"performance_start_trace(autoStop: true, reload: true)\n",[643],{"type":45,"tag":119,"props":644,"children":645},{"__ignoreMap":217},[646],{"type":51,"value":641},{"type":45,"tag":397,"props":648,"children":649},{},[650],{"type":51,"value":651},"Wait for trace completion, then retrieve results.",{"type":45,"tag":54,"props":653,"children":654},{},[655],{"type":45,"tag":60,"props":656,"children":657},{},[658],{"type":51,"value":659},"Troubleshooting:",{"type":45,"tag":393,"props":661,"children":662},{},[663,675],{"type":45,"tag":397,"props":664,"children":665},{},[666,668,673],{"type":51,"value":667},"If trace returns empty or fails, verify the page loaded correctly with ",{"type":45,"tag":119,"props":669,"children":671},{"className":670},[],[672],{"type":51,"value":195},{"type":51,"value":674}," first",{"type":45,"tag":397,"props":676,"children":677},{},[678],{"type":51,"value":679},"If insight names don't match, inspect the trace response to list available insights",{"type":45,"tag":609,"props":681,"children":683},{"id":682},"phase-2-core-web-vitals-analysis",[684],{"type":51,"value":685},"Phase 2: Core Web Vitals Analysis",{"type":45,"tag":54,"props":687,"children":688},{},[689,691,697],{"type":51,"value":690},"Use ",{"type":45,"tag":119,"props":692,"children":694},{"className":693},[],[695],{"type":51,"value":696},"performance_analyze_insight",{"type":51,"value":698}," to extract key metrics.",{"type":45,"tag":54,"props":700,"children":701},{},[702,707,709,715],{"type":45,"tag":60,"props":703,"children":704},{},[705],{"type":51,"value":706},"Note:",{"type":51,"value":708}," Insight names may vary across Chrome DevTools versions. If an insight name doesn't work, check the ",{"type":45,"tag":119,"props":710,"children":712},{"className":711},[],[713],{"type":51,"value":714},"insightSetId",{"type":51,"value":716}," from the trace response to discover available insights.",{"type":45,"tag":54,"props":718,"children":719},{},[720],{"type":51,"value":721},"Common insight names:",{"type":45,"tag":75,"props":723,"children":724},{},[725,746],{"type":45,"tag":79,"props":726,"children":727},{},[728],{"type":45,"tag":83,"props":729,"children":730},{},[731,736,741],{"type":45,"tag":87,"props":732,"children":733},{},[734],{"type":51,"value":735},"Metric",{"type":45,"tag":87,"props":737,"children":738},{},[739],{"type":51,"value":740},"Insight Name",{"type":45,"tag":87,"props":742,"children":743},{},[744],{"type":51,"value":745},"What to Look For",{"type":45,"tag":103,"props":747,"children":748},{},[749,771,793,815,837],{"type":45,"tag":83,"props":750,"children":751},{},[752,757,766],{"type":45,"tag":110,"props":753,"children":754},{},[755],{"type":51,"value":756},"LCP",{"type":45,"tag":110,"props":758,"children":759},{},[760],{"type":45,"tag":119,"props":761,"children":763},{"className":762},[],[764],{"type":51,"value":765},"LCPBreakdown",{"type":45,"tag":110,"props":767,"children":768},{},[769],{"type":51,"value":770},"Time to largest contentful paint; breakdown of TTFB, resource load, render delay",{"type":45,"tag":83,"props":772,"children":773},{},[774,779,788],{"type":45,"tag":110,"props":775,"children":776},{},[777],{"type":51,"value":778},"CLS",{"type":45,"tag":110,"props":780,"children":781},{},[782],{"type":45,"tag":119,"props":783,"children":785},{"className":784},[],[786],{"type":51,"value":787},"CLSCulprits",{"type":45,"tag":110,"props":789,"children":790},{},[791],{"type":51,"value":792},"Elements causing layout shifts (images without dimensions, injected content, font swaps)",{"type":45,"tag":83,"props":794,"children":795},{},[796,801,810],{"type":45,"tag":110,"props":797,"children":798},{},[799],{"type":51,"value":800},"Render Blocking",{"type":45,"tag":110,"props":802,"children":803},{},[804],{"type":45,"tag":119,"props":805,"children":807},{"className":806},[],[808],{"type":51,"value":809},"RenderBlocking",{"type":45,"tag":110,"props":811,"children":812},{},[813],{"type":51,"value":814},"CSS\u002FJS blocking first paint",{"type":45,"tag":83,"props":816,"children":817},{},[818,823,832],{"type":45,"tag":110,"props":819,"children":820},{},[821],{"type":51,"value":822},"Document Latency",{"type":45,"tag":110,"props":824,"children":825},{},[826],{"type":45,"tag":119,"props":827,"children":829},{"className":828},[],[830],{"type":51,"value":831},"DocumentLatency",{"type":45,"tag":110,"props":833,"children":834},{},[835],{"type":51,"value":836},"Server response time issues",{"type":45,"tag":83,"props":838,"children":839},{},[840,845,854],{"type":45,"tag":110,"props":841,"children":842},{},[843],{"type":51,"value":844},"Network Dependencies",{"type":45,"tag":110,"props":846,"children":847},{},[848],{"type":45,"tag":119,"props":849,"children":851},{"className":850},[],[852],{"type":51,"value":853},"NetworkRequestsDepGraph",{"type":45,"tag":110,"props":855,"children":856},{},[857],{"type":51,"value":858},"Request chains delaying critical resources",{"type":45,"tag":54,"props":860,"children":861},{},[862],{"type":51,"value":863},"Example:",{"type":45,"tag":212,"props":865,"children":868},{"className":866,"code":867,"language":51},[601],"performance_analyze_insight(insightSetId: \"\u003Cid-from-trace>\", insightName: \"LCPBreakdown\")\n",[869],{"type":45,"tag":119,"props":870,"children":871},{"__ignoreMap":217},[872],{"type":51,"value":867},{"type":45,"tag":54,"props":874,"children":875},{},[876],{"type":45,"tag":60,"props":877,"children":878},{},[879],{"type":51,"value":880},"Key thresholds (good\u002Fneeds-improvement\u002Fpoor):",{"type":45,"tag":393,"props":882,"children":883},{},[884,889,894,899,904,909,914],{"type":45,"tag":397,"props":885,"children":886},{},[887],{"type":51,"value":888},"TTFB: \u003C 800ms \u002F \u003C 1.8s \u002F > 1.8s",{"type":45,"tag":397,"props":890,"children":891},{},[892],{"type":51,"value":893},"FCP: \u003C 1.8s \u002F \u003C 3s \u002F > 3s",{"type":45,"tag":397,"props":895,"children":896},{},[897],{"type":51,"value":898},"LCP: \u003C 2.5s \u002F \u003C 4s \u002F > 4s",{"type":45,"tag":397,"props":900,"children":901},{},[902],{"type":51,"value":903},"INP: \u003C 200ms \u002F \u003C 500ms \u002F > 500ms",{"type":45,"tag":397,"props":905,"children":906},{},[907],{"type":51,"value":908},"TBT: \u003C 200ms \u002F \u003C 600ms \u002F > 600ms",{"type":45,"tag":397,"props":910,"children":911},{},[912],{"type":51,"value":913},"CLS: \u003C 0.1 \u002F \u003C 0.25 \u002F > 0.25",{"type":45,"tag":397,"props":915,"children":916},{},[917],{"type":51,"value":918},"Speed Index: \u003C 3.4s \u002F \u003C 5.8s \u002F > 5.8s",{"type":45,"tag":609,"props":920,"children":922},{"id":921},"phase-3-network-analysis",[923],{"type":51,"value":924},"Phase 3: Network Analysis",{"type":45,"tag":54,"props":926,"children":927},{},[928],{"type":51,"value":929},"List all network requests to identify optimization opportunities:",{"type":45,"tag":212,"props":931,"children":934},{"className":932,"code":933,"language":51},[601],"list_network_requests(resourceTypes: [\"Script\", \"Stylesheet\", \"Document\", \"Font\", \"Image\"])\n",[935],{"type":45,"tag":119,"props":936,"children":937},{"__ignoreMap":217},[938],{"type":51,"value":933},{"type":45,"tag":54,"props":940,"children":941},{},[942],{"type":45,"tag":60,"props":943,"children":944},{},[945],{"type":51,"value":946},"Look for:",{"type":45,"tag":616,"props":948,"children":949},{},[950,991,1001,1011,1045,1055],{"type":45,"tag":397,"props":951,"children":952},{},[953,958,960,966,968,974,976,982,983,989],{"type":45,"tag":60,"props":954,"children":955},{},[956],{"type":51,"value":957},"Render-blocking resources",{"type":51,"value":959},": JS\u002FCSS in ",{"type":45,"tag":119,"props":961,"children":963},{"className":962},[],[964],{"type":51,"value":965},"\u003Chead>",{"type":51,"value":967}," without ",{"type":45,"tag":119,"props":969,"children":971},{"className":970},[],[972],{"type":51,"value":973},"async",{"type":51,"value":975},"\u002F",{"type":45,"tag":119,"props":977,"children":979},{"className":978},[],[980],{"type":51,"value":981},"defer",{"type":51,"value":975},{"type":45,"tag":119,"props":984,"children":986},{"className":985},[],[987],{"type":51,"value":988},"media",{"type":51,"value":990}," attributes",{"type":45,"tag":397,"props":992,"children":993},{},[994,999],{"type":45,"tag":60,"props":995,"children":996},{},[997],{"type":51,"value":998},"Network chains",{"type":51,"value":1000},": Resources discovered late because they depend on other resources loading first (e.g., CSS imports, JS-loaded fonts)",{"type":45,"tag":397,"props":1002,"children":1003},{},[1004,1009],{"type":45,"tag":60,"props":1005,"children":1006},{},[1007],{"type":51,"value":1008},"Missing preloads",{"type":51,"value":1010},": Critical resources (fonts, hero images, key scripts) not preloaded",{"type":45,"tag":397,"props":1012,"children":1013},{},[1014,1019,1021,1027,1029,1035,1037,1043],{"type":45,"tag":60,"props":1015,"children":1016},{},[1017],{"type":51,"value":1018},"Caching issues",{"type":51,"value":1020},": Missing or weak ",{"type":45,"tag":119,"props":1022,"children":1024},{"className":1023},[],[1025],{"type":51,"value":1026},"Cache-Control",{"type":51,"value":1028},", ",{"type":45,"tag":119,"props":1030,"children":1032},{"className":1031},[],[1033],{"type":51,"value":1034},"ETag",{"type":51,"value":1036},", or ",{"type":45,"tag":119,"props":1038,"children":1040},{"className":1039},[],[1041],{"type":51,"value":1042},"Last-Modified",{"type":51,"value":1044}," headers",{"type":45,"tag":397,"props":1046,"children":1047},{},[1048,1053],{"type":45,"tag":60,"props":1049,"children":1050},{},[1051],{"type":51,"value":1052},"Large payloads",{"type":51,"value":1054},": Uncompressed or oversized JS\u002FCSS bundles",{"type":45,"tag":397,"props":1056,"children":1057},{},[1058,1063],{"type":45,"tag":60,"props":1059,"children":1060},{},[1061],{"type":51,"value":1062},"Unused preconnects",{"type":51,"value":1064},": If flagged, verify by checking if ANY requests went to that origin. If zero requests, it's definitively unused—recommend removal. If requests exist but loaded late, the preconnect may still be valuable.",{"type":45,"tag":54,"props":1066,"children":1067},{},[1068],{"type":51,"value":1069},"For detailed request info:",{"type":45,"tag":212,"props":1071,"children":1074},{"className":1072,"code":1073,"language":51},[601],"get_network_request(reqid: \u003Cid>)\n",[1075],{"type":45,"tag":119,"props":1076,"children":1077},{"__ignoreMap":217},[1078],{"type":51,"value":1073},{"type":45,"tag":609,"props":1080,"children":1082},{"id":1081},"phase-4-accessibility-snapshot",[1083],{"type":51,"value":1084},"Phase 4: Accessibility Snapshot",{"type":45,"tag":54,"props":1086,"children":1087},{},[1088],{"type":51,"value":1089},"Take an accessibility tree snapshot:",{"type":45,"tag":212,"props":1091,"children":1094},{"className":1092,"code":1093,"language":51},[601],"take_snapshot(verbose: true)\n",[1095],{"type":45,"tag":119,"props":1096,"children":1097},{"__ignoreMap":217},[1098],{"type":51,"value":1093},{"type":45,"tag":54,"props":1100,"children":1101},{},[1102],{"type":45,"tag":60,"props":1103,"children":1104},{},[1105],{"type":51,"value":1106},"Flag high-level gaps:",{"type":45,"tag":393,"props":1108,"children":1109},{},[1110,1115,1120,1125],{"type":45,"tag":397,"props":1111,"children":1112},{},[1113],{"type":51,"value":1114},"Missing or duplicate ARIA IDs",{"type":45,"tag":397,"props":1116,"children":1117},{},[1118],{"type":51,"value":1119},"Elements with poor contrast ratios (check against WCAG AA: 4.5:1 for normal text, 3:1 for large text)",{"type":45,"tag":397,"props":1121,"children":1122},{},[1123],{"type":51,"value":1124},"Focus traps or missing focus indicators",{"type":45,"tag":397,"props":1126,"children":1127},{},[1128],{"type":51,"value":1129},"Interactive elements without accessible names",{"type":45,"tag":68,"props":1131,"children":1133},{"id":1132},"phase-5-codebase-analysis",[1134],{"type":51,"value":1135},"Phase 5: Codebase Analysis",{"type":45,"tag":54,"props":1137,"children":1138},{},[1139],{"type":45,"tag":60,"props":1140,"children":1141},{},[1142],{"type":51,"value":1143},"Skip if auditing a third-party site without codebase access.",{"type":45,"tag":54,"props":1145,"children":1146},{},[1147],{"type":51,"value":1148},"Analyze the codebase to understand where improvements can be made.",{"type":45,"tag":609,"props":1150,"children":1152},{"id":1151},"detect-framework-bundler",[1153],{"type":51,"value":1154},"Detect Framework & Bundler",{"type":45,"tag":54,"props":1156,"children":1157},{},[1158],{"type":51,"value":1159},"Search for configuration files to identify the stack:",{"type":45,"tag":75,"props":1161,"children":1162},{},[1163,1179],{"type":45,"tag":79,"props":1164,"children":1165},{},[1166],{"type":45,"tag":83,"props":1167,"children":1168},{},[1169,1174],{"type":45,"tag":87,"props":1170,"children":1171},{},[1172],{"type":51,"value":1173},"Tool",{"type":45,"tag":87,"props":1175,"children":1176},{},[1177],{"type":51,"value":1178},"Config Files",{"type":45,"tag":103,"props":1180,"children":1181},{},[1182,1206,1230,1254,1278,1304,1328,1352,1369],{"type":45,"tag":83,"props":1183,"children":1184},{},[1185,1190],{"type":45,"tag":110,"props":1186,"children":1187},{},[1188],{"type":51,"value":1189},"Webpack",{"type":45,"tag":110,"props":1191,"children":1192},{},[1193,1199,1200],{"type":45,"tag":119,"props":1194,"children":1196},{"className":1195},[],[1197],{"type":51,"value":1198},"webpack.config.js",{"type":51,"value":1028},{"type":45,"tag":119,"props":1201,"children":1203},{"className":1202},[],[1204],{"type":51,"value":1205},"webpack.*.js",{"type":45,"tag":83,"props":1207,"children":1208},{},[1209,1214],{"type":45,"tag":110,"props":1210,"children":1211},{},[1212],{"type":51,"value":1213},"Vite",{"type":45,"tag":110,"props":1215,"children":1216},{},[1217,1223,1224],{"type":45,"tag":119,"props":1218,"children":1220},{"className":1219},[],[1221],{"type":51,"value":1222},"vite.config.js",{"type":51,"value":1028},{"type":45,"tag":119,"props":1225,"children":1227},{"className":1226},[],[1228],{"type":51,"value":1229},"vite.config.ts",{"type":45,"tag":83,"props":1231,"children":1232},{},[1233,1238],{"type":45,"tag":110,"props":1234,"children":1235},{},[1236],{"type":51,"value":1237},"Rollup",{"type":45,"tag":110,"props":1239,"children":1240},{},[1241,1247,1248],{"type":45,"tag":119,"props":1242,"children":1244},{"className":1243},[],[1245],{"type":51,"value":1246},"rollup.config.js",{"type":51,"value":1028},{"type":45,"tag":119,"props":1249,"children":1251},{"className":1250},[],[1252],{"type":51,"value":1253},"rollup.config.mjs",{"type":45,"tag":83,"props":1255,"children":1256},{},[1257,1262],{"type":45,"tag":110,"props":1258,"children":1259},{},[1260],{"type":51,"value":1261},"esbuild",{"type":45,"tag":110,"props":1263,"children":1264},{},[1265,1271,1273],{"type":45,"tag":119,"props":1266,"children":1268},{"className":1267},[],[1269],{"type":51,"value":1270},"esbuild.config.js",{"type":51,"value":1272},", build scripts with ",{"type":45,"tag":119,"props":1274,"children":1276},{"className":1275},[],[1277],{"type":51,"value":1261},{"type":45,"tag":83,"props":1279,"children":1280},{},[1281,1286],{"type":45,"tag":110,"props":1282,"children":1283},{},[1284],{"type":51,"value":1285},"Parcel",{"type":45,"tag":110,"props":1287,"children":1288},{},[1289,1295,1296,1302],{"type":45,"tag":119,"props":1290,"children":1292},{"className":1291},[],[1293],{"type":51,"value":1294},".parcelrc",{"type":51,"value":1028},{"type":45,"tag":119,"props":1297,"children":1299},{"className":1298},[],[1300],{"type":51,"value":1301},"package.json",{"type":51,"value":1303}," (parcel field)",{"type":45,"tag":83,"props":1305,"children":1306},{},[1307,1312],{"type":45,"tag":110,"props":1308,"children":1309},{},[1310],{"type":51,"value":1311},"Next.js",{"type":45,"tag":110,"props":1313,"children":1314},{},[1315,1321,1322],{"type":45,"tag":119,"props":1316,"children":1318},{"className":1317},[],[1319],{"type":51,"value":1320},"next.config.js",{"type":51,"value":1028},{"type":45,"tag":119,"props":1323,"children":1325},{"className":1324},[],[1326],{"type":51,"value":1327},"next.config.mjs",{"type":45,"tag":83,"props":1329,"children":1330},{},[1331,1336],{"type":45,"tag":110,"props":1332,"children":1333},{},[1334],{"type":51,"value":1335},"Nuxt",{"type":45,"tag":110,"props":1337,"children":1338},{},[1339,1345,1346],{"type":45,"tag":119,"props":1340,"children":1342},{"className":1341},[],[1343],{"type":51,"value":1344},"nuxt.config.js",{"type":51,"value":1028},{"type":45,"tag":119,"props":1347,"children":1349},{"className":1348},[],[1350],{"type":51,"value":1351},"nuxt.config.ts",{"type":45,"tag":83,"props":1353,"children":1354},{},[1355,1360],{"type":45,"tag":110,"props":1356,"children":1357},{},[1358],{"type":51,"value":1359},"SvelteKit",{"type":45,"tag":110,"props":1361,"children":1362},{},[1363],{"type":45,"tag":119,"props":1364,"children":1366},{"className":1365},[],[1367],{"type":51,"value":1368},"svelte.config.js",{"type":45,"tag":83,"props":1370,"children":1371},{},[1372,1377],{"type":45,"tag":110,"props":1373,"children":1374},{},[1375],{"type":51,"value":1376},"Astro",{"type":45,"tag":110,"props":1378,"children":1379},{},[1380],{"type":45,"tag":119,"props":1381,"children":1383},{"className":1382},[],[1384],{"type":51,"value":1385},"astro.config.mjs",{"type":45,"tag":54,"props":1387,"children":1388},{},[1389,1391,1396],{"type":51,"value":1390},"Also check ",{"type":45,"tag":119,"props":1392,"children":1394},{"className":1393},[],[1395],{"type":51,"value":1301},{"type":51,"value":1397}," for framework dependencies and build scripts.",{"type":45,"tag":609,"props":1399,"children":1401},{"id":1400},"tree-shaking-dead-code",[1402],{"type":51,"value":1403},"Tree-Shaking & Dead Code",{"type":45,"tag":393,"props":1405,"children":1406},{},[1407,1439,1457],{"type":45,"tag":397,"props":1408,"children":1409},{},[1410,1414,1416,1422,1423,1429,1431,1437],{"type":45,"tag":60,"props":1411,"children":1412},{},[1413],{"type":51,"value":1189},{"type":51,"value":1415},": Check for ",{"type":45,"tag":119,"props":1417,"children":1419},{"className":1418},[],[1420],{"type":51,"value":1421},"mode: 'production'",{"type":51,"value":1028},{"type":45,"tag":119,"props":1424,"children":1426},{"className":1425},[],[1427],{"type":51,"value":1428},"sideEffects",{"type":51,"value":1430}," in package.json, ",{"type":45,"tag":119,"props":1432,"children":1434},{"className":1433},[],[1435],{"type":51,"value":1436},"usedExports",{"type":51,"value":1438}," optimization",{"type":45,"tag":397,"props":1440,"children":1441},{},[1442,1447,1449,1455],{"type":45,"tag":60,"props":1443,"children":1444},{},[1445],{"type":51,"value":1446},"Vite\u002FRollup",{"type":51,"value":1448},": Tree-shaking enabled by default; check for ",{"type":45,"tag":119,"props":1450,"children":1452},{"className":1451},[],[1453],{"type":51,"value":1454},"treeshake",{"type":51,"value":1456}," options",{"type":45,"tag":397,"props":1458,"children":1459},{},[1460,1465,1467,1473],{"type":45,"tag":60,"props":1461,"children":1462},{},[1463],{"type":51,"value":1464},"Look for",{"type":51,"value":1466},": Barrel files (",{"type":45,"tag":119,"props":1468,"children":1470},{"className":1469},[],[1471],{"type":51,"value":1472},"index.js",{"type":51,"value":1474}," re-exports), large utility libraries imported wholesale (lodash, moment)",{"type":45,"tag":609,"props":1476,"children":1478},{"id":1477},"unused-jscss",[1479],{"type":51,"value":1480},"Unused JS\u002FCSS",{"type":45,"tag":393,"props":1482,"children":1483},{},[1484,1489,1502],{"type":45,"tag":397,"props":1485,"children":1486},{},[1487],{"type":51,"value":1488},"Check for CSS-in-JS vs. static CSS extraction",{"type":45,"tag":397,"props":1490,"children":1491},{},[1492,1494,1500],{"type":51,"value":1493},"Look for PurgeCSS\u002FUnCSS configuration (Tailwind's ",{"type":45,"tag":119,"props":1495,"children":1497},{"className":1496},[],[1498],{"type":51,"value":1499},"content",{"type":51,"value":1501}," config)",{"type":45,"tag":397,"props":1503,"children":1504},{},[1505],{"type":51,"value":1506},"Identify dynamic imports vs. eager loading",{"type":45,"tag":609,"props":1508,"children":1510},{"id":1509},"polyfills",[1511],{"type":51,"value":1512},"Polyfills",{"type":45,"tag":393,"props":1514,"children":1515},{},[1516,1537,1550],{"type":45,"tag":397,"props":1517,"children":1518},{},[1519,1521,1527,1529,1535],{"type":51,"value":1520},"Check for ",{"type":45,"tag":119,"props":1522,"children":1524},{"className":1523},[],[1525],{"type":51,"value":1526},"@babel\u002Fpreset-env",{"type":51,"value":1528}," targets and ",{"type":45,"tag":119,"props":1530,"children":1532},{"className":1531},[],[1533],{"type":51,"value":1534},"useBuiltIns",{"type":51,"value":1536}," setting",{"type":45,"tag":397,"props":1538,"children":1539},{},[1540,1542,1548],{"type":51,"value":1541},"Look for ",{"type":45,"tag":119,"props":1543,"children":1545},{"className":1544},[],[1546],{"type":51,"value":1547},"core-js",{"type":51,"value":1549}," imports (often oversized)",{"type":45,"tag":397,"props":1551,"children":1552},{},[1553,1555,1561],{"type":51,"value":1554},"Check ",{"type":45,"tag":119,"props":1556,"children":1558},{"className":1557},[],[1559],{"type":51,"value":1560},"browserslist",{"type":51,"value":1562}," config for overly broad targeting",{"type":45,"tag":609,"props":1564,"children":1566},{"id":1565},"compression-minification",[1567],{"type":51,"value":1568},"Compression & Minification",{"type":45,"tag":393,"props":1570,"children":1571},{},[1572,1597,1602],{"type":45,"tag":397,"props":1573,"children":1574},{},[1575,1576,1582,1583,1588,1589,1595],{"type":51,"value":1520},{"type":45,"tag":119,"props":1577,"children":1579},{"className":1578},[],[1580],{"type":51,"value":1581},"terser",{"type":51,"value":1028},{"type":45,"tag":119,"props":1584,"children":1586},{"className":1585},[],[1587],{"type":51,"value":1261},{"type":51,"value":1036},{"type":45,"tag":119,"props":1590,"children":1592},{"className":1591},[],[1593],{"type":51,"value":1594},"swc",{"type":51,"value":1596}," minification",{"type":45,"tag":397,"props":1598,"children":1599},{},[1600],{"type":51,"value":1601},"Look for gzip\u002Fbrotli compression in build output or server config",{"type":45,"tag":397,"props":1603,"children":1604},{},[1605],{"type":51,"value":1606},"Check for source maps in production builds (should be external or disabled)",{"type":45,"tag":68,"props":1608,"children":1610},{"id":1609},"output-format",[1611],{"type":51,"value":1612},"Output Format",{"type":45,"tag":54,"props":1614,"children":1615},{},[1616],{"type":51,"value":1617},"Present findings as:",{"type":45,"tag":616,"props":1619,"children":1620},{},[1621,1631,1641,1651],{"type":45,"tag":397,"props":1622,"children":1623},{},[1624,1629],{"type":45,"tag":60,"props":1625,"children":1626},{},[1627],{"type":51,"value":1628},"Core Web Vitals Summary",{"type":51,"value":1630}," - Table with metric, value, and rating (good\u002Fneeds-improvement\u002Fpoor)",{"type":45,"tag":397,"props":1632,"children":1633},{},[1634,1639],{"type":45,"tag":60,"props":1635,"children":1636},{},[1637],{"type":51,"value":1638},"Top Issues",{"type":51,"value":1640}," - Prioritized list of problems with estimated impact (high\u002Fmedium\u002Flow)",{"type":45,"tag":397,"props":1642,"children":1643},{},[1644,1649],{"type":45,"tag":60,"props":1645,"children":1646},{},[1647],{"type":51,"value":1648},"Recommendations",{"type":51,"value":1650}," - Specific, actionable fixes with code snippets or config changes",{"type":45,"tag":397,"props":1652,"children":1653},{},[1654,1659],{"type":45,"tag":60,"props":1655,"children":1656},{},[1657],{"type":51,"value":1658},"Codebase Findings",{"type":51,"value":1660}," - Framework\u002Fbundler detected, optimization opportunities (omit if no codebase access)",{"type":45,"tag":1662,"props":1663,"children":1664},"style",{},[1665],{"type":51,"value":1666},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":1668,"total":1845},[1669,1684,1698,1713,1726,1740,1754,1768,1785,1802,1815,1830],{"slug":1670,"name":1670,"fn":1671,"description":1672,"org":1673,"tags":1674,"stars":1681,"repoUrl":1682,"updatedAt":1683},"code-review","review code changes for quality and risk","Review code changes for correctness, clarity, and risk. Use when the user asks for a review, a second opinion on a diff, or feedback on code they wrote.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1675,1676,1678],{"name":9,"slug":8,"type":15},{"name":1677,"slug":1670,"type":15},"Code Review",{"name":1679,"slug":1680,"type":15},"Engineering","engineering",5284,"https:\u002F\u002Fgithub.com\u002Fcloudflare\u002Fagents","2026-06-08T08:19:41.621858",{"slug":1685,"name":1685,"fn":1686,"description":1687,"org":1688,"tags":1689,"stars":1681,"repoUrl":1682,"updatedAt":1697},"debug-plan","create systematic debugging plans","Create a systematic debugging plan for a bug report. Use when the user asks how to investigate a failure, regression, or unexpected behavior.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1690,1693,1696],{"name":1691,"slug":1692,"type":15},"Code Analysis","code-analysis",{"name":1694,"slug":1695,"type":15},"Debugging","debugging",{"name":1679,"slug":1680,"type":15},"2026-05-30T06:16:58.837407",{"slug":1699,"name":1699,"fn":1700,"description":1701,"org":1702,"tags":1703,"stars":1681,"repoUrl":1682,"updatedAt":1712},"escalation","escalate customer issues to human agents","Decide when and how to escalate a customer conversation to a human agent. Use when a request is high-risk, the customer is frustrated, or the issue is outside what you can resolve.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1704,1707,1710],{"name":1705,"slug":1706,"type":15},"Communications","communications",{"name":1708,"slug":1709,"type":15},"Customer Support","customer-support",{"name":1711,"slug":1699,"type":15},"Escalation","2026-06-08T08:19:43.130686",{"slug":1714,"name":1714,"fn":1715,"description":1716,"org":1717,"tags":1718,"stars":1681,"repoUrl":1682,"updatedAt":1725},"pirate-voice","rewrite text in pirate voice","Rewrite or answer in a playful pirate voice. Use when the user asks for pirate tone, nautical phrasing, or says to talk like a pirate.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1719,1722],{"name":1720,"slug":1721,"type":15},"Creative","creative",{"name":1723,"slug":1724,"type":15},"Writing","writing","2026-05-30T06:17:00.080367",{"slug":1727,"name":1727,"fn":1728,"description":1729,"org":1730,"tags":1731,"stars":1681,"repoUrl":1682,"updatedAt":1739},"release-notes","draft product release notes","Draft short release notes from a list of changes. Use when the user asks for changelogs, release notes, or a concise product update.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1732,1735,1738],{"name":1733,"slug":1734,"type":15},"Content Creation","content-creation",{"name":1736,"slug":1737,"type":15},"Documentation","documentation",{"name":1723,"slug":1724,"type":15},"2026-05-30T06:17:01.278643",{"slug":1741,"name":1741,"fn":1742,"description":1743,"org":1744,"tags":1745,"stars":1681,"repoUrl":1682,"updatedAt":1753},"test-plan","produce focused test plans","Produce a focused test plan for a change. Use when the user asks how to test a feature, what cases to cover, or for a QA checklist before shipping.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1746,1747,1750],{"name":1679,"slug":1680,"type":15},{"name":1748,"slug":1749,"type":15},"QA","qa",{"name":1751,"slug":1752,"type":15},"Testing","testing","2026-05-30T06:17:02.479863",{"slug":1755,"name":1755,"fn":1756,"description":1757,"org":1758,"tags":1759,"stars":1681,"repoUrl":1682,"updatedAt":1767},"workspace-digest","summarize files in the shared workspace","Summarize the files saved in this assistant's shared workspace. Use when the user asks what is in their workspace, for a file inventory, or a digest of saved work.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1760,1761,1764],{"name":1736,"slug":1737,"type":15},{"name":1762,"slug":1763,"type":15},"Knowledge Management","knowledge-management",{"name":1765,"slug":1766,"type":15},"Summarization","summarization","2026-06-07T07:51:27.265303",{"slug":1769,"name":1769,"fn":1770,"description":1771,"org":1772,"tags":1773,"stars":1782,"repoUrl":1783,"updatedAt":1784},"cloudflare-bundler-apps","author Cloudflare Worker Bundler applications","Author Cloudflare Worker Bundler-compatible apps that build and preview correctly inside a space. Use this skill whenever you scaffold, modify, or deploy a project that will be built with `@cloudflare\u002Fworker-bundler` (i.e. anything served from `\u002Fspace\u002F:name\u002Fpreview\u002F:branch\u002F`). Covers wrangler config, project layout, static asset rules, server entry conventions, npm dependency limits, and the most common cause of blank previews (JSX in browser scripts).",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1774,1775,1778,1781],{"name":9,"slug":8,"type":15},{"name":1776,"slug":1777,"type":15},"Cloudflare Workers","cloudflare-workers",{"name":1779,"slug":1780,"type":15},"Deployment","deployment",{"name":23,"slug":24,"type":15},5145,"https:\u002F\u002Fgithub.com\u002Fcloudflare\u002Fvibesdk","2026-06-16T09:45:57.551207",{"slug":1786,"name":1786,"fn":1787,"description":1788,"org":1789,"tags":1790,"stars":1782,"repoUrl":1783,"updatedAt":1801},"frontend-design","create production-grade frontend interfaces","Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML\u002FCSS layouts, or when styling\u002Fbeautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1791,1794,1797,1800],{"name":1792,"slug":1793,"type":15},"Design","design",{"name":1795,"slug":1796,"type":15},"Frontend","frontend",{"name":1798,"slug":1799,"type":15},"HTML","html",{"name":23,"slug":24,"type":15},"2026-06-16T09:46:01.852741",{"slug":1803,"name":1803,"fn":1804,"description":1805,"org":1806,"tags":1807,"stars":1782,"repoUrl":1783,"updatedAt":1814},"frontend-design-landing-page","build marketing landing pages","Marketing landing page and conversion-focused product page reference. Use this skill when building hero sections, feature grids, pricing pages, testimonials, CTAs, footers, navigation bars, or any public-facing marketing surface. Covers a warm, professional, developer-friendly design language (cream backgrounds, generous whitespace, pill CTAs, corner-bracket card decorations) and a complete token set, animation system, and copy-paste component snippets. NOT for product\u002Fdashboard UIs — use frontend-design-saas for those.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1808,1809,1810,1813],{"name":1795,"slug":1796,"type":15},{"name":1798,"slug":1799,"type":15},{"name":1811,"slug":1812,"type":15},"Marketing","marketing",{"name":23,"slug":24,"type":15},"2026-06-16T09:46:00.515859",{"slug":1816,"name":1816,"fn":1817,"description":1818,"org":1819,"tags":1820,"stars":1782,"repoUrl":1783,"updatedAt":1829},"frontend-design-saas","build SaaS dashboard and product UIs","S-tier SaaS dashboard and product UI reference. Use this skill when building application shells, data tables, settings panels, billing pages, dashboards, auth flows, admin tools, or any internal\u002Fcustomer-facing SaaS product UI. Inspired by Stripe, Linear, Vercel, Airbnb, Notion. Covers neutral-led design tokens, sidebar+content shells, dense data UIs, form-heavy configuration pages, command palettes, empty states, and the accessibility (WCAG AA+) bar these products clear.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1821,1822,1823,1826],{"name":1792,"slug":1793,"type":15},{"name":1795,"slug":1796,"type":15},{"name":1824,"slug":1825,"type":15},"SaaS","saas",{"name":1827,"slug":1828,"type":15},"UI Components","ui-components","2026-06-16T09:45:58.956063",{"slug":1831,"name":1831,"fn":1832,"description":1833,"org":1834,"tags":1835,"stars":25,"repoUrl":26,"updatedAt":1844},"agents-sdk","build AI agents on Cloudflare Workers","Build AI agents on Cloudflare Workers using the Agents SDK. Load when creating stateful agents, durable workflows, real-time WebSocket apps, scheduled tasks, MCP servers, chat applications, voice agents, or browser automation. Covers Agent class, state management, callable RPC, Workflows, durable execution, queues, retries, observability, and React hooks. Biases towards retrieval from Cloudflare docs over pre-trained knowledge.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1836,1838,1839,1840,1841],{"name":1837,"slug":31,"type":15},"Agents",{"name":9,"slug":8,"type":15},{"name":1776,"slug":1777,"type":15},{"name":20,"slug":21,"type":15},{"name":1842,"slug":1843,"type":15},"WebSockets","websockets","2026-04-06T18:07:36.660888",22,{"items":1847,"total":1957},[1848,1856,1870,1883,1909,1928,1941],{"slug":1831,"name":1831,"fn":1832,"description":1833,"org":1849,"tags":1850,"stars":25,"repoUrl":26,"updatedAt":1844},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1851,1852,1853,1854,1855],{"name":1837,"slug":31,"type":15},{"name":9,"slug":8,"type":15},{"name":1776,"slug":1777,"type":15},{"name":20,"slug":21,"type":15},{"name":1842,"slug":1843,"type":15},{"slug":8,"name":8,"fn":1857,"description":1858,"org":1859,"tags":1860,"stars":25,"repoUrl":26,"updatedAt":1869},"build on the full Cloudflare platform","Comprehensive Cloudflare platform skill covering Workers, Pages, storage (KV, D1, R2), AI (Workers AI, Vectorize, Agents SDK), feature flags (Flagship), networking (Tunnel, Spectrum), security (WAF, DDoS), and infrastructure-as-code (Terraform, Pulumi). Use for any Cloudflare development task. Biases towards retrieval from Cloudflare docs over pre-trained knowledge.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1861,1862,1863,1866],{"name":9,"slug":8,"type":15},{"name":1776,"slug":1777,"type":15},{"name":1864,"slug":1865,"type":15},"Serverless","serverless",{"name":1867,"slug":1868,"type":15},"Storage","storage","2026-04-06T18:07:35.399081",{"slug":1871,"name":1871,"fn":1872,"description":1873,"org":1874,"tags":1875,"stars":25,"repoUrl":26,"updatedAt":1882},"cloudflare-email-service","manage transactional emails with Cloudflare","Send and receive transactional emails with Cloudflare Email Service (Email Sending + Email Routing). Use when building email sending (Workers binding or REST API), email routing, Agents SDK email handling, or integrating email into any app — Workers, Node.js, Python, Go, etc. Also use for email deliverability, SPF\u002FDKIM\u002FDMARC, wrangler email setup, MCP email tools, or when a coding agent needs to send emails. Even for simple requests like \"add email to my Worker\" — this skill has critical config details.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1876,1877,1878,1881],{"name":9,"slug":8,"type":15},{"name":1776,"slug":1777,"type":15},{"name":1879,"slug":1880,"type":15},"Email","email",{"name":1864,"slug":1865,"type":15},"2026-04-16T05:02:38.301955",{"slug":1884,"name":1884,"fn":1885,"description":1886,"org":1887,"tags":1888,"stars":25,"repoUrl":26,"updatedAt":1908},"cloudflare-one","configure and manage Cloudflare One Zero Trust","Guides Cloudflare One Zero Trust and SASE work across Access, Gateway, WARP, Tunnel, Cloudflare WAN, DLP, CASB, device posture, and identity. Use when designing, configuring, troubleshooting, or reviewing Cloudflare One deployments. Retrieval-first: use current Cloudflare docs\u002FAPI schemas instead of embedded product docs.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1889,1892,1893,1896,1899,1902,1905],{"name":1890,"slug":1891,"type":15},"Access Control","access-control",{"name":9,"slug":8,"type":15},{"name":1894,"slug":1895,"type":15},"Infrastructure","infrastructure",{"name":1897,"slug":1898,"type":15},"Networking","networking",{"name":1900,"slug":1901,"type":15},"SASE","sase",{"name":1903,"slug":1904,"type":15},"Security","security",{"name":1906,"slug":1907,"type":15},"Zero Trust","zero-trust","2026-06-15T09:51:34.015251",{"slug":1910,"name":1910,"fn":1911,"description":1912,"org":1913,"tags":1914,"stars":25,"repoUrl":26,"updatedAt":1927},"cloudflare-one-migrations","plan migrations to Cloudflare One","Plans migrations from Zscaler ZIA\u002FZPA, Palo Alto, legacy VPN, SWG, or SASE stacks to Cloudflare One. Use for migration assessments, policy mapping, rollout plans, and parity\u002Fgap analysis.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1915,1916,1919,1920,1923,1924],{"name":9,"slug":8,"type":15},{"name":1917,"slug":1918,"type":15},"Migration","migration",{"name":1897,"slug":1898,"type":15},{"name":1921,"slug":1922,"type":15},"Risk Assessment","risk-assessment",{"name":1903,"slug":1904,"type":15},{"name":1925,"slug":1926,"type":15},"Strategy","strategy","2026-06-15T09:51:35.348691",{"slug":1929,"name":1929,"fn":1930,"description":1931,"org":1932,"tags":1933,"stars":25,"repoUrl":26,"updatedAt":1940},"durable-objects","build Cloudflare Durable Objects","Create and review Cloudflare Durable Objects. Use when building stateful coordination (chat rooms, multiplayer games, booking systems), implementing RPC methods, SQLite storage, alarms, WebSockets, or reviewing DO code for best practices. Covers Workers integration, wrangler config, and testing with Vitest. Biases towards retrieval from Cloudflare docs over pre-trained knowledge.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1934,1935,1936,1939],{"name":9,"slug":8,"type":15},{"name":1776,"slug":1777,"type":15},{"name":1937,"slug":1938,"type":15},"State Management","state-management",{"name":1842,"slug":1843,"type":15},"2026-04-06T18:07:39.148434",{"slug":1942,"name":1942,"fn":1943,"description":1944,"org":1945,"tags":1946,"stars":25,"repoUrl":26,"updatedAt":1956},"sandbox-sdk","build sandboxed code execution apps on Cloudflare","Build sandboxed applications for secure code execution. Load when building AI code execution, code interpreters, CI\u002FCD systems, interactive dev environments, or executing untrusted code. Covers Sandbox SDK lifecycle, commands, files, code interpreter, and preview URLs. Biases towards retrieval from Cloudflare docs over pre-trained knowledge.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1947,1948,1949,1952,1955],{"name":9,"slug":8,"type":15},{"name":1776,"slug":1777,"type":15},{"name":1950,"slug":1951,"type":15},"Code Execution","code-execution",{"name":1953,"slug":1954,"type":15},"Sandboxing","sandboxing",{"name":1864,"slug":1865,"type":15},"2026-04-06T18:07:37.89439",11]