skills.rest
PavkaBrika
PavkaBrikaCOMMUNITY
Explore all skills by this author →
GitHub

optimize

Diagnose UI performance issues and prescribe fixes for loading, rendering, and interactions.

1|Updated Jun 23, 2022
Search Tags:#performance#frontend#optimization#fps#web#bundle-size#lcp
One-click install
npx skills add https://github.com/PavkaBrika/debtbookapp --skill optimize-pavkabrika
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/PavkaBrika/debtbookapp/tree/main/.cursor/skills/optimize
Command: npx skills add https://github.com/PavkaBrika/debtbookapp --skill optimize-pavkabrika

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when users notice slow, laggy, or janky experiences, long load times, or large bundle sizes.

Core Features & Use Cases

  • Assess Performance Issues: Measure current performance metrics (Core Web Vitals, load time, bundle size, runtime performance) and identify bottlenecks.
  • Optimization Strategy: Create a systematic improvement plan covering loading, rendering, animation, and network performance.
  • Quick Win Scenarios: Apply high-impact changes like image optimization, code-splitting, and CSS improvements for noticeable gains.

Quick Start

Run the optimize skill to diagnose current UI performance and apply guided fixes.

Frequently Asked Questions about optimize

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

FAQPage Schema
How do I identify UI performance bottlenecks causing janky animations and slow load times?▼

To identify UI performance bottlenecks, diagnose current metrics like Core Web Vitals, load time, and frame rate. This process measures runtime performance and bundle size to pinpoint specific rendering, network, or interaction issues causing janky experiences.

What is the best way to reduce large bundle size and improve LCP for web apps?▼

The best way to reduce large bundle size and improve LCP is applying quick win optimizations like image optimization and code-splitting. A structured optimization strategy systematically targets CSS/JS delivery and network performance for measurable before/after gains.

Can I use this optimization strategy for mobile UIs as well as web apps?▼

Yes, you can use this optimization strategy for mobile UIs as well as web apps. The diagnostic process applies across both platforms to improve loading speed, rendering, frame rate, and animation smoothness for faster overall interactions.

How do I create a structured optimization plan for frontend rendering issues?▼

To create a structured optimization plan for frontend rendering issues, systematically target loading, rendering, animation, and network performance. This plan prescribes specific fixes while satisfying requirements for bottleneck identification and measurable before/after outcomes.

Why does my web app have a low FPS and how can I fix it?▼

Low FPS occurs due to rendering bottlenecks during animations or interactions. To fix it, run a UI performance diagnosis to identify runtime bottlenecks, then apply prescribed fixes like CSS improvements to increase animation smoothness and restore high frame rate.

Related Skills

Explore More Software Engineering Skills→
DanialHaseebDanialHaseeb

optimize

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

Community
Advanced
liauw-medialiauw-media
3

lighthouse-performance-optimization

Run Lighthouse audits through MCP to identify website performance bottlenecks.

Community
Advanced
angelcreativeangelcreative

optimize

Analyze application performance bottlenecks and provide optimization strategies for Core Web Vitals.

Community
Advanced
JochenYangJochenYang
21

performance-optimizer

Identify performance bottlenecks and optimize application speed across backend, database, and frontend workflows.

Community
Intermediate