House skill. This is an implementation/runtime skill. web-ui-design owns browser-aware UX decisions; design-implementation owns realizing accepted UI design; accessibility owns accessible code. This skill answers what the browser APIs actually do.

When to load

Load when code directly uses window, document, DOM events, fetch and Response, AbortController, URL or URLSearchParams, History, localStorage or sessionStorage, BroadcastChannel, page lifecycle events, browser globals, or APIs whose browser semantics are material.

Do not load for pure rendering or business logic that happens to run in a frontend bundle.

DOM events

Understand three separate concepts:

propagation through capture, target, and bubble phases;
default browser action;
listener registration and lifetime.

stopPropagation controls propagation. preventDefault controls a cancelable default action. They are not interchangeable.

Event delegation relies on propagation and a stable ancestor. When inspecting event targets, account for the difference between target and currentTarget and narrow the target before using element-specific APIs.

browser-runtime

When to load

DOM events