optimize

Analyze and resolve interface performance bottlenecks for pages and components.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/jkenney47/finance-app-ux-planning-snapshot-20260308-155100 --skill optimize-jkenney47
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/jkenney47/finance-app-ux-planning-snapshot-20260308-155100/tree/main/.agents/skills/optimize
Command: npx skills add https://github.com/jkenney47/finance-app-ux-planning-snapshot-20260308-155100 --skill optimize-jkenney47

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses slow loading times, choppy animations, and inefficient rendering in user interfaces, ensuring a faster and more responsive user experience.

Core Features & Use Cases

  • Performance Auditing: Measures current performance metrics like Core Web Vitals and bundle sizes.
  • Bottleneck Identification: Pinpoints the root causes of performance issues, from large assets to expensive JavaScript.
  • Optimization Strategies: Implements techniques for improving loading speed, rendering efficiency, and animation smoothness.
  • Use Case: Optimize a slow-loading product detail page by reducing image payloads and code-splitting JavaScript, resulting in a measurable decrease in LCP and TTI.

Quick Start

Use the optimize skill to improve the loading speed of the product page.

Frequently Asked Questions about optimize

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

FAQPage Schema
How do I improve Core Web Vitals and reduce slow loading times on a specific page?

Improving Core Web Vitals requires auditing loading speed, rendering efficiency, and bundle size to pinpoint bottlenecks. This process analyzes specific routes or components, implementing techniques like code-splitting and image payload reduction to deliver measurable performance gains without compromising user experience or accessibility.

What is the best way to identify rendering bottlenecks and choppy animation sources?

Identifying rendering bottlenecks requires performance auditing to measure current metrics and pinpoint root causes, from large assets to expensive JavaScript. This resolves choppy animations and inefficient rendering, ensuring a faster and more responsive user interface.

How do I optimize JavaScript bundle size and improve interface speed?

Optimizing JavaScript bundle size requires analyzing expensive code and implementing optimization strategies like code-splitting. This reduces loading times and improves interface speed by addressing rendering efficiency and animation smoothness across specific components or features.

Does performance optimization for bundle size and rendering work without affecting accessibility?

Performance optimization for bundle size and rendering works without affecting accessibility. The process analyzes and resolves bottlenecks for specific pages, delivering measurable before/after performance gains while ensuring no compromises to the existing user experience or accessibility standards.

Why does my interface have slow loading times and inefficient rendering despite a small bundle size?

Slow loading times and inefficient rendering with a small bundle size often stem from large image payloads or expensive JavaScript execution. Performance auditing identifies these specific bottlenecks in image delivery and rendering efficiency to restore interface speed.