optimize

Diagnose UI performance issues and apply fixes for loading, rendering, and animation.

1|Updated Oct 27, 2025

Search Tags:#performance #web vitals #optimization #bundle size #animation #loading speed

Ready to run

npx skills add https://github.com/sandrasocial/sselfie-9g --skill optimize-sandrasocial

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/sandrasocial/sselfie-9g/tree/main/.agents/skills/optimize
Command: npx skills add https://github.com/sandrasocial/sselfie-9g --skill optimize-sandrasocial

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The skill addresses slow, laggy, or janky user interfaces by diagnosing performance bottlenecks and providing concrete fixes to loading, rendering, animation, and bundle size issues.

Core Features & Use Cases

Performance Assessment: Measures Core Web Vitals, load times, bundle sizes, and runtime metrics.
Optimization Strategies: Provides detailed recommendations for images, JavaScript, CSS, fonts, network requests, and rendering.
Framework Guidance: Includes React‑specific tips and generic best practices for any web stack.
Use Case Example: When a web app feels sluggish on mobile, invoke this skill to get a step‑by‑step plan to speed up page load and ensure smooth 60 fps animations.

Quick Start

Ask the optimize skill to evaluate and improve the performance of your target website.

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 speed and improve Core Web Vitals for my web application?▼

Fix slow loading speed by diagnosing UI performance bottlenecks and applying strategies like image optimization, code splitting, and network request reduction to meet Core Web Vitals thresholds for LCP, FID, and CLS.

What's the best way to reduce high JavaScript bundle size in a React app?▼

Reduce high JavaScript bundle size by applying code splitting, CSS trimming, and framework-specific optimization guidance to eliminate redundant code and improve overall loading speed.

Why does my web animation feel janky and how can I achieve 60fps rendering?▼

Web animations feel janky due to rendering bottlenecks, which you can resolve by implementing GPU-accelerated animations and CSS trimming to ensure smooth 60fps rendering across desktop and mobile devices.

How do I optimize images to lower my website's LCP below 2.5 seconds?▼

Optimize images by diagnosing loading speed metrics and applying targeted image optimization strategies to reduce file payloads, helping your website meet the LCP <2.5s threshold.

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

This UI optimization approach works for both mobile and desktop devices, diagnosing runtime metrics and providing generic best practices applicable to any web stack to improve rendering efficiency.

How do I stop layout shifts and meet the CLS <0.1 threshold requirement?▼

Stop layout shifts by assessing Core Web Vitals and applying rendering efficiency fixes to stabilize visual elements, ensuring your web application meets the strict CLS <0.1 threshold.