skills.rest
Davie521
Davie521COMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/Davie521/claude-skills --skill optimize-davie521
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
ZainEldeen-Ashraf-Ibrahim-Ibrahim-SamakZainEldeen-Ashraf-Ibrahim-Ibrahim-Samak

optimize

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

Community
Advanced
yckkkkyckkkk
1

optimize

Identify and fix performance bottlenecks in web and Electron interfaces.

Community
Advanced
josemartinrodriguezmortalonijosemartinrodriguezmortaloni

ui-skills

Enforce opinionated UI constraints for frontend development with AI agents.

Community
Intermediate
joncoroneljoncoronel
1

optimize

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

Community
Advanced