skills.rest
luyangliuable
luyangliuableCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

optimize

Identify and fix web and app performance bottlenecks in loading, rendering, animations, and bundle size.

Updated Mar 23, 2026
Search Tags:#performance#optimization#javascript#bundle size#rendering#animations#core web vitals
One-click install
npx skills add https://github.com/luyangliuable/claude-setup --skill optimize-luyangliuable
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/luyangliuable/claude-setup/tree/main/.agents/skills/optimize
Command: npx skills add https://github.com/luyangliuable/claude-setup --skill optimize-luyangliuable

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps identify and fix performance bottlenecks that make apps feel slow, laggy, or unstable, improving responsiveness and user perception.

Core Features & Use Cases

  • Load Performance: Improve page load speed, bundle size, images, fonts, and critical resource delivery.
  • Rendering Performance: Reduce reflows, repaints, DOM overhead, and other causes of jank during interaction.
  • Animation and Runtime Optimization: Make animations smoother, reduce main-thread work, and improve frame consistency.
  • Use Case: A product team notices a slow mobile checkout flow; this Skill can help diagnose the bottleneck, prioritize the biggest wins, and verify measurable improvements.

Quick Start

Ask to optimize the target experience by measuring the main performance bottlenecks and proposing the highest-impact fixes first.

Frequently Asked Questions about optimize

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

FAQPage Schema
How do I fix slow page load speed and reduce bundle size in my web app?▼

To fix slow page load speed and reduce bundle size, you need to identify bottlenecks in critical resource delivery, heavy assets, and expensive JavaScript execution, then apply optimizations to improve Core Web Vitals and network usage.

What causes janky rendering and how can I make web animations smoother?▼

Janky rendering is caused by excessive reflows, repaints, and DOM overhead during interaction. You can make animations smoother by reducing main-thread work, optimizing runtime behavior, and improving frame consistency.

How do I measure and improve Core Web Vitals for a slow mobile checkout flow?▼

To improve Core Web Vitals for a slow mobile checkout flow, measure the main performance bottlenecks, propose the highest-impact fixes first, and verify the results through before-and-after comparison of loading speed and runtime behavior.

What is the best way to optimize expensive JavaScript execution and heavy assets?▼

The best way to optimize expensive JavaScript execution and heavy assets is to measure the runtime bottlenecks, prioritize fixes that reduce main-thread work, and verify measurable improvements in network usage and interface responsiveness.

Does this performance optimization approach work for both web and app experiences?▼

Yes, this performance optimization approach works for both web and app experiences, targeting slow first load, janky interactions, heavy assets, and expensive JavaScript execution to improve overall responsiveness and user perception.

Related Skills

Explore More Software Engineering Skills→
IndustrialIndustrial

performance-profiling

Audit web performance with Lighthouse and browser DevTools.

Community
Intermediate
dhruvil7797dhruvil7797

optimize

Optimize front-end UI performance to improve Core Web Vitals metrics.

Community
Advanced
hughescrhughescr
1

hugo-asset-pipeline

Automate Hugo asset processing with Hugo Pipes for SCSS, JS, and images.

Community
Advanced
AceCandyAceCandy

optimize

Diagnose and fix UI performance bottlenecks in React front ends.

Community
Advanced