UI Robustness rules

Ensure close/stop/dispose is called for resources (clients, channels, scopes) using use{} or try/finally; cancel coroutines on shutdown.

Dispose controllers, focus nodes, animations, timers, and cancel subscriptions in `dispose()`.

Ensure that React list items do not use array indexes as keys. This practice can cause reordering issues and unexpected behavior. Recommend using unique identifiers instead.

Detect cases where <a> elements are used as buttons. Anchor tags should be used for navigation, while actions should be assigned to <button> elements to maintain accessibility and expected behavior.

Verify if a widget is still mounted before using `BuildContext` inside an asynchronous operation to prevent accessing invalid states.

Whenever you start an interval/timeout, also define a deterministic cleanup path that clears it.

Apply debounce/throttle to handlers that trigger network calls or heavy computation on rapid input.

Check if React components are defined inside other components. Nested components are recreated on every render, causing unnecessary re-renders. Suggest moving them outside the parent component.

Every goroutine you start should be managed. Avoid launching "fire-and-forget" goroutines that run indefinitely or without any synchronization. Provide a way to stop goroutines (using a cancel context or done channel) and/or track them (e.g., with sync.WaitGroup) to prevent leaks.

Check that JSX list components have unique key properties. Missing keys can cause unnecessary re-renders and lead to state inconsistencies.

Check if React list keys are stable and unique. Using dynamic values like Math.random() or Date.now() can cause rendering issues. Recommend using unique IDs.

Preload render-blocking WOFF2 fonts using <link rel="preload" as="font" type="font/woff2" crossorigin> and define @font-face with "font-display: swap". Only preload fonts used above the fold.

When subscribing to streams/listeners, always provide an error handler and a deterministic unsubscribe/cleanup path.

Ensure that React class components' render functions return a value. Forgetting a return statement results in missing UI elements and potential bugs.

Check if React children are passed as regular props instead of being nested inside components. Passing them incorrectly can cause conflicts and reduce clarity.

Identify cases where React Context values are being reassigned dynamically. Unstable context values trigger unnecessary re-renders. Use memoization to stabilize them.

Always use `defer` to release resources like files or locks when a function has multiple exit points. Open or lock resources and immediately defer their close/unlock to ensure they get released on every code path.

`key` with `v-for` is *always* required on components to maintain internal component state down the subtree. Even for elements, it's good practice for predictable behavior like object constancy in animations.

Use try-with-resources for Closeable/AutoCloseable objects to guarantee deterministic cleanup.

Wrap IDisposable resources in using/await using to ensure deterministic disposal.

When altering UI, include before/after screenshots or a short clip demonstrating the change, and note responsive states and accessibility impacts.

Animate transform/opacity; avoid top/left/width/box-shadow on large elements.

For confirm/cancel flows, define common callbacks (confirm/cancel) once and reuse across dialogs.

Render PAN only in truncated form (first 6 and last 4) and never expose full PAN, CVV, or expiration data together. Apply the masking helper at all presentation points including emails and PDFs. (PCI DSS 4.0 Req. 3.3)