skills.rest
jayteealao
jayteealaoCOMMUNITY
Explore all skills by this author →
GitHub

design-optimize

Diagnose UI performance issues and implement fixes for web and mobile interfaces.

2|Updated Jan 12, 2026
Search Tags:#animation#optimize#bundle-size#core-web-vitals#ui-performance#loading-speed
One-click install
npx skills add https://github.com/jayteealao/agent-skills --skill design-optimize
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-optimize
Source: https://github.com/jayteealao/agent-skills/tree/main/plugins/sdlc-workflow/skills/design-optimize
Command: npx skills add https://github.com/jayteealao/agent-skills --skill design-optimize

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Diagnoses and fixes UI performance issues across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky performance, or wants a faster, smoother experience.

Core Features & Use Cases

  • Assess performance issues using Core Web Vitals, load times, and bundle sizes to identify bottlenecks in modern web apps.
  • Create and execute a systematic optimization plan covering images, JavaScript/CSS, fonts, and rendering strategies.
  • Verify improvements with before/after measurements and guardrails to ensure no regressions across devices and networks.

Quick Start

Start by running a quick performance assessment on the target UI and propose a concrete optimization plan.

Frequently Asked Questions about design-optimize

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

FAQPage Schema
How do I fix slow loading and janky animation performance in my web app?▼

Fix slow loading and janky animation performance by diagnosing UI bottlenecks and executing a targeted optimization plan for images, JavaScript, CSS, and rendering strategies. This improves frame rates and reduces laggy interactions across modern web apps.

How do I measure and improve Core Web Vitals for a slow user interface?▼

Measure and improve Core Web Vitals by running a performance assessment to identify bottlenecks, then applying rendering and bundle optimizations. Validate the improvements using before/after metrics to ensure no regressions across different devices and networks.

What is the best way to reduce heavy bundle size causing UI stutter on mobile devices?▼

The best way to reduce heavy bundle size and UI stutter is to systematically optimize JavaScript and CSS delivery. Analyze the bundle to identify heavy modules, then apply code splitting and targeted loading strategies to speed up mobile interactions.

Can I use this approach to optimize both web and mobile interfaces?▼

Yes, you can use this approach to optimize both web and mobile interfaces. The diagnostic process targets slow loading, laggy rendering, and animation stutter across devices, applying systematic fixes to speed up interactions universally.

How do I verify UI performance optimizations and prevent future regressions?▼

Verify UI performance optimizations and prevent regressions by validating improvements with before/after measurements. Establish guardrails based on Core Web Vitals and load times to continuously monitor and ensure no performance drops across devices.

Related Skills

Explore More Software Engineering Skills→
jcdiv47jcdiv47

optimize

Diagnose and fix frontend performance bottlenecks using Core Web Vitals and bundle analysis.

Community
Intermediate
mahou-labsmahou-labs
1

optimize

Identifies bottlenecks in web interfaces and implements targeted optimizations for measurable improvements.

Official
Advanced
cenjiecenjie

api-response-optimization

Optimize REST and GraphQL API responses with HTTP caching, compression, and payload minimization.

Community
Intermediate
alicanerdoganalicanerdogan
1

i-optimize

Diagnose UI performance issues and deliver implementable optimization plans.

Community
Intermediate