Does it work with modern frameworks like Next.js?

Absolutely. It detects frameworks like Next.js, Vite, and Webpack to provide tailored optimization advice based on your specific build tool.

Can it audit private or local websites?

Yes, as long as the Chrome instance managed by the MCP server can access the URL, it can audit localhost or internal development environments.

Does this skill require external tools?

Yes, it requires the chrome-devtools-mcp server to be configured in your Claude MCP settings to function.

What specific metrics does it track?

It tracks all Core Web Vitals including Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Total Blocking Time (TBT), along with Speed Index and Network Latency.

Web Performance & Core Web Vitals Audit

Name: Web Performance & Core Web Vitals Audit
Author: lev-os

bylev-os

0•

Analytics & Monitoring

Analyzes and optimizes website performance and Core Web Vitals using integrated Chrome DevTools diagnostics.

The Web Performance skill empowers Claude to perform deep technical audits of any web page using the Chrome DevTools MCP. It measures critical Core Web Vitals like LCP, CLS, and TBT, identifies render-blocking resources, and maps network dependency chains to pinpoint latency. Beyond just metrics, it provides actionable code-level recommendations for framework-specific optimizations, caching strategies, and high-level accessibility improvements to ensure a fast, user-friendly experience for all visitors.

Key Features

01Performance tracing with reload to capture cold-load metrics and Speed Index.

02Comprehensive Core Web Vitals (LCP, FID, CLS) measurement and breakdown.

03Deep network analysis to identify render-blocking resources and dependency chains.

04Framework-specific codebase analysis for Webpack, Vite, Next.js, and more.

05High-level accessibility (A11y) tree snapshots and contrast ratio checks.

060 GitHub stars

Use Cases

01Optimizing page load speed to improve SEO rankings and Lighthouse scores.

02Auditing build configurations to reduce bundle sizes and eliminate dead code.

03Debugging layout shifts (CLS) and identifying the specific DOM elements responsible.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add lev-os/agents web-perf

For use in Claude.ai and ChatGPT

Download Skill