skills.rest
luiztrilha
luiztrilhaCOMMUNITY
Explore all skills by this author →
GitHub

optimize

Diagnose and address UI performance bottlenecks across loading, rendering, and animations.

Updated Apr 27, 2026
Search Tags:#web development#performance optimization#ui performance#javascript optimization#css optimization
One-click install
npx skills add https://github.com/luiztrilha/dunderia-public --skill optimize-luiztrilha
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/luiztrilha/dunderia-public/tree/main/templates/local-runtime-profile/skills/agents/optimize
Command: npx skills add https://github.com/luiztrilha/dunderia-public --skill optimize-luiztrilha

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses UI performance issues, ensuring faster load times, smoother animations, and efficient rendering for optimal user experience.

Core Features & Use Cases

  • Performance Diagnostics: Measures load speed, rendering, animations, image quality, and bundle size.
  • Optimization Strategies: Implements systematic improvements for images, JavaScript, CSS, fonts, and loading strategies.
  • Rendering Performance: Mitigates layout thrashing and optimizes rendering with CSS containment and DOM management.
  • Animation Performance: Accelerates animations through GPU acceleration and 60fps targeting.
  • Framework Optimization: Enhances React and framework performance with memoization, code splitting, and virtualization.
  • Network Optimization: Reduces requests, optimizes APIs, and improves slow connection handling.
  • Core Web Vitals: Focuses on LCP, FID/INP, and CLS metrics for overall performance.

Quick Start

Analyze and optimize the performance of your website with the optimize skill.

Frequently Asked Questions about optimize

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

FAQPage Schema
How do I improve my website's Core Web Vitals like LCP and CLS?▼

To improve Core Web Vitals, UI performance optimization focuses on diagnosing and addressing bottlenecks in loading speed, rendering, and layout shifts. This skill targets LCP, FID/INP, and CLS metrics through image optimization, code splitting, and network request reduction.

What is the best way to fix layout thrashing and optimize frontend rendering performance?▼

Optimizing frontend rendering performance involves mitigating layout thrashing and managing the DOM efficiently. This skill applies CSS containment and DOM management strategies to ensure smoother user interface rendering.

How can I optimize React performance and reduce my JavaScript bundle size?▼

Optimizing React performance involves applying memoization, code splitting, and virtualization techniques. This skill enhances framework performance by systematically reducing JavaScript bundle size and improving component rendering efficiency.

How do I achieve 60fps animations and GPU acceleration for web applications?▼

Achieving 60fps animations requires leveraging GPU acceleration and optimizing rendering pipelines. This skill accelerates web animations by targeting 60fps performance metrics and addressing visual bottlenecks.

Why does my website load slowly on poor network connections and how can I optimize API requests?▼

Slow website loading on poor networks is often caused by excessive API requests and unoptimized resources. Network optimization reduces requests, optimizes APIs, and implements strategies to handle slow connections effectively.

Can I diagnose UI performance bottlenecks without prior performance profiling data?▼

Yes, performance diagnostics measures load speed, rendering, animations, image quality, and bundle size from the start. This skill systematically diagnoses UI performance bottlenecks to establish a baseline before applying optimization strategies.

Related Skills

Explore More Software Engineering Skills→
jota-batutajota-batuta

performance-testing

Establish performance baselines and budgets for APIs and web applications.

Community
Advanced
Arnutt-NArnutt-N

performance-monitor

Track real-time performance metrics for HR-IMS applications with threshold alerts.

Community
Advanced
KILWA73KILWA73

asset-optimizer

Convert images to WebP/AVIF and minify CSS/JS for web assets.

Community
Intermediate
logo-solutionslogo-solutions

browser-testing-with-devtools

Inspect live DOM, console, network, and performance state in Chromium-based browsers.

Official
Advanced