optimize

Diagnose and fix UI performance issues by measuring Core Web Vitals and optimizing images, JavaScript, CSS, and rendering.

Updated Mar 29, 2026
One-click install
npx skills add https://github.com/kihyun1998/just-make-logo-web --skill optimize-kihyun1998
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/kihyun1998/just-make-logo-web/tree/main/.claude/skills/optimize
Command: npx skills add https://github.com/kihyun1998/just-make-logo-web --skill optimize-kihyun1998

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Diagnoses and fixes UI performance issues across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience.

Core Features & Use Cases

  • Assess performance: Measure Core Web Vitals (LCP, FID/INP, CLS), load time, bundle size, runtime performance, and network metrics to identify bottlenecks.
  • Targeted optimizations: Optimize images, JS/CSS, fonts, and rendering strategies; implement code-splitting, lazy loading, and efficient state management.
  • Use Case: A web app experiencing slow initial load and jank can be analyzed, with fixes applied to reduce TTI and improve perceived performance.

Quick Start

Identify the top three performance bottlenecks in your UI and apply the recommended optimizations to improve load times and interactivity.

Frequently Asked Questions about optimize

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

FAQPage Schema
How do I diagnose slow web loading times and fix UI jank?

Diagnose slow web loading and UI jank by measuring Core Web Vitals like LCP and CLS to identify bottlenecks, then apply targeted optimizations for images, JavaScript, CSS, and rendering strategies to improve load times.

What's the best way to reduce large JavaScript bundle size in a web app?

Reduce large JavaScript bundle size by implementing code-splitting, lazy loading, and efficient state management. Analyzing the bundle identifies bottlenecks, allowing you to apply best-practice optimizations for a faster initial load.

How does measuring Core Web Vitals help improve web app performance?

Measuring Core Web Vitals helps improve web app performance by quantifying loading, interactivity, and visual stability. Tracking metrics like LCP, FID or INP, and CLS identifies specific rendering and network bottlenecks to target with optimizations.

Can I use systematic performance fixes for slow rendering on mobile devices?

Yes, you can apply systematic performance fixes for slow rendering on mobile devices. The process diagnoses UI performance issues across loading and interactions, implementing optimizations tailored for varying devices and network conditions.

Why does my web interface feel laggy during user interactions?

Your web interface feels laggy during interactions due to slow runtime performance and rendering bottlenecks. Measuring interactivity metrics like FID or INP identifies the causes, allowing targeted JavaScript and state management optimizations.

What are the limitations of optimizing UI performance without measuring metrics?

Optimizing UI performance without measuring metrics limits effectiveness because bottlenecks remain unidentified. Systematic fixes require assessing Core Web Vitals and network metrics first to ensure targeted optimizations actually reduce load times and jank.