optimize

Diagnose and fix UI performance bottlenecks across loading, rendering, animations, images, and bundle size.

Updated Nov 4, 2025
One-click install
npx skills add https://github.com/jatwell93/pharmacy-heatmap --skill optimize-jatwell93
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/jatwell93/pharmacy-heatmap/tree/main/.agents/skills/optimize
Command: npx skills add https://github.com/jatwell93/pharmacy-heatmap --skill optimize-jatwell93

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Performance issues in modern web UIs cause slow loads, jank, and poor user satisfaction. Many apps suffer from unoptimized bundles, large images, and inefficient render paths that hurt Core Web Vitals.

Core Features & Use Cases

  • Assess and diagnose UI performance bottlenecks across loading, rendering, animations, images, and bundle size.
  • Propose and implement targeted fixes including code-splitting, lazy loading, image optimization, and CSS/JS optimizations.
  • Use cases: improving LCP/FID/CLS scores in dashboards or consumer apps, reducing TTI and TBT, speeding up initial load times in SPAs.

Quick Start

Start by measuring Core Web Vitals and bottlenecks, then apply a prioritized set of fixes to speed up loading and render times.

Frequently Asked Questions about optimize

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

FAQPage Schema
How do I diagnose and fix slow web application loading and rendering bottlenecks?

Improve Core Web Vitals by diagnosing UI performance bottlenecks across loading speed, rendering, and bundle size, then implementing fixes like lazy loading, image optimization, and code-splitting to reduce LCP, FID, and CLS scores in web applications.

What causes jank and heavy JavaScript bundles in single-page applications?

Jank and heavy JavaScript bundles in single-page applications stem from unoptimized render paths, large images, and inefficient animations, all of which degrade Core Web Vitals and increase Time to Interactive.

How do I measure Core Web Vitals like LCP, FID, and CLS for a web dashboard?

Measure Core Web Vitals for web dashboards by assessing loading speed, rendering performance, and visual stability to identify bottlenecks, enabling targeted optimizations that reduce Total Blocking Time and improve user satisfaction.

What is the best way to reduce JavaScript bundle size through code-splitting?

Reduce JavaScript bundle size by implementing code-splitting and lazy loading to defer non-essential code, enabling faster initial load times and improved rendering performance in web applications.

Can I use this approach to optimize performance for both consumer apps and dashboards?

Yes, this approach optimizes performance for both consumer apps and dashboards by assessing UI bottlenecks across loading, rendering, animations, and images, then applying scalable tooling and best practices to improve Core Web Vitals.

Why does my web UI still experience slow loads after optimizing images?

Slow loads after image optimization often stem from remaining UI performance bottlenecks like inefficient render paths, unoptimized CSS/JS, or heavy JavaScript bundles lacking code-splitting, requiring a comprehensive Core Web Vitals assessment.