julik-frontend-races-reviewer_skill

Overview

This skill reviews JavaScript and Stimulus frontend code with Julik's specialized eye for UI race conditions and timing issues. It highlights DOM replacement hazards (Turbo/Hotwire), improper timer or event cleanup, promise races, and concurrent-operation mistakes. Use it to catch subtle timing bugs before they reach users and to get concrete, minimal fixes.

How this skill works

The agent inspects controller lifecycle hooks, event listener registration/disposal, use of setTimeout/setInterval/requestAnimationFrame, promise handling, and CSS animations. It flags missing cancelation tokens, unhandled promise rejections, duplicated timers, and state-machine gaps. For Turbo/Hotwire or HTMX flows it checks where DOM nodes are detached/replaced and whether state is created in initialize() vs connect().

When to use it

• After creating or modifying a Stimulus controller
• When adding or refactoring JavaScript that manipulates the DOM or timers
• Before shipping animations, image/iframe lazy-loading, or modal previews
• When introducing concurrent async flows or multiple promises
• If you see intermittent UI glitches, flicker, or stale DOM updates

Best practices

• Create controller persistent state in initialize(), dispose handlers/intervals in disconnect()
• Use a centralized EventListenerManager to add and remove DOM listeners cleanly
• Propagate cancelation tokens for timeouts/intervals/async chains and clear previous timers
• Prefer Promise.allSettled for concurrent operations and always handle rejections (or document deliberate ignores)
• Use small, meaningful animation frame counts (e.g., 32ms for one intermediate frame) and avoid relying on DOM swaps to preserve animations
• Model complex UI flows with explicit state symbols or a small state machine instead of scattered booleans

Example use cases

• You added a toast Stimulus controller and want to ensure timeouts, connect/disconnect, and Turbo swaps are safe
• You refactored a gallery to use event delegation instead of many data-action attributes
• You implemented image preview loading and need a robust load-then-set-src pattern to avoid flashes
• You added chained async requests for modal content and want to prevent overlapping loads or stale results
• You created an animation that restarts on Turbo replaces and want a stable cross-swap method