skills.rest
wukangcheng2944
wukangcheng2944COMMUNITY
Explore all skills by this author →
GitHub

optimize

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

Updated Apr 11, 2026
Search Tags:#ui#performance#optimization#rendering#loading#core-web-vitals
One-click install
npx skills add https://github.com/wukangcheng2944/claude-skills --skill optimize-wukangcheng2944
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/wukangcheng2944/claude-skills/tree/main/optimize
Command: npx skills add https://github.com/wukangcheng2944/claude-skills --skill optimize-wukangcheng2944

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill identifies and remedies performance bottlenecks across loading speed, rendering, animations, images, and bundle size to deliver faster, smoother user experiences.

Core Features & Use Cases

  • Measure core web vitals (LCP, FID/INP, CLS), load time, bundle size, and runtime performance.
  • Identify bottlenecks across loading, rendering, and animations and propose targeted improvements.
  • Provide a prioritized, actionable optimization plan that can be executed by developers or automation scripts.

Quick Start

Identify current performance bottlenecks and return a prioritized optimization plan for the target UI.

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 rendering and loading performance in my web app?▼

Improving Core Web Vitals involves identifying bottlenecks in loading, rendering, and animations, then applying targeted fixes to reduce layout shifts and speed up interaction response times. This systematic analysis provides actionable optimization recipes for measurable verification.

What's the best way to reduce bundle size and optimize images for a web interface?▼

The best way to reduce bundle size and optimize images is to systematically analyze network payloads and runtime performance. This identifies specific bottlenecks and generates a prioritized, actionable optimization plan for developers to execute.

Can I use this approach to fix animation jank and memory usage on mobile web interfaces?▼

Yes, you can fix animation jank and memory usage on mobile web interfaces by measuring runtime frames and memory consumption. The approach targets perceived performance issues across loading, rendering, and animations specifically for mobile web contexts.

Why does my web app have high FID and how can I optimize it?▼

High FID occurs due to long main thread tasks blocking user input, which you can optimize by measuring runtime frames and identifying rendering bottlenecks. This yields a prioritized plan to improve interaction responsiveness and overall perceived performance.

Does this UI optimization method work for both loading speed and runtime performance?▼

Yes, this UI optimization method works for both loading speed and runtime performance by measuring load time, bundle size, and runtime frames simultaneously. It provides a comprehensive analysis across loading, rendering, animations, and network payloads.

Related Skills

Explore More Software Engineering Skills→
TumeloRamaphosaTumeloRamaphosa

benchmark

Measure web page performance and compare results against saved baselines.

Community
Advanced
davidbasilefilhodavidbasilefilho

optimize

Diagnose and fix web application UI performance issues with Core Web Vitals metrics.

Community
Advanced
aroidoaroido

web-vitals-monitoring

Measure Core Web Vitals and detect performance budget violations.

Official
Advanced
tuyenhttuyenht

performance-profiling

Audit web performance with Lighthouse and analyze JavaScript bundles.

Community
Intermediate