optimize

Diagnose and fix web UI performance issues using Core Web Vitals metrics.

Updated May 5, 2026
One-click install
npx skills add https://github.com/riabtsev/viscore_main --skill optimize-riabtsev
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/riabtsev/viscore_main/tree/main/.github/skills/optimize
Command: npx skills add https://github.com/riabtsev/viscore_main --skill optimize-riabtsev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps diagnose and fix slow, laggy, janky user experiences by targeting the real bottlenecks in loading, rendering, animations, images, and bundle size.

Core Features & Use Cases

  • Performance assessment: Evaluate Core Web Vitals (LCP, INP/FID, CLS), loading timelines, bundle and runtime costs, and network request behavior before changing anything.
  • Optimization strategy: Apply targeted improvements for loading performance, rendering performance, animation smoothness, and React/framework-specific efficiency.
  • Verification & monitoring: Validate changes with before/after metrics and real-device testing to ensure improvements are measurable and no regressions are introduced.

Quick Start

Use the optimize skill when your site feels slow and ask it to measure current Core Web Vitals and bundle size, then provide an ordered plan of concrete optimizations and verification steps for mobile and slow connections.

Frequently Asked Questions about optimize

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

FAQPage Schema
How do I fix slow loading and janky UI rendering in my web application?

Fix slow loading and janky UI rendering by diagnosing runtime bottlenecks, layout thrashing, and network behavior. Measure Core Web Vitals to identify causes, then apply targeted optimizations and validate improvements using before/after testing.

What is the best way to reduce JavaScript bundle size for better Core Web Vitals?

Reduce JavaScript bundle size by evaluating current bundle costs and runtime metrics, then applying targeted optimization strategies. Validate the improvements using before/after metrics to ensure measurable Core Web Vitals gains without regressions.

How do I diagnose layout thrashing and stuttery animations in web apps?

Diagnose layout thrashing and stuttery animations by systematically measuring rendering performance and runtime bottlenecks. Evaluate current Core Web Vitals and animation smoothness before changing anything to target the real bottlenecks.

Can I use this approach to optimize React framework-specific UI performance?

Yes, you can optimize React framework-specific UI performance. The approach applies targeted improvements for loading performance, rendering performance, animation smoothness, and framework-specific efficiency based on measured runtime metrics.

How do I validate UI performance optimizations on real mobile devices?

Validate UI performance optimizations on real mobile devices by executing before/after metrics testing. This verification and monitoring step ensures loading and rendering improvements are measurable and no regressions are introduced on slow connections.

What should I measure before optimizing image delivery and network requests?

Before optimizing image delivery and network requests, measure current Core Web Vitals (LCP, INP/FID, CLS), loading timelines, bundle and runtime costs, and network request behavior to establish a performance assessment baseline.