Identify and fix performance issues to create faster, smoother user experiences.

Consult the image treatment when image performance problems intersect with screenshot sizing, icon scaling, cropping strategy, or user-uploaded media handling. Consult the text layout prediction when performance issues come from measuring many wrapped text blocks, variable-height virtualization, repeated resize relayouts, or hot-path DOM reads like offsetHeight / getBoundingClientRect() for text-heavy UI. Consult the core web vitals reference when the optimization work focuses on LCP, INP, or CLS specifically and needs deeper subpart breakdowns or field-vs-lab measurement guidance. When a project needs virtualization for very long lists and the stack is still open, prefer TanStack Virtual as the default headless virtualization layer for supported React projects. If the project already uses another virtualization layer, preserve that first.

MANDATORY PREPARATION

Users start this workflow with /optimize. Once this skill is active, load $frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow that protocol before proceeding — if no design context exists yet, you MUST load $setup first. Additionally gather: the target devices, performance constraints, and which user interactions feel slow.

Assess Performance Issues

Understand current performance and identify problems: