Run any Skill in Manus with one click

Get Started

ui-optimize

Stars2

Forks0

UpdatedApril 25, 2026 at 00:31

Diagnose and fix UI performance: loading, rendering, animations

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

norlanp

norlanp/dotfiles

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

SKILL.md

readonly

name	ui-optimize
description	Diagnose and fix UI performance: loading, rendering, animations

UI Optimize

/ui-optimize [target] - Diagnose and fix UI performance: loading speed, rendering, animations, images, bundle size.

Flow

Measure current state: Core Web Vitals (LCP, FID/INP, CLS), load time, bundle size, runtime perf
Identify bottlenecks: slowest part → root cause → severity → affected users
Optimize systematically by biggest impact first
Verify: measure before/after, test on real devices and slow connections

Optimization Areas

Loading Performance

Images: WebP/AVIF, proper sizing, lazy loading, responsive srcset, CDN
JS Bundle: code splitting, tree shaking, remove unused deps, dynamic imports
CSS: remove unused, critical CSS inline, minimize
Fonts: font-display: swap, subset, preload, limit weights
Strategy: async/defer, preload, prefetch, service worker

Rendering Performance

Avoid layout thrashing (batch reads then writes)
CSS contain for independent regions
content-visibility: auto for long lists
Virtual scrolling for large lists
Minimize DOM depth and size

Animation Performance

GPU-accelerated only: transform and opacity
Never animate layout properties (width, height, top, left)
will-change sparingly for known expensive ops
requestAnimationFrame for JS animations
Target 16ms per frame (60fps)

Core Web Vitals

LCP < 2.5s: optimize hero images, inline critical CSS, preload key resources, CDN, SSR
INP < 200ms: break up long tasks, defer non-critical JS, web workers for heavy computation
CLS < 0.1: set image dimensions, aspect-ratio, reserve space for dynamic content

Network

Reduce request count (combine, SVG sprites, inline critical)
Optimize APIs (pagination, GraphQL, compression, caching)
Adaptive loading for slow connections
Optimistic UI updates

NEVER

Optimize without measuring
Sacrifice accessibility for performance
Break functionality while optimizing
Use will-change everywhere
Lazy load above-fold content
Forget mobile (slower devices, slower connections)

More from this repository

same repository

brainstorm

norlanp/dotfiles

Interview the user relentlessly about a plan or design. Use when the user wants to stress-test a plan before building, or uses any 'grill' trigger phrases.

2026-06-222

improve-code

norlanp/dotfiles

Surface deepening opportunities in a codebase — shallow modules, seam leaks, missing locality — and grill through whichever one you pick. Architecture-pattern aware (monolith / distributed / serverless).

2026-06-222

docs

norlanp/dotfiles

Reconcile and validate all documents in the project's docs/ directory

2026-06-092

audit

norlanp/dotfiles

Full-project code audit workflow: audit then fix

2026-05-162

debug

norlanp/dotfiles

Systematic root cause analysis. No fixes without investigation

2026-05-042

engineer

norlanp/dotfiles

Principal Engineer persona. Production-first technical judgment

2026-04-272

UI Optimize

/ui-optimize [target] - Diagnose and fix UI performance: loading speed, rendering, animations, images, bundle size.

Flow

Measure current state: Core Web Vitals (LCP, FID/INP, CLS), load time, bundle size, runtime perf

Identify bottlenecks: slowest part → root cause → severity → affected users

Optimize systematically by biggest impact first

Verify: measure before/after, test on real devices and slow connections

Optimization Areas

Loading Performance

Images: WebP/AVIF, proper sizing, lazy loading, responsive srcset, CDN

JS Bundle: code splitting, tree shaking, remove unused deps, dynamic imports

CSS: remove unused, critical CSS inline, minimize

Fonts: font-display: swap, subset, preload, limit weights

Strategy: async/defer, preload, prefetch, service worker

Rendering Performance

Avoid layout thrashing (batch reads then writes)

CSS contain for independent regions

content-visibility: auto for long lists

Virtual scrolling for large lists

Minimize DOM depth and size

Animation Performance

GPU-accelerated only: transform and opacity

Never animate layout properties (width, height, top, left)

will-change sparingly for known expensive ops

requestAnimationFrame for JS animations

Target 16ms per frame (60fps)

Core Web Vitals

LCP < 2.5s: optimize hero images, inline critical CSS, preload key resources, CDN, SSR

INP < 200ms: break up long tasks, defer non-critical JS, web workers for heavy computation

CLS < 0.1: set image dimensions, aspect-ratio, reserve space for dynamic content

Network

Reduce request count (combine, SVG sprites, inline critical)

Optimize APIs (pagination, GraphQL, compression, caching)

Adaptive loading for slow connections

Optimistic UI updates

NEVER

Optimize without measuring

Sacrifice accessibility for performance

Break functionality while optimizing

Use will-change everywhere

Lazy load above-fold content

Forget mobile (slower devices, slower connections)