skills.rest
samcannas
samcannasCOMMUNITY
Explore all skills by this author →
Website𝕏@sam_cannasGitHub

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
One-click install
npx skills add https://github.com/samcannas/samscode --skill optimize-samcannas
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
ripgraphicsripgraphics

react-performance

Diagnose React rendering bottlenecks with React DevTools Profiler and apply optimization strategies.

Community
Advanced
yckkkkyckkkk
1

optimize

Identify and fix performance bottlenecks in web and Electron interfaces.

Community
Advanced
Oscar-Ivan-SalasOscar-Ivan-Salas

performance-profiling

Profile web application performance with Lighthouse and DevTools workflows.

Community
Advanced
tronghieutronghieu
36

python-performance-optimization

Profile Python code with cProfile and py-spy to optimize CPU and memory usage.

Community
Intermediate