What performance metrics are tracked by this skill?

It monitors Core Web Vitals (LCP, INP, CLS), bundle size limits, runtime execution tasks, and network metrics like Time to First Byte (TTFB).

Does it support bundle analysis for specific frameworks?

While it features built-in support for Next.js bundle analyzer, the scripts can be adapted for any JavaScript environment to monitor total, initial, and chunk sizes.

How does it handle touch target optimization?

The skill includes guidance and code snippets to ensure all interactive elements meet WCAG 2.2 requirements with a minimum 48x48px touch target area.

Can I use this in my CI/CD pipeline?

Yes, the skill includes shell scripts and JSON budget configurations designed to integrate with GitHub Actions or other CI runners to enforce performance thresholds.

How does this skill help with INP optimization?

It provides specific implementation patterns for breaking up long tasks using the Scheduler API, debouncing expensive handlers, and leveraging Web Workers to keep the main thread responsive.

Web Performance Metrics

Name: Web Performance Metrics
Author: antoineschaller

byantoineschaller

•

분석 및 모니터링

Analyzes, monitors, and optimizes web application performance including Core Web Vitals, bundle sizes, and runtime responsiveness.

This skill provides a comprehensive framework for tracking and improving frontend performance metrics within web applications. It specializes in optimizing Core Web Vitals with a specific focus on Interaction to Next Paint (INP), Largest Contentful Paint (LCP), and Cumulative Layout Shift (CLS). By automating bundle size analysis, runtime profiling, and network debugging, it helps developers establish performance budgets, prevent regressions in CI/CD pipelines, and implement advanced patterns like Islands architecture and the Scheduler API to ensure highly responsive user experiences.

주요 기능

01Automated bundle size analysis and performance budget enforcement

02Network performance debugging for TTFB and resource loading

03Advanced responsiveness techniques including Scheduler API and Web Workers

04Core Web Vitals monitoring and optimization (LCP, INP, CLS)

05Runtime performance profiling to identify expensive re-renders

061 GitHub stars

사용 사례

01Managing and reducing JavaScript bundle growth in complex Next.js applications

02Pre-deployment validation to prevent performance regressions in CI/CD pipelines

03Optimizing Interaction to Next Paint (INP) to meet modern SEO and UX standards

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add antoineschaller/cortex-skills web-performance-metrics

For use in Claude.ai and ChatGPT

Download Skill