One-click install
npx skills add https://github.com/jean-sotil/presskitpro-webapp --skill optimize-jean-sotil
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/jean-sotil/presskitpro-webapp/tree/main/.agents/skills/optimize
Command: npx skills add https://github.com/jean-sotil/presskitpro-webapp --skill optimize-jean-sotil

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Slow UI performance makes apps feel broken, causing delays, jank during interactions, and bloated downloads that hurt retention and usability.

Core Features & Use Cases

  • Diagnose performance bottlenecks by measuring Core Web Vitals (LCP/INP/CLS), load timing, bundle size, runtime behavior, and network waterfall patterns.
  • Optimize loading, rendering, animations, and framework output using image and font best practices, JavaScript/CSS reduction, layout-thrashing avoidance, virtualization, and GPU-friendly animation strategies.
  • Improve real-world user experience with verification by comparing before/after metrics, validating on real devices and slow connections, and preventing regressions.

Quick Start

Use the optimize skill to assess your current Core Web Vitals and identify the biggest bottleneck driving slow loads or janky interactions, then apply targeted fixes and verify the improvement with before/after measurements.

Frequently Asked Questions about optimize

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

FAQPage Schema
How do I fix animation jank and slow loading in my web app?

Fix UI performance issues by diagnosing Core Web Vitals and runtime bottlenecks, then applying targeted optimizations like code splitting, asset compression, and GPU-friendly animations to make your UI feel instant.

What causes poor Core Web Vitals and bloated bundle size?

Poor Core Web Vitals and bloated bundle size are caused by expensive rendering, oversized images and fonts, excessive JavaScript execution, and inefficient CSS strategies that delay loading and cause layout shift.

How do I profile rendering and JavaScript execution bottlenecks?

Profile rendering bottlenecks by measuring load timing, runtime behavior, and network waterfall patterns using real-device monitoring tools to identify expensive layout, paint, and composite operations.

Does this approach work for optimizing images, fonts, and CSS strategies?

Yes, this optimization approach works for images, fonts, and CSS by applying best practices for asset reduction, code splitting, and layout-thrashing avoidance to improve real-world user experience.

What's the best way to prevent UI performance regressions after optimization?

Prevent UI performance regressions by comparing before and after metrics, validating improvements on real devices and slow connections, and continuously monitoring Core Web Vitals to catch new bottlenecks.