skills.rest
kaishin
kaishinCOMMUNITY
Explore all skills by this author →
Website𝕏@kaishinGitHub

optimize

Diagnose UI performance issues and generate a prioritized remediation plan.

10|3|Updated Apr 1, 2018
Search Tags:#performance#optimize#code-splitting#web-vitals#bundle-size#lcp#fid
One-click install
npx skills add https://github.com/kaishin/redalemeden.com --skill optimize-kaishin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/kaishin/redalemeden.com/tree/main/.agents/skills/optimize
Command: npx skills add https://github.com/kaishin/redalemeden.com --skill optimize-kaishin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Diagnose and fix UI performance issues to deliver faster, smoother user experiences.

Core Features & Use Cases

  • Assess performance with Core Web Vitals (LCP, FID/INP, CLS), load time, and runtime metrics to identify bottlenecks.
  • Recommend and apply optimizations across images, code splitting, caching, and rendering to reduce bundle size and improve responsiveness.
  • Use cases include optimizing dashboards, data lists, and animations to eliminate jank and improve time-to-interactive.

Quick Start

Provide your project context and let the optimize skill diagnose bottlenecks and generate a prioritized improvement plan.

Frequently Asked Questions about optimize

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

FAQPage Schema
How do I fix UI jank and slow load times in my web app?▼

Fix UI jank and slow load times by collecting Core Web Vitals, memory usage, and bundle analytics to identify bottlenecks. This generates a concrete remediation plan applying image, caching, rendering, and code-splitting optimizations to improve responsiveness.

What is the best way to reduce bundle size for React and Vue applications?▼

Reduce bundle size by analyzing bundle analytics and applying code splitting alongside caching optimizations. This targets large JavaScript payloads to improve time-to-interactive and overall web vitals across frameworks like React, Vue, or vanilla JS.

How do I diagnose Core Web Vitals like LCP and FID for my dashboard?▼

Diagnose Core Web Vitals like LCP and FID by collecting and analyzing load time and runtime metrics for your dashboard. This identifies rendering and loading bottlenecks, enabling a prioritized plan to eliminate animation stutter and improve responsiveness.

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

UI performance optimization applies to both web and mobile UIs where users report lag, jank, or slow load times. It assesses loading, rendering, animations, and bundle size across frameworks such as React, Vue, or vanilla JS to deliver measurable improvements.

Why does my web app still experience animation stutter after code splitting?▼

Animation stutter persists after code splitting when underlying rendering bottlenecks or memory and CPU usage issues remain unaddressed. Diagnosing runtime metrics and Core Web Vitals identifies these specific rendering and animation jank triggers for targeted remediation.

Related Skills

Explore More Software Engineering Skills→
DanialHaseebDanialHaseeb

optimize

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

Community
Advanced
cloudflarecloudflare
2.6k

web-perf

Audit web performance and diagnose Core Web Vitals issues using Chrome DevTools MCP.

Official
Advanced
SylphxAISylphxAI
4

performance

Analyze Next.js frontend performance for Core Web Vitals and bundle size.

Official
Intermediate
vertivolatamvertivolatam
1

Performance Optimization

Optimize Flutter app rendering, memory, and assets with profiling tools.

Official
Advanced