optimize

Identify and fix frontend performance issues in web applications.

14|1|Updated May 6, 2026
One-click install
npx skills add https://github.com/wzyxdwll/ccgx-workflow --skill optimize-wzyxdwll
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/wzyxdwll/ccgx-workflow/tree/main/templates/skills/impeccable/optimize
Command: npx skills add https://github.com/wzyxdwll/ccgx-workflow --skill optimize-wzyxdwll

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Identify and fix frontend performance issues to improve user experience and reduce perceived load times.

Core Features & Use Cases

  • Assess Core Web Vitals (LCP, FID/INP, CLS), load times, bundle size, and runtime performance.
  • Identify bottlenecks in loading, rendering, and animations, and propose concrete optimizations.
  • Real-world use case: optimize a slow enterprise dashboard by compressing images, applying code splitting, and trimming unused CSS.

Quick Start

Analyze the provided frontend page and generate a prioritized optimization plan to reduce load times and improve interactivity.

Frequently Asked Questions about optimize

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

FAQPage Schema
How do I diagnose frontend performance bottlenecks in a web application?

Diagnose frontend performance bottlenecks by assessing Core Web Vitals like LCP, FID/INP, and CLS, alongside load times and bundle size. The process identifies specific rendering or loading issues and proposes concrete, code-agnostic optimization steps.

What is the best way to improve Core Web Vitals for a slow enterprise dashboard?

Improve Core Web Vitals for a slow dashboard by analyzing its load and runtime performance to find bottlenecks. The optimization plan applies concrete steps like compressing images, implementing code splitting, and trimming unused CSS to reduce perceived load times.

How do I fix web animation and rendering performance issues across modern frontend frameworks?

Fix web animation and rendering performance issues by measuring runtime metrics across modern frontend frameworks to locate bottlenecks. This generates a prioritized optimization plan targeting slow animations and render-blocking resources to improve UI interactivity.

Does this frontend optimization approach work for both load time and runtime bundle size analysis?

Yes, this frontend optimization approach works for both load time and bundle size analysis. It assesses initial loading metrics alongside runtime performance, identifying bottlenecks in both areas to propose concrete optimizations that reduce perceived load times and improve interactivity.

Why does my web application have a high CLS and how do I optimize it?

A high CLS indicates layout shifts during loading, which you optimize by measuring Core Web Vitals to pinpoint rendering bottlenecks. The resulting optimization plan proposes concrete, code-agnostic steps to stabilize layout shifts and improve overall user experience.

What do I need to provide to generate a web performance optimization plan?

Provide access to your frontend page or application metrics to generate a web performance optimization plan. Analyzing the provided frontend page allows assessment of Core Web Vitals, bundle size, and runtime performance to output a prioritized list of concrete optimization steps.