skills.rest
ZainEldeen-Ashraf-Ibrahim-Ibrahim-Samak
ZainEldeen-Ashraf-Ibrahim-Ibrahim-SamakCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

optimize

Diagnose and fix UI performance issues using Core Web Vitals measurements.

Updated Apr 12, 2026
Search Tags:#ui#performance#optimize#web#bundle-size#core-web-vitals
One-click install
npx skills add https://github.com/ZainEldeen-Ashraf-Ibrahim-Ibrahim-Samak/SCCT --skill optimize-zaineldeen-ashraf-ibrahim-ibrahim-samak
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/ZainEldeen-Ashraf-Ibrahim-Ibrahim-Samak/SCCT/tree/main/.cursor/skills/optimize
Command: npx skills add https://github.com/ZainEldeen-Ashraf-Ibrahim-Ibrahim-Samak/SCCT --skill optimize-zaineldeen-ashraf-ibrahim-ibrahim-samak

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps diagnose and fix UI performance issues across loading speed, rendering, animations, images, and bundle sizes to deliver faster, smoother experiences.

Core Features & Use Cases

  • Performance assessment: measure Core Web Vitals, load times, bundle sizes, and runtime metrics to identify bottlenecks.
  • Systematic optimization: create an actionable plan for loading, rendering, animation, and network improvements.
  • End-to-end improvements: guide teams through applying optimizations and validating results with before/after metrics.

Quick Start

Run a performance audit, identify bottlenecks, and apply targeted optimizations to load speed, rendering, animations, and bundle size.

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 UI performance issues in a web application?▼

To fix UI performance issues, measure Core Web Vitals, load times, and bundle sizes using profiling tools like Lighthouse. Create a systematic optimization plan targeting loading, rendering, and animations, then validate improvements with before and after metrics.

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

Improving Core Web Vitals and reducing bundle size requires profiling your web application to identify bottlenecks. Apply targeted optimizations to loading speed, rendering, and network requests, validating the results with before and after measurements.

How do I optimize web animations to make my UI feel snappy?▼

Optimizing web animations to make a UI feel snappy involves profiling runtime metrics to find rendering bottlenecks. Apply deterministic improvements to animation rendering and validate the smoothness using before and after performance measurements.

Does this UI optimization approach work for both development and production SPAs?▼

Yes, UI performance optimization can be applied to web applications and SPAs during both development and in production. It measures Core Web Vitals and runtime metrics to identify bottlenecks and implement deterministic improvements across environments.

What tooling do I need to measure and optimize loading speed?▼

Measuring and optimizing loading speed requires profiling tooling such as Lighthouse and Core Web Vitals. These tools identify bottlenecks in your web application, enabling you to create a structured optimization plan and validate results with metrics.

Related Skills

Explore More Software Engineering Skills→
chiruu12chiruu12
1

benchmark

Automate web page performance benchmarking to detect regressions in load times and Core Web Vitals.

Community
Advanced
JochenYangJochenYang
21

performance-optimizer

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

Community
Intermediate
benaorbenaor

react-performance

Profile React Native apps to identify and optimize rendering, startup, and memory bottlenecks.

Community
Advanced
marpmemarpme
1

i-optimize

...

Community
Advanced