i-optimize

Diagnose UI performance issues and deliver implementable optimization plans.

1|Updated Aug 29, 2023

Search Tags:#performance #frontend #react #optimize #web #bundle-size #lcp

Ready to run

npx skills add https://github.com/alicanerdogan/dotfiles --skill i-optimize-alicanerdogan

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: i-optimize
Source: https://github.com/alicanerdogan/dotfiles/tree/main/pi/skills/i-optimize
Command: npx skills add https://github.com/alicanerdogan/dotfiles --skill i-optimize-alicanerdogan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Diagnoses and fixes UI performance issues to deliver faster, smoother web experiences across loading, rendering, animations, images, and bundle sizes.

Core Features & Use Cases

Performance assessment and metrics gathering (LCP, FID/INP, CLS, TTI, FCP)
Strategy-driven optimization steps for images, JS, CSS, fonts, and loading order
Guidance for React/framework optimizations and general web performance tasks
Use Case: when a user reports slow UI, apply the i-optimize process to identify bottlenecks and implement fixes

Quick Start

Run the i-optimize workflow to diagnose and fix the reported performance issue.

Frequently Asked Questions about i-optimize

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

FAQPage Schema

How do I diagnose slow web UI performance and large bundle sizes?▼

To diagnose slow web UI performance, identify key metrics like LCP, INP, CLS, and TTI, then isolate bottlenecks in images, JavaScript, CSS, and rendering paths to deliver an actionable optimization plan.

What is the best way to reduce React app load times and animation stutter?▼

The best way to reduce React app load times and animation stutter is applying strategy-driven optimization steps for JavaScript, loading order, and framework-specific rendering improvements to yield measurable performance outcomes.

How do I fix high LCP and CLS metrics on my frontend application?▼

Fixing high LCP and CLS metrics involves assessing these specific performance indicators, identifying rendering bottlenecks in images and CSS, and implementing actionable fixes to improve loading smoothness.

Does this UI optimization process work for general web apps or only React?▼

This UI optimization process works for general web performance tasks across various front-end apps, while also providing specific guidance for React and framework-specific optimizations to resolve loading and jank issues.

When do I need to run a frontend performance assessment workflow?▼

You need to run a frontend performance assessment workflow when users report slow UI loading, experience jank during interactions, or encounter animation stutter across different devices and network conditions.