skills.rest
AceCandy
AceCandyCOMMUNITY
Explore all skills by this author →
GitHub

optimize

Diagnose and fix UI performance bottlenecks in React front ends.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you diagnose and fix sluggish user interfaces so pages load faster, interactions feel smoother, and animations stop janking.

Core Features & Use Cases

  • Performance diagnosis: Identifies bottlenecks across loading speed, rendering, runtime work, and network delivery.
  • UI optimization: Improves images, CSS, JavaScript bundles, layout behavior, and animation performance.
  • Verification and monitoring: Measures before-and-after results with Core Web Vitals and real-device testing.
  • Use case: Use it when a React app feels heavy, a page takes too long to become interactive, or scrolling and transitions stutter on mobile.

Quick Start

Ask me to analyze the current UI performance, find the biggest bottlenecks, and recommend the highest-impact fixes first.

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 slow rendering and janky animations in a React app?▼

To fix slow rendering and janky animations in a React app, diagnose CSS, JavaScript, and DOM bottlenecks, then apply targeted remediation. This process requires measuring Core Web Vitals and runtime metrics to verify before-and-after interaction responsiveness.

What is the best way to reduce heavy bundle size and improve loading speed in frontend web interfaces?▼

The best way to reduce heavy bundle size and improve loading speed involves diagnosing network delivery and JavaScript bundles, then applying targeted asset optimization. You must measure loading speed metrics before and after remediation to verify the improvements.

Why does my web page take too long to become interactive on mobile devices?▼

Your web page takes too long to become interactive due to runtime work and rendering bottlenecks. Diagnosing UI performance issues across JavaScript execution and DOM processing identifies the highest-impact fixes to improve interaction responsiveness.

Do I need to measure Core Web Vitals before optimizing frontend performance?▼

Yes, you need to measure Core Web Vitals before optimizing frontend performance to establish a baseline. Measuring runtime and network metrics before and after targeted remediation verifies that UI optimization efforts actually improved loading and rendering speed.

Can I use this UI optimization approach for framework-based front ends other than React?▼

Yes, you can use this UI optimization approach for framework-based front ends beyond React. It diagnoses and fixes UI performance bottlenecks across CSS, JavaScript, DOM, and asset delivery for any web interface experiencing slow loading or laggy rendering.

How do I find the highest-impact fixes when my UI feels heavy and sluggish?▼

To find the highest-impact fixes for a heavy and sluggish UI, diagnose bottlenecks across loading speed, rendering, runtime work, and network delivery. This identifies the specific CSS, JavaScript, and asset delivery remediations that yield the greatest improvements.

Related Skills

Explore More Software Engineering Skills→
yocxy2yocxy2

benchmark

Measure page load times, Core Web Vitals, and resource sizes to detect performance regressions.

Community
Advanced
GTC6244GTC6244

benchmark

Measure web performance and detect regressions against baselines in CI workflows.

Community
Intermediate
djankiesdjankies

code-splitting

Implement React 19 code splitting with lazy() and Suspense.

Community
Intermediate
PatternsDevPatternsDev
235

react-server-components

Server-render React components to reduce client-side JavaScript in Next.js App Router.

Official
Intermediate