optimize

Identify and fix frontend performance bottlenecks in web apps and SPAs.

45|3|Updated Jan 20, 2026
One-click install
npx skills add https://github.com/YuDefine/nuxt-supabase-starter --skill optimize-yudefine
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/YuDefine/nuxt-supabase-starter/tree/main/.claude/skills/optimize
Command: npx skills add https://github.com/YuDefine/nuxt-supabase-starter --skill optimize-yudefine

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Performance optimization to reduce load times, improve rendering, and smooth user interactions by identifying and fixing bottlenecks across UI tasks.

Core Features & Use Cases

  • Systematic assessment: measures Core Web Vitals, load times, bundle sizes, and runtime performance to locate bottlenecks.
  • Optimization strategies: provides concrete techniques for images, JavaScript, CSS, fonts, and loading strategies to improve LCP, FID, CLS, and TTI.
  • Use Case: apply to a complex web app with slow initial load and janky interactions to achieve faster, more reliable UX.

Quick Start

Identify bottlenecks and apply targeted optimizations now.

Frequently Asked Questions about optimize

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

FAQPage Schema
How do I identify frontend performance bottlenecks in a web app?

Identify frontend performance bottlenecks by systematically assessing Core Web Vitals, load times, bundle sizes, and runtime performance to locate slow loading speeds and janky interactions. This process pinpoints exact UI issues for targeted optimization strategies across web apps and SPAs.

What is the best way to improve Core Web Vitals for slow loading SPAs?

The best way to improve Core Web Vitals for SPAs is applying targeted optimization strategies like code-splitting, lazy loading, and image optimization. These techniques directly enhance LCP, FID, CLS, and TTI metrics for faster initial load and smoother interactions.

How do I reduce bundle size and speed up loading speed in a complex web app?

Reduce bundle size and speed up loading by applying code-splitting, lazy loading, and CSS/JS minification. These optimization strategies decrease file payloads and defer non-critical resource loading to achieve faster, more reliable user experiences.

Does this approach to UI performance optimization work for both web apps and SPAs?

Yes, UI performance optimization works for both typical web apps and SPAs. It systematically measures and fixes loading speed, rendering, animations, images, and bundle size across these environments to deliver smoother user interactions and faster load times.

Why does my web app have janky interactions and slow rendering despite a small bundle size?

Janky interactions and slow rendering occur due to runtime performance bottlenecks rather than just bundle size. Systematic assessment of rendering and animations identifies these specific UI performance issues, allowing targeted optimizations for smoother user experiences.