skills.rest
alicanerdogan
alicanerdoganCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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

Related Skills

Explore More Software Engineering Skills→
mahg-esmahg-es
3

performance

Measure Core Web Vitals and audit frontend performance bottlenecks.

Official
Intermediate
marpmemarpme
1

i-optimize

...

Community
Advanced
devon87warren-afkdevon87warren-afk

performance-profiling

Audit web performance with Lighthouse and Python scripts.

Community
Intermediate
tech-leads-clubtech-leads-club
5.0k

perf-astro

Optimize Astro projects for Lighthouse performance with critical CSS and asset compression.

Official
Intermediate