Skip to main content
An evidence-first skill for diagnosing and improving frontend performance with Web Vitals. It helps AI prioritize the right bottleneck, choose targeted fixes, and verify whether a change actually improved user experience. Use it when you need to optimize or review:
  • slow page loads
  • poor LCP, FCP, INP, CLS, TTFB, or TBT
  • layout shifts and unstable rendering
  • slow interactions caused by main-thread work
  • image, font, or code-splitting regressions

Why This Skill?

Most frontend performance work fails because teams optimize without enough evidence or fix symptoms before upstream bottlenecks. This skill gives AI a repeatable workflow:
  1. Collect the minimum useful evidence
  2. Identify the primary bottleneck
  3. Pick the matching optimization branch
  4. Re-measure when possible before claiming success
It supports both tool-rich and tool-light environments:
  • MCP-assisted mode when Lighthouse or browser performance tooling is available
  • Manual-evidence mode when you only have reports, traces, screenshots, or metric snapshots
By default, the workflow assumes Lighthouse and Performance evidence is collected manually. If you do not have manual measurements yet, the skill should only provide inferred suggestions and recommend follow-up verification after the change.

Install

Or install all available skills:
Options:

Verify Installation

Check if the skill is available:
Claude should list frontend-fullchain-optimization in the response.

Usage

After installation, ask AI to analyze the current performance evidence:

What It Covers

What’s Included