optimize

Diagnose and resolve UI performance issues across images, scripts, CSS, and network requests.

2|Updated May 2, 2025
One-click install
npx skills add https://github.com/daltonkyemiller/dot --skill optimize-daltonkyemiller
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/daltonkyemiller/dot/tree/main/.agents/skills/optimize
Command: npx skills add https://github.com/daltonkyemiller/dot --skill optimize-daltonkyemiller

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill diagnoses and fixes UI performance issues, improving loading speed, rendering, animations, images, and bundle size to create faster, smoother user experiences.

Core Features & Use Cases

  • Performance Diagnostics: Measures and identifies bottlenecks in UI performance.
  • Optimization Strategies: Implements strategies for optimizing images, JavaScript bundles, CSS, fonts, loading strategies, rendering, animations, and network performance.
  • React/Framework Optimization: Provides specific recommendations for optimizing React and other JavaScript frameworks.
  • Network Optimization: Reduces requests, optimizes APIs, and improves performance for slow connections.
  • Core Web Vitals Optimization: Focuses on Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift.
  • Performance Monitoring: Offers tools and metrics for monitoring performance improvements.
  • Quick Start: Use the optimize skill to diagnose performance issues in your application.

Quick Start

Use the optimize skill to analyze the performance of your web application and receive recommendations for improvements.

Frequently Asked Questions about optimize

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

FAQPage Schema
How do I improve web performance and fix slow UI rendering?

Improving web performance requires diagnosing UI bottlenecks across images, scripts, CSS, and network requests. Optimization strategies target loading speed, rendering, and animations to deliver faster, smoother user experiences.

How do I optimize Core Web Vitals like Largest Contentful Paint and Cumulative Layout Shift?

Optimizing Core Web Vitals involves targeting Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift. You achieve this by implementing specific strategies for images, JavaScript bundles, CSS, and network performance.

Does this approach work for optimizing React applications and JavaScript bundles?

Yes, this approach works for optimizing React applications and JavaScript bundles. It provides specific recommendations for optimizing React and other JavaScript frameworks, alongside strategies for reducing overall bundle size.

What is the best way to reduce network requests for applications on slow connections?

The best way to reduce network requests for slow connections is through network optimization. This involves reducing requests, optimizing APIs, and implementing loading strategies tailored to improve performance on constrained networks.

Why does my UI performance suffer, and how do I measure performance bottlenecks?

UI performance suffers due to unoptimized images, large JavaScript bundles, and inefficient rendering. You can measure these performance bottlenecks using performance monitoring tools and metrics to track and identify areas for improvement.