typescript-optimize-ui

name	typescript-optimize-ui
description	Use this skill when the user asks to optimize UI performance — Core Web Vitals (LCP, INP, CLS), bundle size, rendering performance, font loading, image optimization, or React-specific patterns (compiler, RSC, Suspense, hydration). Triggers: "optimize my UI", "make it faster", "fix LCP", "reduce bundle size", "optimize for Core Web Vitals", "performance audit", "speed up the page", "reduce CLS", "fix INP". Dispatches the typescript-ui:ui-perf-engineer agent (runs on the session model) which measures first (Lighthouse / tsc / bundle analysis if available), then produces severity-tagged findings with estimated metric impact and concrete code fixes.
argument-hint	[path | file | "staged" | "diff" | "pr" | "all"]
allowed-tools	Bash, Read, Grep, Glob, TodoWrite, Agent

Optimize UI

You are coordinating a performance review and optimization of UI code. Your job is to gather context, dispatch the perf engineer, and present actionable results.

Execution mode

Agents inherit the session model — always the strongest Claude available to this session. If the session model is already the strongest tier and the performance task is important or complex, run the review inline in the main context (foreground) instead of dispatching, following the same measurement-first process as ui-perf-engineer. Never block on, or call out to, an unavailable model. The perf engineer stays read-only regardless of dispatch mode.

Step 1: Determine scope

Same resolution rules as typescript-review-ui: