flame-audit

Audits web page performance by ranking hot paths from Chrome traces and network waterfalls.

Updated Sep 11, 2026
One-click install
npx skills add https://github.com/celeroncoder/skills --skill flame-audit-celeroncoder
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: flame-audit
Source: https://github.com/celeroncoder/skills/tree/main/flame-audit
Command: npx skills add https://github.com/celeroncoder/skills --skill flame-audit-celeroncoder

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires chrome-devtools-mcp, lighthouse, and includes references (resource) components.

What problem does it solve? Web performance audits often produce long, unprioritized tip lists. This Skill treats page load and runtime like a CPU flame graph—width equals cost—so you fix the fattest hot paths first instead of chasing micro-optimizations. ## Core Features & Use Cases - Flame-style hot path ranking: Captures Chrome Performance traces and network requests, then ranks the top 3-5 hot paths (main-thread JS, parse/compile, LCP phases, transfer size) with measured costs. - Prioritized fix plan with re-measurement: Maps each hot path to concrete code fixes (code-splitting, layout thrash, LCP image, third-party tags) and re-runs the same trace to report before/after deltas. - Use Case: Paste a URL and ask for a flame graph audit; the Skill captures a cold-load trace via Chrome DevTools MCP, identifies that one component render consumes 40% of main-thread time, and delivers a P0/P1 fix plan with estimated millisecond savings. ## Quick Start Ask the agent to run a flame audit on your page URL to find the dominant performance hot path and get a prioritized fix plan.

Frequently Asked Questions about flame-audit

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I find performance hot paths on a web page?▼

Capture a Chrome Performance trace of a cold load or interaction, then rank the widest stack frames by cost—long tasks, script evaluation, layout, and LCP phases. Fix the fattest exclusive leaf frames first rather than applying generic optimizations.

How to audit website performance with Chrome DevTools MCP?▼

Use navigate_page to load the URL, then performance_start_trace with autoStop and reload to capture a cold-load trace. Follow up with list_network_requests to analyze transfer sizes and waterfall delays as a second flame graph.

Can I analyze a flame graph screenshot without live page access?▼

Yes. Provide a flame graph image, speedscope export, .cpuprofile, or trace JSON and the widest frames are identified visually or structurally, then mapped to likely code fixes. Findings are labeled as profile interpretation rather than live measurements.

What are good Core Web Vitals thresholds for LCP and INP?▼

LCP is good under 2.5s and poor above 4s; INP is good under 200ms and poor above 500ms. TBT should stay under 200ms, CLS under 0.1, and TTFB under 800ms for a good rating.

When should I not optimize based on a flame graph?▼

Skip optimization when all metrics are green with no long tasks, or when a frame is thin—deep stacks and small leaves are rarely the real cost. Avoid recommending memoization, image compression, or CDNs unless the measured hot path actually points there.