UI Robustness code review 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)

Use <Link> from 'next/link' for internal routes; reserve <a> only for external URLs or downloadable assets.

Avoid fixed pixel heights for containers; prefer min/max constraints or flexible layouts.

Avoid re-creating existing UI components or duplicating styles (CSS/Tailwind) when the company design system already provides an official component. If the PR touches UI and a design system entry point is referenced (e.g., `ui/index.ts`, `design-system.md`), use it as the source of truth and suggest the equivalent official component.

Ensure that event listeners are removed when no longer needed. Not doing so can lead to memory leaks and unnecessary resource consumption.

For async routes, add loading.tsx for suspense fallbacks and error.tsx for boundaries. Use notFound() for 404 states.

Ensure that isMounted is not used in React components. This method is deprecated and can cause unreliable state updates. Suggest using cleanup functions or useRef instead.

Centralize repeated dialog creation/action handlers into a helper to ensure consistent UX and error handling.

Create factories/builders for repeated dialog/modal construction with configurable parameters.

After using external resources (DB connections, open files, sockets), release them properly. Use fclose(), close database connections or finally blocks to ensure cleanup even if errors occur.