optimize

Diagnose UI performance issues and implement optimization plans for web and mobile interfaces.

7|Updated Mar 4, 2026

Search Tags:#frontend #optimize #web-vitals #bundle-size #lcp #ui-performance

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/Davie521/claude-skills/tree/main/plugins/design/skills/optimize
Command: npx skills add https://github.com/Davie521/claude-skills --skill optimize-davie521

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Diagnoses and fixes UI performance issues to create faster, smoother user experiences.

Core Features & Use Cases

Assess performance using Core Web Vitals (LCP, FID/INP, CLS), Time to Interactive, and bundle size to identify bottlenecks in loading, rendering, and animation.
Propose and implement a targeted optimization plan covering image optimization, JS/CSS minification and code-splitting, font loading strategies, and animation performance tweaks.
Use Case: A slow dashboard or onboarding flow can be accelerated by applying these strategies to reduce load times and maintain smooth interactions.

Quick Start

Describe the current performance bottleneck and request a concrete optimization plan.

Frequently Asked Questions about optimize

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

FAQPage Schema

How do I fix a high LCP and improve web vitals for a slow loading UI?▼

To improve web vitals and fix a high LCP, diagnose loading bottlenecks and implement image optimization, font loading strategies, and code-splitting to reduce load times and deliver faster user experiences.

What is the best way to reduce frontend bundle size in a web application?▼

The best way to reduce frontend bundle size is applying JS/CSS minification and code-splitting techniques. This targets rendering and loading bottlenecks to accelerate slow interfaces and maintain smooth interactions.

How do I optimize UI animation performance and prevent frame rate drops?▼

Optimize UI animation performance by applying animation performance tweaks and CSS/JS tuning. This diagnoses rendering issues to maintain smooth interactions and a higher frame rate during complex UI transitions.

Can I use these frontend optimization strategies for mobile interfaces?▼

Yes, these frontend optimization strategies apply to both web and mobile interfaces. They assess performance using Core Web Vitals and frame rate to identify bottlenecks in loading, rendering, and animation across platforms.

Why does my interactive component have a poor FID or INP score?▼

A poor FID or INP score indicates delays in interactive components. Diagnose these Time to Interactive bottlenecks and resolve them using practical implementation steps like JS tuning and code-splitting.

When should I implement code-splitting to improve UI performance?▼

Implement code-splitting when diagnosing loading bottlenecks and large bundle sizes. It is a practical implementation step compatible with common frontend stacks to accelerate onboarding flows and complex UI transitions.