skills.rest
lachieh
lachiehCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

optimize

Diagnose UI performance issues and create prioritized optimization plans.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Diagnose and fix UI performance issues across loading speed, rendering, animations, images, and bundle size to create faster, smoother user experiences.

Core Features & Use Cases

  • Assess current performance using Core Web Vitals, load time, bundle size, runtime performance, and network metrics.
  • Identify bottlenecks and plan systematic improvements (images, JS, CSS, fonts, loading strategy, rendering and animation).
  • Use case: When a user reports slow startup or janky interactions, apply the optimize skill to improve perceived performance.

Quick Start

Run a performance audit to identify bottlenecks and apply an optimization plan to the current UI.

Frequently Asked Questions about optimize

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

FAQPage Schema
How do I improve Core Web Vitals for a slow loading UI?▼

Improve Core Web Vitals by running a performance audit to identify bottlenecks across loading speed, rendering, and bundle size. Generate a prioritized optimization plan to reduce load time and create faster, smoother user interactions.

What's the best way to fix janky animations and laggy interactions in web apps?▼

Fix janky animations and laggy interactions by diagnosing runtime performance bottlenecks. Apply structured assessment to target rendering issues and optimize animation smoothness for a more responsive UI experience.

How can I reduce large bundle size and optimize images for frontend performance?▼

Reduce large bundle size and optimize images by identifying bottlenecks in JS, CSS, and fonts. Apply an optimization plan to loading strategies and image assets to reduce overall bundle size and improve startup speed.

Does UI performance optimization work for both web and mobile apps?▼

UI performance optimization applies across web and mobile apps. It assesses current performance using network metrics, load time, and bundle size to systematically improve perceived speed and rendering for both platforms.

When do I need to use a UI performance optimization plan?▼

Use a UI performance optimization plan when users report slow startup, laggy interactions, or janky animations. It diagnoses bottlenecks and applies systematic improvements to achieve measurable goals like reduced Time to Interactive.

Why does my frontend have a slow startup time and large bundle?▼

A slow frontend startup and large bundle stem from unoptimized JS, CSS, fonts, and images. Diagnose these bottlenecks through a performance audit and apply a prioritized plan to improve loading strategy and reduce bundle size.

Related Skills

Explore More Software Engineering Skills→
GenEducationGenEducation

benchmark

Measure page load, Core Web Vitals, and resource usage against a saved baseline.

Official
Advanced
liauw-medialiauw-media
3

lighthouse-performance-optimization

Run Lighthouse audits through MCP to identify website performance bottlenecks.

Community
Advanced
SL-A-SHSL-A-SH

optimize

Diagnose Core Web Vitals and optimize front-end loading, rendering, and bundle size.

Community
Advanced
TrainLCDTrainLCD
71

argent-react-native-optimization

Profile and optimize React Native app rendering, lists, and animations.

Official
Advanced