perf

Identify Core Web Vitals, bundle size, and Lighthouse performance bottlenecks.

2|Updated Jan 12, 2026
One-click install
npx skills add https://github.com/djnsty23/claude-auto-dev --skill perf-djnsty23
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: perf
Source: https://github.com/djnsty23/claude-auto-dev/tree/main/skills/perf
Command: npx skills add https://github.com/djnsty23/claude-auto-dev --skill perf-djnsty23

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web performance issues slow user interactions and conversions; this skill helps identify and quantify bottlenecks across Core Web Vitals, bundle size, and Lighthouse patterns.

Core Features & Use Cases

  • Detect and quantify LCP, FID, CLS across routes and builds.
  • Analyze bundle size and provide optimization recommendations (code-splitting, lazy loading, asset optimizations).
  • Use Case: Optimize a frontend app by reducing first input delay and improving largest contentful paint on critical pages.

Quick Start

Run an initial performance audit on the current project to generate a baseline report.

Frequently Asked Questions about perf

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I identify Core Web Vitals bottlenecks affecting my website's LCP and CLS?

You can identify Core Web Vitals bottlenecks by running a frontend performance audit that analyzes LCP, CLS, and FID across critical routes and builds. The audit returns a structured report quantifying specific rendering delays and layout shifts.

What is the best way to reduce JavaScript bundle size in a frontend application?

The best way to reduce JavaScript bundle size is through an audit that analyzes build outputs against set thresholds. It provides optimization recommendations like code-splitting, lazy loading, and asset optimizations to minimize the final payload.

Can I use this performance audit for server-rendered pages or does it only work on client-side apps?

This performance audit works on both typical frontend applications and server-rendered pages. It evaluates critical routes, user interactions, and build outputs across these environments to detect performance issues accurately.

How do I generate a baseline performance report for my current web project?

To generate a baseline performance report, you run an initial audit on your current web project. This evaluates Lighthouse patterns and Core Web Vitals to establish a starting point for subsequent optimization tracking.

Why does my web project have a high First Input Delay and how can I diagnose it?

A high First Input Delay often stems from heavy JavaScript execution blocking user interactions. Diagnose it by running a performance audit that quantifies FID across critical routes and identifies specific script execution bottlenecks.

What specific metrics and thresholds are included in a structured performance report?

A structured performance report specifies required outputs including LCP, CLS, and FID targets alongside bundle-size thresholds. It also provides recommended optimizations to meet these baseline performance goals.