How does this skill measure web performance?

It uses the Lighthouse CLI for standardized static audits and Playwright automation to collect interaction-based metrics like INP from live browser sessions.

Can it help with Core Web Vitals compliance?

Yes, it specifically targets LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift), and INP (Interaction to Next Paint) to ensure your site meets Google's thresholds.

Will it automatically modify my source code?

The skill generates detailed implementation plans and code patches. You can then review and approve these suggestions before they are applied to your codebase.

Does it support local development environments?

Yes, it can audit localhost URLs, though it recommends labeling these as 'Local Dev' as they may not reflect production CDN or caching performance.

Web Performance & UX Optimizer

Name: Web Performance & UX Optimizer
Author: october-academy

byoctober-academy

0•

Analytics & Monitoring

Analyzes and optimizes web application performance and user experience using Lighthouse and Core Web Vitals diagnostics.

This skill provides an end-to-end workflow for diagnosing and fixing web performance bottlenecks and UX friction points. It leverages Lighthouse CLI for comprehensive audits and Playwright for real-time interaction metrics, enabling developers to identify root causes for Core Web Vitals issues like LCP, CLS, and INP. Beyond just reporting, it generates framework-specific improvement plans for Next.js and React, providing concrete code-level fixes to boost page speed, SEO rankings, and user retention.

Key Features

01Root cause analysis for LCP, CLS, and INP with technical explanations

02Actionable performance reports with prioritized task lists and code patches

03Framework-specific optimization guidance for Next.js and React apps

04Real-time Core Web Vitals monitoring via Playwright interaction scripts

05Automated Lighthouse performance audits for mobile and desktop environments

060 GitHub stars

Use Cases

01Identifying and fixing layout shifts and slow interactivity in complex single-page applications

02Diagnosing why a production page has a low Lighthouse score or fails Core Web Vitals

03Automating performance regression testing during local development or staging

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add october-academy/agent-plugins web-perf-ux

For use in Claude.ai and ChatGPT

Key Features

01Root cause analysis for LCP, CLS, and INP with technical explanations

02Actionable performance reports with prioritized task lists and code patches

03Framework-specific optimization guidance for Next.js and React apps

04Real-time Core Web Vitals monitoring via Playwright interaction scripts

05Automated Lighthouse performance audits for mobile and desktop environments

060 GitHub stars

Use Cases

01Identifying and fixing layout shifts and slow interactivity in complex single-page applications

02Diagnosing why a production page has a low Lighthouse score or fails Core Web Vitals

03Automating performance regression testing during local development or staging

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add october-academy/agent-plugins web-perf-ux

For use in Claude.ai and ChatGPT