What problem does it solve? Blazor .NET 6 JS interop failures are notoriously silent: unsupported event directives compile but never fire, DotNetObjectReference callbacks leak or get disposed mid-drag, bundled JS modules miss C#-invokable exports that bUnit tests cannot catch, and drag previews bounce because JS clears state before Blazor's render batch applies. This Skill provides verified root-cause patterns and fixes for each of these production failures. ## Core Features & Use Cases - Non-bubbling event fixes: Replace silently ignored @onmouseenter/@onmouseleave directives with a three-layer JS interop pattern (TypeScript listener registration, C# interop service, Razor component with re-registration guards). - Callback lifecycle management: Prevent DotNetObjectReference disposal errors and memory leaks with paired register/unregister/dispose patterns and WeakMap-based listener tracking. - Bundle export verification: Detect C#-invokable functions missing from the shipped JS bundle entry surface that bUnit's loose JSRuntime mode cannot catch, with Node regression tests against the entry surface. - Render-timing patterns: Fix drag/resize preview bounce by keeping JS preview state until Blazor's commit re-render applies, with bounded fallbacks for rejected commits. - Use Case: A hover flyout in your Blazor component library never triggers despite compiling cleanly. The Skill identifies mouseenter as non-bubbling, walks you through the TypeScript/C#/Razor three-layer fix, and gives you a verification checklist including browser console checks. ## Quick Start Ask the agent to diagnose why your Blazor hover event or drag-and-drop interop callback is not firing and to apply the appropriate fix pattern with verification steps.
