name	obbo-inp-optimization
description	Use when optimizing INP, click latency, input responsiveness, main-thread blocking, or component interactions without changing user-facing behavior.

OBBO INP Optimization

Use this skill when an interaction feels sluggish or blocking.

Preserve semantics and control flow; only reduce interaction cost.
Keep urgent updates urgent and move non-urgent state changes behind startTransition or equivalent when safe.
Minimize work inside event handlers; extract expensive computation and DOM churn out of the hot path.
Prefer CSS or precomputed state over JS-driven animation for repeated interactions.
Avoid synchronous loops, broad state updates, and unnecessary re-renders in client components.
Use deferred rendering for expensive filters, tables, or derived views when it does not change results.
Check whether a server action, cached fetch, or local state split can move work off the interaction path.
Do not alter labels, flows, permissions, or side effects just to improve responsiveness.

Interaction latency is lower or less blocking.
UI output and side effects remain equivalent.
The hottest event path is narrower.
Validation uses targeted interaction testing plus npm run lint if code changes are made.

name	obbo-inp-optimization
description	Use when optimizing INP, click latency, input responsiveness, main-thread blocking, or component interactions without changing user-facing behavior.

Use this skill when an interaction feels sluggish or blocking.

Preserve semantics and control flow; only reduce interaction cost.
Keep urgent updates urgent and move non-urgent state changes behind startTransition or equivalent when safe.
Minimize work inside event handlers; extract expensive computation and DOM churn out of the hot path.
Prefer CSS or precomputed state over JS-driven animation for repeated interactions.
Avoid synchronous loops, broad state updates, and unnecessary re-renders in client components.
Use deferred rendering for expensive filters, tables, or derived views when it does not change results.
Check whether a server action, cached fetch, or local state split can move work off the interaction path.
Do not alter labels, flows, permissions, or side effects just to improve responsiveness.

Interaction latency is lower or less blocking.
UI output and side effects remain equivalent.
The hottest event path is narrower.
Validation uses targeted interaction testing plus npm run lint if code changes are made.

obbo-inp-optimization