skills.rest
gerald-ica
gerald-icaCOMMUNITY
Explore all skills by this author →
GitHub

optimize

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

Updated Apr 14, 2026
Search Tags:#ui#performance#optimization#rendering#bundle-size#core-web-vitals
One-click install
npx skills add https://github.com/gerald-ica/opencode-config-snapshot --skill optimize-gerald-ica
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/gerald-ica/opencode-config-snapshot/tree/main/opencode/skills/optimize
Command: npx skills add https://github.com/gerald-ica/opencode-config-snapshot --skill optimize-gerald-ica

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size, helping deliver faster, smoother user experiences.

Core Features & Use Cases

  • Assess performance issues: measure Core Web Vitals (LCP, FID/INP, CLS), load times, bundle size, and runtime performance to identify bottlenecks.
  • Optimization strategy: propose and apply targeted fixes across images, JavaScript, CSS, and animations; include real-world example such as reducing initial JS payloads or image sizes.
  • Use Case: Imagine a slow, laggy dashboard; apply the skill to streamline rendering and interactions for a snappier UI.

Quick Start

Analyze the current UI performance and implement the recommended optimizations to achieve a faster, smoother user experience.

Frequently Asked Questions about optimize

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

FAQPage Schema
How do I diagnose slow UI performance and fix rendering bottlenecks?▼

To diagnose slow UI performance, measure Core Web Vitals metrics like LCP, FID/INP, and CLS to pinpoint rendering bottlenecks. This structured measurement identifies whether large image assets, heavy JavaScript bundles, or inefficient animations cause the lag.

What's the best way to reduce heavy JavaScript bundle size and improve web loading speed?▼

The best way to reduce heavy JavaScript bundle size and improve loading speed is to analyze runtime performance and propose targeted fixes, such as reducing initial JS payloads or image sizes, to streamline rendering and interactions.

Why does my web interface feel choppy and how do I measure Core Web Vitals to fix it?▼

Your web interface feels choppy due to inefficient animations or heavy assets. Measure Core Web Vitals like LCP, FID/INP, and CLS to identify specific performance bottlenecks, enabling targeted fixes for a snappier UI.

Can I optimize large image assets and inefficient animations within a laggy dashboard?▼

Yes, you can optimize large image assets and inefficient animations within a laggy dashboard by assessing runtime performance and applying targeted optimizations across images and CSS to streamline rendering and deliver a snappier UI.

What are the limitations of applying targeted UI optimizations without measuring Core Web Vitals?▼

Without measuring Core Web Vitals, targeted UI optimizations lack structured identification of loading speed and rendering bottlenecks, making it difficult to effectively reduce initial JS payloads or image sizes and ensure a smoother user experience.

Related Skills

Explore More Software Engineering Skills→
stevengonsalvezstevengonsalvez

optimize

Measure Core Web Vitals and optimize web application performance.

Community
Intermediate
HieubkavHieubkav

web-performance-audit

Measure Core Web Vitals and identify web performance bottlenecks.

Community
Advanced
KILWA73KILWA73

asset-optimizer

Convert images to WebP/AVIF and minify CSS/JS for web assets.

Community
Intermediate
avoidthekitchenavoidthekitchen
1

web-perf

Analyze Core Web Vitals and network traces to identify performance bottlenecks.

Community
Advanced