skills.rest
alexzhang1030
alexzhang1030COMMUNITY
Explore all skills by this author →
𝕏@alexz_devGitHub

i-optimize

Identifies and fixes frontend performance bottlenecks using Core Web Vitals and bundle analysis.

Updated Mar 17, 2026
Search Tags:#performance#frontend#react#optimization#bundle size#rendering#core web vitals
One-click install
npx skills add https://github.com/alexzhang1030/platform-demo --skill i-optimize-alexzhang1030
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: i-optimize
Source: https://github.com/alexzhang1030/platform-demo/tree/main/.agents/skills/i-optimize
Command: npx skills add https://github.com/alexzhang1030/platform-demo --skill i-optimize-alexzhang1030

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you identify and fix interface performance problems that make apps feel slow, janky, or bloated, so users get faster loads and smoother interactions.

Core Features & Use Cases

  • Performance Diagnosis: Measure Core Web Vitals, load time, bundle size, runtime cost, and network behavior to find the real bottleneck.
  • Frontend Optimization: Improve images, JavaScript, CSS, fonts, rendering, and animations for better responsiveness.
  • Use Case: If a React dashboard loads slowly and stutters during scrolling, use this Skill to find the main causes and prioritize the highest-impact fixes.

Quick Start

Use the i-optimize skill to analyze the attached interface or codebase for performance bottlenecks and recommend the highest-impact improvements.

Frequently Asked Questions about i-optimize

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

FAQPage Schema
How do I identify frontend performance bottlenecks in a React application?▼

To identify frontend performance bottlenecks in a React application, measure Core Web Vitals, bundle size, runtime cost, and network payloads to pinpoint the exact causes of slow loading and janky rendering.

What is the best way to improve Core Web Vitals and reduce bundle size?▼

The best way to improve Core Web Vitals and reduce bundle size is to optimize images, JavaScript, CSS, and fonts, which directly lowers network payloads and minimizes runtime cost for faster page loads.

Why does my web interface stutter during scrolling and how do I fix it?▼

Your web interface stutters during scrolling due to rendering and animation bottlenecks; fix them by analyzing paint and layout behavior to prioritize the highest-impact improvements for smoother interactions.

How do I validate performance gains after frontend optimization?▼

To validate performance gains after frontend optimization, measure and compare Core Web Vitals, bundle size, and paint behavior before and after applying fixes to ensure faster loading and lower runtime cost.

Does this approach work for general web interfaces or only React apps?▼

This approach works for general web interfaces and React applications, applying optimization techniques to images, JavaScript, CSS, and animations to achieve faster page loads and smoother interactions across frontend experiences.

Related Skills

Explore More Software Engineering Skills→
yash-gargyash-garg

web-perf

Analyze web performance bottlenecks and identify optimization opportunities using Chrome DevTools.

Community
Advanced
luisartolaluisartola

optimize

Identify and fix web performance issues across loading, rendering, animations, images, and bundle size.

Community
Advanced
ECFN15ECFN15

FrontSymmetry — Pixel-Perfect Alignment & Independent Element Control

Adjust CSS element positioning without shifting surrounding layout components.

Community
Advanced
djkloopdjkloop

optimize

Diagnose and fix UI performance issues in web applications using Lighthouse and bundle analyzers.

Community
Intermediate