Predictive prefetch

This skill reviews prefetching that should start before the click. Hover prefetch starts too late. Prefetching every visible link wastes bandwidth.

Every check is a pair. The broken line sits beside the line that replaces it.

Trajectory prediction is the published approach. The example is useForesight with hitSlop: 20, which reclaims about 100–200ms versus onMouseEnter. Do not add that dependency unless the user asks. If the project already has a trajectory helper, use it. A finding is hover-only or viewport-wide prefetch where latency matters.

When to use

Use this when navigation waits on the network and the user wants the next page to start loading early. Skip it for a static site that already navigates instantly, or a screen whose data is already loaded. Those are bad use cases in the source notes. Good ones are a data-heavy dashboard, a multi-page app with a slow API and a product page.

1. Find the prefetch

Read the files in scope. List prefetch, router.prefetch, onMouseEnter loaders and any trajectory helper. If nothing prefetches and the user did not ask to add it, say so and stop.

2. Check the trigger

Prefer prediction along the cursor path over prefetch on hover. onMouseEnter={() => router.prefetch(...)} is prefetch-trajectory-over-hover. Do not set prefetch={true} on every visible link. Prefetch by intent. That is prefetch-not-everything.