optimize

Diagnose and fix UI performance issues across loading, rendering, and bundle size.

1|Updated Mar 22, 2026

Search Tags:#performance #frontend #optimization #rendering #metrics #best-practices #web

Ready to run

npx skills add https://github.com/samcannas/samscode --skill optimize-samcannas

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/samcannas/samscode/tree/main/skills/catalog/optimize
Command: npx skills add https://github.com/samcannas/samscode --skill optimize-samcannas

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, or wants a faster, smoother experience.

Core Features & Use Cases

Diagnose and quantify performance bottlenecks using core web vitals (LCP, FID/INP, CLS), TTI, and bundle size.
Propose and guide implementation of targeted optimizations (image optimization, code-splitting, CSS/font optimizations, rendering improvements, and animation performance).
Use Case: A frontend project that must deliver a noticeably faster and smoother user experience on common devices and network conditions.

Quick Start

Describe a one-line plan to profile and begin fixing the top performance bottleneck in the current app.

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 initial loading speed in a web frontend project?▼

To fix slow initial loading speed, profile bottlenecks using Core Web Vitals like LCP and TTI, then apply targeted optimizations such as image compression, code-splitting, and CSS or font delivery improvements to achieve a faster load.

What causes janky interactions and rendering issues in desktop and web applications?▼

Janky interactions and rendering issues are caused by main thread blocking and inefficient paint cycles. Diagnose them using INP or FID metrics, then resolve the problem by improving render paths and optimizing animation performance.

Can I reduce an oversized JavaScript bundle size without breaking existing features?▼

You can reduce an oversized JavaScript bundle by applying code-splitting to defer non-critical scripts and optimizing asset delivery. This process maintains existing features while significantly lowering the initial payload for users.

What is the best way to measure UI performance improvements using core web vitals?▼

The best way to measure UI performance improvements is to track Core Web Vitals like LCP for loading, INP for interactions, and CLS for layout stability. Specify measurable goals against these metrics before and after applying optimizations.

Does this frontend optimization process apply to both web and desktop applications?▼

Yes, this frontend optimization process applies to both web and desktop frontend projects. It handles scenarios from slow initial load to janky interactions by providing step-by-step guidance and acceptance criteria for a smoother experience.