skills.rest
nsuberi
nsuberiCOMMUNITY
Explore all skills by this author →
GitHub

optimize

Diagnoses UI performance issues in web apps and validates improvements with before/after Core Web Vitals metrics.

Updated Jul 5, 2025
Search Tags:#frontend#bundle size#optimize#performance audit#core web vitals#loading time#ui performance
One-click install
npx skills add https://github.com/nsuberi/proto-portal-showcase-hub --skill optimize-nsuberi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: optimize
Source: https://github.com/nsuberi/proto-portal-showcase-hub/tree/main/apps/ai-builders-portal/.claude/skills/optimize
Command: npx skills add https://github.com/nsuberi/proto-portal-showcase-hub --skill optimize-nsuberi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Diagnoses and fixes UI performance issues across loading speed, rendering, animations, images, and bundle size to deliver faster, smoother experiences.

Core Features & Use Cases

  • Assess performance issues across Core Web Vitals, load times, and runtime performance to identify bottlenecks.
  • Provide an actionable optimization strategy covering loading performance, rendering, animation, network, and code-splitting improvements.
  • Validate improvements with before/after measurements and guardrails to ensure no regressions in UX.

Quick Start

Identify current performance bottlenecks in the UI and implement the recommended optimizations to improve load times and frame rates.

Frequently Asked Questions about optimize

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

FAQPage Schema
How do I diagnose and fix slow UI loading times and rendering bottlenecks?▼

To fix slow UI loading times, you diagnose rendering and network bottlenecks by measuring Core Web Vitals. This process assesses load times and runtime performance to identify specific UI issues and generate an actionable optimization strategy.

What is the best way to improve Core Web Vitals for a modern web app?▼

Improving Core Web Vitals involves assessing loading, rendering, animations, and network bottlenecks. You create an optimization plan covering code-splitting and bundle size reduction, then validate improvements using before and after metrics.

How do I reduce frontend bundle size to speed up web app performance?▼

Reducing frontend bundle size requires assessing performance issues across loading and network requests. You apply an actionable optimization strategy that includes code-splitting improvements to deliver a faster, smoother user experience.

Can I validate UI performance improvements and prevent regressions during production monitoring?▼

Yes, you validate UI performance improvements by capturing before and after measurements of Core Web Vitals. Establishing guardrails ensures no regressions in UX occur during development and production monitoring.

Why does my web app have poor UI performance and frame rates during runtime?▼

Poor UI performance and frame rates stem from rendering, animation, and network bottlenecks. Diagnosing these UI performance issues across load times and runtime performance identifies the specific bottlenecks degrading the experience.

Related Skills

Explore More Software Engineering Skills→
chiruu12chiruu12
1

benchmark

Automate web page performance benchmarking to detect regressions in load times and Core Web Vitals.

Community
Advanced
JochenYangJochenYang
21

performance-optimizer

Identify performance bottlenecks and optimize application speed across backend, database, and frontend workflows.

Community
Intermediate
SylphxAISylphxAI
4

performance

Analyze Next.js frontend performance for Core Web Vitals and bundle size.

Official
Intermediate
JaykaijackJaykaijack

benchmark

Measure browser performance metrics and compare them to stored baselines.

Community
Advanced