optimize

Identify and fix frontend performance bottlenecks in web apps.

Updated Jul 14, 2025
One-click install
npx skills add https://github.com/Kael-Dean/SKT --skill optimize-kael-dean
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/Kael-Dean/SKT/tree/main/.agents/skills/optimize
Command: npx skills add https://github.com/Kael-Dean/SKT --skill optimize-kael-dean

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Improve frontend performance by identifying and fixing bottlenecks across loading, rendering, and animations to deliver faster, smoother user experiences.

Core Features & Use Cases

  • Measure and optimize Core Web Vitals (LCP, FID/INP, CLS) for web apps.
  • Apply loading optimizations (code splitting, lazy loading, critical CSS, image optimization) to reduce TTI and FCP.
  • Improve rendering and animation performance (batching, contain, GPU-accelerated transforms) for smoother interactions.
  • Use Case: Optimize a dashboard that renders multiple charts to achieve sub-second interactivity and reduced bundle size.

Quick Start

Run a quick performance audit on your web app and apply recommended loading, rendering, and asset optimizations to the next release.

Frequently Asked Questions about optimize

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

FAQPage Schema
How do I fix frontend performance bottlenecks for data-intensive web apps?

Fix frontend performance bottlenecks by identifying issues across loading, rendering, and animations. Apply code splitting, lazy loading, and GPU-accelerated transforms to deliver faster, smoother user experiences for data-intensive dashboards and ecommerce sites.

How do I improve Core Web Vitals like LCP and CLS for my web application?

Improve Core Web Vitals by measuring LCP, INP, and CLS, then applying loading optimizations. Implement critical CSS, image optimization, and code splitting to reduce Time to Interactive and First Contentful Paint for faster loading speed.

What is the best way to optimize loading speed for a dashboard rendering multiple charts?

Optimize dashboard loading speed by applying code splitting and lazy loading to reduce bundle size. Implement rendering performance techniques like batching and contain to achieve sub-second interactivity for multiple chart rendering.

How do I improve rendering and animation performance for smoother web interactions?

Improve rendering and animation performance by applying DOM batching, CSS contain, and GPU-accelerated transforms. These techniques minimize layout shifts and ensure smooth rendering during complex user interactions.

Can I use code splitting and critical CSS to reduce Time to Interactive on ecommerce sites?

Yes, apply code splitting and critical CSS to reduce Time to Interactive on ecommerce sites. Combine these with lazy loading and image optimization to significantly decrease initial bundle size and improve frontend performance.

Why does my web app have slow loading speed despite using lazy loading?

Slow loading speed despite lazy loading often stems from unoptimized images, render-blocking resources, or poor Core Web Vitals. Audit critical CSS, implement code splitting, and validate network optimizations to resolve remaining frontend bottlenecks.