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

Ready to run

npx skills add https://github.com/wukangcheng2944/claude-skills --skill optimize-wukangcheng2944

💬 Prompt for ChatGPT / Claude Chat▼

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.