optimize

Diagnose web app performance issues and generate structured optimization plans.

Updated Mar 13, 2026

Search Tags:#performance #frontend #optimization #web #bundle-size #core-web-vitals #lcp

Ready to run

npx skills add https://github.com/hossain-khan/hk-vision-slideshow --skill optimize-hossain-khan

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/hossain-khan/hk-vision-slideshow/tree/main/.agents/skills/optimize
Command: npx skills add https://github.com/hossain-khan/hk-vision-slideshow --skill optimize-hossain-khan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Performance issues hamper user experience; this skill helps identify and fix problems to deliver faster, smoother interfaces.

Core Features & Use Cases

Assess performance metrics across loading, rendering, and animations, including Core Web Vitals (LCP, FID/INP, CLS), Time to Interactive, and bundle size.
Provide a structured optimization strategy covering loading performance, rendering performance, animation smoothness, and network considerations.
Use cases include optimizing web apps and SPAs, improving perceived performance on desktop and mobile, and preparing production-grade performance budgets.

Quick Start

Run a baseline performance audit and apply a structured optimization plan to improve loading speed, rendering, and animations.

Frequently Asked Questions about optimize

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

FAQPage Schema

How do I identify and fix web interface performance issues in my SPA?▼

Core Web Vitals optimization targets LCP, FID/INP, and CLS to improve web interface loading and rendering. Measuring these metrics alongside Time to Interactive helps diagnose loading times and rendering bottlenecks, enabling a structured plan to deliver smoother user experiences.

What's the best way to reduce bundle size and improve loading performance?▼

Reducing bundle size requires measuring it alongside Core Web Vitals to establish a performance budget. A structured optimization strategy then targets loading performance, rendering bottlenecks, and network considerations to improve perceived performance on both desktop and mobile devices.

How do I measure and improve animation smoothness and frame rates across devices?▼

Animation smoothness and frame rates are measured to diagnose rendering bottlenecks across different devices and network conditions. Applying a structured optimization plan addresses animation performance and rendering strategies to ensure smoother user experiences.

Can I use this approach to prepare production-grade performance budgets for web apps?▼

Yes, you can prepare production-grade performance budgets by assessing bundle size, Core Web Vitals, and Time to Interactive. This assessment provides a structured optimization strategy covering loading, rendering, animation, and network considerations for your web apps.

Why does my web app have slow rendering bottlenecks and poor perceived performance on mobile?▼

Slow rendering bottlenecks and poor perceived performance on mobile stem from unoptimized loading times and animation frame rates. Diagnosing Core Web Vitals and applying a structured network and rendering strategy resolves these interface performance issues.