console-frontend-review_skill

Overview

This skill reviews React/TypeScript frontend code for the depot console web application with emphasis on real-time rover teleoperation, state management, WebSocket binary protocols, and 3D visualization. It highlights correctness, performance, and safety across Zustand store architecture, protocol encoding/decoding, and React Three Fiber rendering. Use it to validate changes, find regressions, and recommend concrete fixes for telemetry, input handling, and streaming code.

How this skill works

The review inspects critical files including the Zustand store, binary protocol codec, WebSocket connection hook, video stream hook, and the 3D scene components. It checks for immutable state updates, selector usage to minimize re-renders, correct ArrayBuffer/DataView usage for little-endian binary encoding, proper WebSocket lifecycle and reconnect logic, and safe input/visibility handling. It also evaluates memory management around blob URLs and React Three Fiber performance patterns.

When to use it

• When reviewing PRs that modify rover teleop, telemetry, or input handling code.
• When debugging inconsistent telemetry, latency spikes, or command-rate issues.
• When validating binary WebSocket protocol changes or decoding errors.
• When optimizing 3D scene performance or diagnosing React Three Fiber bottlenecks.
• When adding or changing 360° video streaming or blob URL lifecycle handling.

Best practices

• Use small domain slices in the single Zustand store and selectors to avoid unnecessary re-renders.
• Keep binary protocol fast: DataView with explicit bounds checks and little-endian reads/writes; avoid JSON in the critical path.
• Set WebSocket.binaryType = 'arraybuffer', add exponential backoff reconnects, clean up listeners on unmount.
• Rate-limit command sending (100Hz for twist, 10Hz heartbeat) and stop commands when document.visibilityState is hidden.
• Avoid storing computed values in the store, revoke blob URLs when replacing frames, and prefer typed interfaces over any.

Example use cases

• Review a PR that changes encodeTwist/decodeTelemetry to ensure offsets, endianness, and length checks are correct.
• Audit useRoverConnection to ensure arraybuffer handling, reconnect/backoff, and cleanup are implemented.
• Optimize Scene.tsx to reduce draw calls, remove unnecessary state subscriptions, and use memoized objects in R3F.
• Debug a bug where commands continue when tab is backgrounded by checking page visibility handlers and input clearing.
• Validate useVideoStream for proper blob URL creation/revocation and consistent fps reporting.