Does it require any specific configuration?

You must have the 'chrome-devtools-mcp' server configured in your MCP settings for the browser automation features to function.

What tools does the web-perf skill use?

The skill uses the Chrome DevTools MCP server to programmatically interact with a browser, allowing Claude to run performance traces, inspect the DOM, and analyze network traffic.

Can it audit accessibility as well as speed?

Yes, it includes an accessibility snapshot phase that flags high-level gaps such as poor contrast ratios, missing ARIA labels, and focus management issues.

Can this skill fix my Core Web Vitals?

Yes, it identifies specific issues affecting metrics like Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) and provides actionable code changes to resolve them.

Does it work with modern frameworks like Next.js?

Absolutely. It can detect your project's bundler and framework to suggest specific optimizations for tools like Vite, Webpack, and Next.js.

Web Performance Audit

Name: Web Performance Audit
Author: sundial-org

bysundial-org

•

461

•

Analytics & Monitoring

Analyzes and optimizes web performance, Core Web Vitals, and accessibility using Chrome DevTools MCP.

The Web Performance Audit skill enables Claude to perform deep technical evaluations of website speed and user experience. By leveraging Chrome DevTools MCP, it captures performance traces, analyzes Core Web Vitals like LCP and CLS, identifies render-blocking resources, and detects accessibility gaps. This skill is essential for developers who need to improve Lighthouse scores, debug layout shifts, or optimize asset loading strategies with data-driven, actionable recommendations based on real-time browser telemetry.

Key Features

01Layout shift (CLS) tracking to pinpoint specific shifting DOM elements

02Identification of render-blocking resources and network dependency chains

03High-level accessibility snapshots to detect contrast and ARIA gaps

04461 GitHub stars

05Comprehensive Core Web Vitals analysis (LCP, CLS, TBT, FCP)

06Framework-aware optimization for Vite, Webpack, Next.js, and more

Use Cases

01Automating performance regression testing during the development workflow

02Diagnosing and fixing poor Google Search Console Core Web Vitals scores

03Auditing third-party websites for performance bottlenecks and asset bloat

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add sundial-org/awesome-openclaw-skills web-perf

For use in Claude.ai and ChatGPT

Download Skill