@nerdev/skillset 0.2.1

package/skills/ui/gsap-react-router/references/initialization.md

@@ -0,0 +1,87 @@
+<!-- Generated from shared/initialization.md; run scripts/sync_initialization.py. -->
+
+# Invisible intros, recovery, and first load
+
+Read this whenever an entrance hides meaningful content. The matching framework skill owns initialization, navigation, recovery, and interruption. Motion recipes own teardown and restoration of their changes. Styles select the look and pacing only.
+
+## Keep the successful intro
+
+Build readable, settled HTML and CSS first. Preserve invisible-to-visible entrances with a small early script and scoped pre-paint CSS:
+
+```css
+html[data-motion-boot="pending"] [data-motion-owner][data-phase="initial"][data-intro],
+html[data-motion-boot="pending"] [data-motion-owner][data-phase="initial"] [data-intro] {
+  visibility: hidden;
+}
+```
+
+Names are examples. Use separate attributes for boot status, motion preference, and lifecycle phase. Rename a `data-motion="js"` boot example if the app already uses `data-motion="full|reduced"` for preference. Opt in only targets intended to enter visibly, including hidden ancestors, shell, cards, and footer. Give independent owners their own readiness records. One ready page must not cancel a footer's protection.
+
+- Run the marker before content can paint, using the framework's document integration and CSP nonce/hash support. Arm its recovery timer before setting the marker. It must work without GSAP or the application bundle. If the marker is blocked, content stays readable.
+- Never emit the active marker in server HTML. JavaScript disabled means no marker and readable HTML. A `noscript` override alone does not cover JavaScript enabled with a failed bundle.
+- Skip hiding under reduced motion. Preserve completion, focus, navigation, and removal semantics through the instant path.
+- Before releasing CSS hiding, prepare all required start values and attach the entrance's completion/interruption handlers. Start the timeline in the same turn. Do not flip the phase early to claim readiness: that can flash settled content.
+- Do not hide server content through unconditional CSS, inline styles, client-only wrappers, or a hidden ancestor that the fallback cannot restore.
+
+## Bound initialization, not choreography
+
+Give each incoming owner an initialization deadline, measured from its first pre-paint hiding. Choose and document a short budget; roughly one second is a starting point, not a universal performance target.
+
+The early timer covers bundle delivery and hydration. Register recovery before any setup work, including plugin registration, selectors, initial writes, and splits. Keep the deadline armed through required font/media preparation and timeline construction. Registration or a `live` flag is not readiness. Handing off timers must leave no unprotected interval and must not restart the budget.
+
+A successful handoff occurs only when the prepared intro can run with its handlers attached. Cancel the initialization timer then. A deliberate hold or stagger inside that timeline belongs to animation duration, even if it exceeds the initialization budget. Handle runtime exceptions and interruptions separately; if a running timeline needs a watchdog, derive it from its planned duration, delay, repeats, and pause policy. Never cut a healthy intro short with the boot timer. Recheck deadlines on return from a suspended tab; timers cannot recover a blocked main thread.
+
+Wait only for dependencies the effect needs. Bound font readiness, image load/decode, SplitText auto-split preparation, and frame waits. Prefer reserved image dimensions and a fallback font or unsplit heading over waiting for every font, image, or window `load`. A timed-out promise may still resolve: racing it does not cancel its continuation.
+
+## Recover one owner
+
+Track an owner, a visit/generation token, and a terminal recovery decision outside disposable effect setup. Use boot status such as `pending`, `running`, `recovered`, `disposed` separately from the framework's lifecycle phases. A recovery is permanent for that visit; a genuine later navigation may create a new visit. Repeated setup is not a new visit.
+
+On timeout, rejection, setup exception, or failed entrance:
+
+1. Verify the captured owner and generation are still current and intended to be visible. Invalidate the generation first. Mark it recovered so reentrant handlers cannot restart it.
+2. Abort preparation where supported. Cancel queued frames, timers, event listeners, observers, and subscriptions that can recreate motion. Kill owned timelines, delayed calls, triggers, and ambient effects before restoring content. Do not kill unrelated GSAP work globally.
+3. Run registered effect teardown in reverse order. Each builder must roll back partial changes if it throws before returning a handle. Continue other cleanup if one disposer throws; always reach the final readable fallback.
+4. Revert split wrappers, masks, cloned accessibility text, and plugin DOM changes. Preserve framework-owned nodes and nested links/controls; never overwrite their subtree with a stale HTML snapshot. SplitText revert can reconstruct descendants: split a dedicated text leaf or visual copy when controls, state, or framework bindings must survive. Restore only owned inline properties to their original values, then apply the owner's readable settled state. A marker removal or `autoAlpha: 1` alone cannot undo clipping, transforms, child opacity, or a hidden parent. Avoid `clearProps: "all"` on application-owned styles.
+5. Release only this owner's hiding, cover, busy/inert state, and navigation lock. Apply essential settled completion once, including appropriate focus and transition `done`. Do not replay decorative effects or call an outgoing navigation callback as entrance completion.
+
+The bootstrap must retain a terminal recovery record even before the bundle arrives. With no application changes yet, it can release its CSS gate alone. Once setup starts, it must invoke the registered rollback as well. Releasing a shared document gate must not expose other still-preparing owners; use per-owner gates or transfer every owner's initial values before releasing it.
+
+Every async continuation and controller entry point checks its captured token **before any DOM write or effect creation**, including `set`, `fromTo`, `onSplit`, resize/font callbacks, and `contextSafe` callbacks. Context ownership does not cancel promises. Catch failures inside those callbacks too. Late controller registration reads the terminal boot record and settles without hiding or splitting. Do not infer recovery only from an absent marker that navigation can later recreate.
+
+On navigation, deactivate the outgoing owner's entrance recovery before the outro. Cancel stale work without revealing that owner. Recovery must exclude outgoing/end-state pages, cached hidden routes, closed dialogs, inactive tabs/panels, and decorative clones. Restore the outgoing page only if navigation itself is cancelled and that page becomes current again. Persistent shell elements keep separate visits. Dispose obsolete recovery timers on removal; never let them unlock or focus a newer route.
+
+## Rendering and indexing
+
+Keep primary text, headings, and meaningful links in server-rendered or prerendered HTML where supported. Preserve real `a[href]` links and independently accessible route URLs. Client-only rendering cannot reveal HTML that was never sent; provide a useful static shell/fallback and report that limit. Do not turn an entire page client-only to facilitate animation.
+
+Google renders JavaScript and uses rendered HTML for indexing. An automatic intro does not inherently prevent indexing; that is an inference from Google's rendering model, not a guarantee for a particular page. Check rendered output when indexing is in question. Static hiding rules alone do not establish production indexing failures. See [JavaScript SEO basics](https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics).
+
+Do not require a click, scroll, or hover to load primary indexable content. Keep primary hero media eagerly discoverable; reserve lazy loading for appropriate offscreen content. See [Google's lazy-loading guidance](https://developers.google.com/search/docs/crawling-indexing/javascript/lazy-loading).
+
+## First-load performance
+
+Initially hidden primary content can delay Largest Contentful Paint. LCP concerns eligible visible content painted in the viewport, not the end of a GSAP timeline. A heading or hero may become a candidate before the remaining stagger, footer, or ambient animation completes. Browser eligibility and candidate changes matter; do not calculate LCP from total timeline duration. See [Largest Contentful Paint](https://web.dev/articles/lcp).
+
+Reveal primary headings and hero imagery without waiting for unrelated plugins, particle setup, below-fold media, or every font weight. Keep ambitious motion where requested; reduce unnecessary preparation and deliberate blank holds before weakening the effect. Never serve crawler-specific content or use near-zero opacity tricks to manipulate metrics.
+
+Measure cold first loads separately from client-side transitions. Record the LCP element and timestamp, resource timing, layout shift, and a filmstrip under representative network/CPU conditions. Compare normal and reduced motion; use field data when available. Smooth route transitions do not prove fast document loads. Better performance does not promise ranking or indexing outcomes. See [Google's page-experience guidance](https://developers.google.com/search/docs/appearance/page-experience).
+
+## Failure verification
+
+Use the framework's production build and actual rendering mode. For every supported failure, assert meaningful text, usable links, restored owned styles/DOM, and absence of stale cover, lock, focus, or completion effects. Check page and shell owners separately.
+
+| Case | Required observation |
+|---|---|
+| JavaScript disabled | Server/static content and native links work. Client-only routes get their documented static fallback, not invented SSR content. |
+| Bundle blocked after marker | Prove the early marker executed; let its deadline expire. Content becomes readable without application cleanup. |
+| Setup throws before initial writes | Readable settled state; no unresolved completion or navigation wait. |
+| Setup throws after styles or split DOM | Timelines stop, original text/links return, temporary styles and masks disappear. |
+| Fonts/media stall or reject | Bounded fallback. Resolve them afterward and confirm no new hiding or splitting. |
+| Initialization arrives after recovery | Observe multiple frames after release and beyond the old timeline/deadline. No hidden frame or duplicate completion. |
+| Successful delayed startup within budget | Hidden first frame, then full intended intro. No flash of settled content; intentional duration may exceed the boot budget. |
+| Reduced motion | Readable first paint, functional links, normal completion semantics without travel. |
+| Navigation during preparation or intro | One correct destination; stale recovery cannot reveal outgoing/hidden content or unlock/focus the new visit. |
+| Repeated setup, history, and preserved nodes | No duplicate wrappers, listeners, callbacks, or replay after recovery within the same visit. |
+
+Block only application resources in the bundle test, not the early script or stylesheet. Distinguish an intentionally delayed intro from stalled preparation. Record what ran, rendering limitations, and remaining browser/production gaps; these checks do not prove Google indexed the page or establish field LCP.

package/skills/ui/gsap-react-router/references/motion-system.md

@@ -0,0 +1,158 @@
+# Lifecycle implementation
+
+Read this to implement the five phases for pages and components without layout shift.
+
+## The contract
+
+**mount → initial state → intro → settled → outro → end state → unmount**
+
+One controller owns a node from mount to unmount and exposes one current phase:
+
+1. **Initial state.** Mounted, final size reserved, measured, start values applied, not yet shown.
+2. **Intro.** One timeline from initial values to settled.
+3. **Settled.** Visible, stable, interactive, and controlled by normal CSS.
+4. **Outro.** Still mounted while one timeline moves it toward removal.
+5. **End state.** Still mounted, final values applied, completion run once. Safe to unmount.
+
+The user's request defines how each phase looks. If it only describes an intro or outro, implement the other phases as the minimum needed to enter and leave cleanly.
+
+Store the current phase in state, a ref, or a data attribute. Do not infer it from opacity, DOM presence, or timeline progress.
+
+## Setup and React lifecycle
+
+Register GSAP and required plugins once. In framework mode, use a `*.client.ts` side-effect import from the root route. Components import `gsap` and `useGSAP` from the packages, never from that module: `.client` exports are undefined during SSR.
+
+Use `useGSAP` in components:
+
+- Pass a root ref as `scope`.
+- Use refs for single targets and scoped selectors for repeated ones.
+- Add dependencies only when the animation must rebuild. A page that must run its lifecycle again on a param change depends on `pathname` with `revertOnUpdate`. Do not depend on `location`, `navigation`, or `loaderData` objects, which change more often than the screen does.
+- Wrap callbacks and event handlers that create GSAP work in `contextSafe`.
+- Return a teardown for listeners and other non-GSAP resources.
+
+Never run GSAP or plugin code during server rendering. Route modules are evaluated on the server in framework mode; keep every call inside `useGSAP`, an effect, or an event handler.
+
+Do not call another component's `contextSafe` synchronously inside `useGSAP`: its context becomes a child and dies on the outer revert. Hand shared-controller work off through a microtask, effect, or event.
+
+Write setup so it is correct when it runs more than once on the same node. React development checks do this, and a reused route runs its lifecycle again with its settled DOM intact. Async work started by the first run can still be in flight when the second run starts, so anything a setup triggers outside its own context, such as a shared cover, must be safe to request twice. So: explicit initial writes (`set` or `fromTo`) rather than `from` tweens that trust a fresh node, and cleanup that leaves the node readable. Use a ref guard only for work that should happen once per visit rather than once per setup.
+
+## Initial state
+
+Build the final layout with normal CSS first. The initial state changes appearance, not layout. The element that owns geometry must exist before the animated node mounts.
+
+- Mount content before measuring or animating it.
+- Give images and media dimensions or an aspect ratio.
+- Reserve async regions, including `<Suspense>` fallbacks around `<Await>`, with a wrapper when their size is known.
+- Prefer transforms, `autoAlpha`, masks, or clipping, which keep the layout box.
+
+If the effect changes width, height, or position:
+
+- Animate a transform on an inner element while an outer wrapper holds the settled size.
+- For a real expand or collapse, measure start and end sizes first, animate the wrapper, and decide how surrounding content moves.
+- For layout-to-layout changes, use Flip: capture the old state, apply the new layout, animate.
+- When old and new content share one region, reserve the parent and overlap the children so only the parent affects layout.
+
+Content must stay readable without JavaScript. Any pre-paint hiding rule needs a no-script path.
+
+## Initialization and recovery
+
+Apply the [initialization contract](initialization.md) whenever content starts hidden. It includes recovery ordering, indexing/performance limits, and failure checks.
+
+- Framework SSR and prerendered paths use the root `Layout` early script and independent deadline. Inspect emitted HTML and hydrate without pre-hydration split DOM changes. See [SSR and first paint](route-lifetime.md#ssr-and-first-paint).
+- SPA mode can send only the root shell and `HydrateFallback`; data/declarative client-only roots may send no page HTML. Test that actual fallback with scripts disabled/blocked. Apply initial writes before the first client commit paints, with rollback registered first.
+- Store visit recovery in the persistent transition boundary, keyed by the accepted location/owner. Keep it across React effect replay; a location update, revalidation, or late `clientLoader` result must not restart a recovered visit. Guard every `useGSAP` callback and promise before writes.
+- Invalidate the outgoing entrance when a blocker/link wrapper accepts navigation. Clean up on unmount and resolve the matching blocker/cover wait once. A stale timer cannot release a newer navigation, focus another route, or expose a pending outgoing tree.
+
+## Intro and settled
+
+Write reusable intro and outro builders only when behavior repeats. Each returns a timeline so the controller can compose, kill, reverse, or await it.
+
+- Make settled the source of truth. It must not depend on a paused timeline.
+- Clear temporary transform, visibility, transition, and `will-change` styles once settled.
+- Run intro completion and settled callbacks once, including under reduced motion.
+- On rapid state changes, replace, kill, or reverse the active timeline. Do not stack conflicting tweens.
+- Update assistive text and state immediately. Animate the visual, not the meaning.
+
+## Outro and end state
+
+Start the outro from current rendered values. Keep the node mounted, laid out, and owned until the timeline completes.
+
+- Reject duplicate outro requests or define which wins.
+- If an intro is running, reverse it only when the outro is its exact inverse. Otherwise kill it and build the outro from current values.
+- Disable pointer events when the visual can no longer support them, without removing the layout box.
+- Run end-state work once. Only then unmount, replace, hide, call `proceed()`, or hand off.
+- Kill the active timeline on cleanup, but do not erase state the route cover still needs.
+- No `display: none`, conditional removal, or DOM replacement before the outro completes.
+
+## Conditional show and hide
+
+React unmounts conditional content before an outro can play. Add a presence controller where that matters. It should:
+
+- Mount into initial state before the intro.
+- Stay mounted through settled and outro.
+- Keep the active timeline.
+- On re-show during an outro, reverse only if that gives the intended intro. Otherwise kill, set from current values, and build a fresh intro.
+- Remove the node only after the end-state callback.
+- Keep all five phases under reduced motion.
+
+When content in a shared region changes size, decide who owns the region's geometry before mounting either child. Overlap old and new inside a reserved wrapper, or animate a measured wrapper between known sizes. Do not let unmount then mount push surrounding content twice.
+
+Do not use presence for content that can simply appear, or for routes the transition boundary already manages.
+
+- Focus a panel when its intro completes, not when it mounts. An element at `visibility: hidden` refuses focus silently, and `autoAlpha: 0` is exactly that. Reduced motion jumps to completion synchronously, so the focus still lands.
+- When the outro ends and React is asked to unmount the children, clear only `will-change` from the wrapper. The unmount is queued, not immediate; clearing the collapsed height or visibility in the same tick flashes the content at full size for a frame.
+
+A modal route is a presence controller with the router as its unmount. Its close plays the outro and only then calls `navigate(-1)` or navigates to the parent. The parent route underneath is reused, not remounted, so everything the modal changed outside itself (scroll lock, key listener, focus, header state) is undone in the effect teardown, which also runs on a `POP` the user made. Treat opening it as an overlay navigation: no outro on the page underneath, no cover, no lock.
+
+## Reduced and responsive motion
+
+The OS preference is the default. Add an app override only if the product needs one.
+
+Every effect needs initial, settled, and end states under reduced motion. Do not just shorten a disorienting effect. Skip travel, rotation, scale, parallax, and scrambling unless essential. A zero-duration timeline or an immediate `set` still fires completion for anything that depends on it, including the callback that calls `proceed()`.
+
+Use `gsap.matchMedia()` for responsive and reduced-motion variants that must rebuild when conditions change. Revert it through the owning component. Do not nest a second GSAP context for the same setup.
+
+An app-level override is not a media query, so `matchMedia` cannot see it. Read it in a shared `prefersReducedMotion()` helper that every timeline consults, mirror it as a root attribute so CSS can key on it, and for setups that live inside a `matchMedia` block either gate the block on the store through a hook dependency or accept that the block follows the OS alone and say so.
+
+## Scroll
+
+Use `gsap-scrolltrigger` for the API; these rules cover route lifetime and measurement.
+
+- Create triggers in document order. Refresh after fonts, images, streamed regions, or dynamic content change layout.
+- Create triggers inside the owning context. Do not kill all triggers globally when one page leaves.
+- `<ScrollRestoration>` applies its position in a layout effect at commit, before effects run. Create triggers after that and refresh once more when the page settles if anything above the trigger changed height during the intro.
+- A `useGSAP` context revert calls `revert()` on each trigger with no arguments, which ScrollTrigger treats as `kill(true)`: the pin spacer is removed and the pinned element's original inline styles are restored. Leaving a route mid-pin needs no extra cleanup. `gsap.matchMedia()` created inside the same setup registers with that context and is reverted with it; it is not a second context for the same setup.
+- A `will-change` written from an `onToggle` callback is outside the context and survives its revert. Write it as a plain style and undo it in the matchMedia cleanup, or write it before the trigger is created.
+
+Under reduced motion, go straight from initial to settled without unnecessary triggers. Keep outro and end callbacks that control navigation or unmount.
+
+## Text
+
+Use SplitText when the effect needs per-character, word, or line targets.
+
+- For character splits, keep scoped `font-kerning: none; text-rendering: optimizeSpeed` before, during, and after revert, including reduced motion. Wrappers disrupt kerning and can cause horizontal snapping; use words/lines if natural kerning is essential. See [SplitText limitations](https://gsap.com/docs/v3/Plugins/SplitText/#tips--limitations).
+- Apparent weight changes can be clipped ink: check computed fonts/readiness, then mask edges, punctuation, and descenders. For confirmed clipping, add scoped mask padding with compensating negative margins; verify spacing and both hidden endpoints before trying compositing workarounds.
+- Keep reading accessible with the plugin's ARIA support. If text contains links or controls, keep an unsplit accessible version instead of hiding them.
+- Use word-aware wrapping for character animation. Use auto re-split for line animation that must survive width or font changes.
+- When line measurement needs fonts, bound the wait or auto-split preparation by the [initialization deadline](initialization.md#bound-initialization-not-choreography). Reserve settled height before splitting if wrappers could shift layout.
+- Keep a handle to the split's animation so re-split and cleanup can dispose of it. With `autoSplit`, build the animation inside `onSplit` and return it: the plugin records its playhead before a re-split and restores it on the new lines, and `revert()` undoes the tween's values. With line splitting and `autoSplit`, the plugin waits for fonts itself; no separate font wait is needed.
+- A split heading inside a page takes its timing from the page phase, not its own clock. Hold at initial while the page is initial, rise when the page enters, drop when it leaves. Give it its own pre-paint rule rather than marking it as a page target, or the page's stagger and the split's rise fight over one element.
+- Revert splits on interruption and unmount. Do not leave wrapper spans in stale content.
+
+Revert when the owning phase no longer needs the split. Compare glyph appearance, character positions, wrapping, and height immediately before/after cleanup at desktop/mobile widths, with reduced motion and interruption. Stable boxes alone do not prove stable ink; distinguish subpixel rounding from visible movement.
+
+## Interaction
+
+Pointer motion needs keyboard parity. Pair hover with focus on interactive elements. Do not animate a non-interactive element like a control.
+
+Keep gestures bounded, provide a non-gesture path, and dispose of interaction plugins with their owner. See `gsap-plugins` for Draggable, Observer, and Flip APIs.
+
+## Layout stability and performance
+
+- Prefer `x`, `y`, scale, rotation, and `autoAlpha` over layout properties.
+- Use `clip-path`, filters, and variable-font axes deliberately; they can cost paint or shift layout.
+- Batch reads before writes.
+- The stable wrapper's box should not jump between mount, initial, settled, outro, end, and unmount. Intentional transforms move pixels; layout boxes do not.
+- Set `will-change` just before animating and clear it after. Do not promote everything.
+- Do not animate hundreds of nodes at once. Reduce targets, batch, or virtualize.
+- Do not add a CSS transition on a property GSAP controls.

package/skills/ui/gsap-react-router/references/react-router-navigation.md

@@ -0,0 +1,165 @@
+# React Router navigation
+
+Read this when changing route-level motion or navigation.
+
+## Router APIs
+
+Check the installed types before using these. Minimum versions in parentheses; modes in brackets where an API is not in all three.
+
+- `<Link to replace state preventScrollReset viewTransition reloadDocument mask onClick>`: a real `<a>`. Its `onClick` runs before the router's handler, and `event.preventDefault()` there cancels that one navigation while the `href`, prefetch handlers, and `discover` stay intact. `prefetch` and `discover` exist only in framework mode; `preventScrollReset` and `viewTransition` only in framework and data mode.
+- `<NavLink>`: `Link` plus `isActive`, `isPending` [framework, data], and `isTransitioning` (only when the link sets `viewTransition`) as render props, and `active`, `pending`, `transitioning` classes.
+- `useNavigate()`: `navigate(to, { replace, state, relative, preventScrollReset, viewTransition, flushSync, mask })` or `navigate(delta)`. In framework and data mode it returns a promise that resolves when the navigation completes; in declarative mode it returns nothing.
+- `useBlocker(shouldBlock)` (6.19) [framework, data]: the only hold on a navigation. See below.
+- `useNavigation()` [framework, data]: `state` is `idle`, `loading`, or `submitting`; `location` is the destination while pending; `formMethod`, `formAction`, and `formData` describe a submission. It does not expose `historyAction`.
+- `useLocation()`: `pathname`, `search`, `hash`, `state`, `key`. `key` changes on every navigation, including one to the same URL, and is `default` on the first document load.
+- `useNavigationType()`: `POP`, `PUSH`, or `REPLACE` for how the current location was reached.
+- `useViewTransitionState(to)` (6.27) [framework, data]: true while a view transition runs and `to` matches either side of it by pathname.
+- `<ScrollRestoration getKey>` [framework, data]: render once, before `<Scripts>`.
+- `useBeforeUnload(cb)`: the document unload. It cannot be delayed.
+- `<Form>` GET submissions, `<Navigate>`, and `redirect` from a loader or action are navigations. `useFetcher` is not: `navigation.state` stays `idle` and the fetcher carries its own `state`.
+
+Keep `<Link>` for every internal link so `href`, prefetching, and `NavLink` state keep working. Wrap it in a project-local transition-aware Link only when the outro must start on click without a blocker.
+
+## Page lifecycle
+
+**mount → initial state → intro → settled → outro → end state → unmount**
+
+1. **Initial state.** The incoming route has committed or been reused in place, its final size is reserved, measurements are taken, and start values are set before anything is shown.
+2. **Intro.** Reveal the route and play one timeline to the final layout.
+3. **Settled.** Clear temporary styles. CSS owns the page. Everything is interactive.
+4. **Outro.** The outgoing route stays mounted while the router waits on the blocker, or before the navigation is issued. Stop competing component animations and play one outro timeline.
+5. **End state.** Finalize outgoing targets and run completion once while still mounted. Call `proceed()` or `navigate`. The outgoing tree goes away when the incoming one commits.
+
+A controller may track internal states like `waiting` or `preparing`, but they serve these five phases.
+
+Store the phase in React state or a ref owned by the boundary and render it as a data attribute on the route container, so CSS and tests can read it.
+
+## Outro before navigation: the blocker
+
+There is no leave hook. `useBlocker` takes a boolean or `({ currentLocation, nextLocation, historyAction }) => boolean` and returns a blocker with `state` (`unblocked`, `blocked`, `proceeding`), `location`, `proceed()`, and `reset()`.
+
+- The router checks the blocker before it touches history or runs a loader. While blocked the URL is unchanged, nothing has been fetched, and the old route is live and interactive. This is where the outro runs.
+- `proceed()` moves the blocker to `proceeding` and re-issues the same navigation with the same options: `replace`, `state`, `preventScrollReset`, `viewTransition`, `mask`. The router skips the blocker function while `proceeding`, so no app-side guard is needed. Every blocker returns to `unblocked` when the navigation completes. From 8.2 a revalidation no longer clears a blocked state.
+- The pattern: return true for every non-`POP` navigation whose destination is a different screen; an effect on `blocker.state === "blocked"` starts the outro toward `blocker.location`; the end callback calls `proceed()`. Call `reset()` for a destination the design rejects, such as the current pathname.
+- A router supports one blocker. Registering a second logs a warning and the last one wins, and a blocker inside a route component is deleted when that route unmounts. Register it once in the boundary that outlives every navigation.
+- Not covered: the initial document load, hard reloads, cross-origin URLs, `reloadDocument` links, and document unload. Those are `gsap-vanilla` territory or cannot be delayed at all. A redirect returned by a loader or action happens inside a navigation that already passed the blocker; treat its destination as unrequested.
+- `POP` is blockable but costly. The router restores the URL at once with a reverse `history.go`, which flashes the destination in the address bar, and `proceed()` repeats the pop after that restore. A pop onto history the router did not create cannot be blocked at all. Return false for `historyAction === "POP"` and give back and forward the intro-only path.
+- Two rapid clicks: the second navigation runs the blocker function again. If it blocks, the blocker retargets: `blocker.location` and `proceed` now belong to the second destination and the hook returns a new object, so the effect runs again. Decide which wins. Last click wins by letting the outro keep running and calling the current blocker's `proceed` at end state. First click wins by capturing `proceed` when the outro starts and calling that one. That capture is safe because each `proceed` closes over its own destination and options and re-issues that navigation whatever `blocker.location` says by then. Never start a second outro.
+- Do not gate the blocker function on your own lock. Returning `false` while an outro runs looks like "one navigation at a time" but does the opposite: the router runs the function for the second click, `false` lets that navigation proceed under the running outro, and the second destination wins. Keep returning `true` for every requested navigation and enforce the lock by choosing which `proceed` to call.
+- Type the function as `BlockerFunction` when wrapping it in `useCallback`, or its destructured parameters lose their contextual type and fail strict type checks.
+- The cost of the blocker path: loaders run only after `proceed()`, so the end state sits on screen until the destination loads. Set `prefetch="intent"` on links in framework mode so data and modules are already cached, and cover the route container from end state until the incoming route is prepared. `useNavigation().state` is `loading` across the gap and `location.key` changes at commit.
+
+A killed timeline never resolves its promise. Wrap `await` in a helper that also resolves on `onInterrupt` and returns whether the timeline completed, so an interrupted outro still reaches `proceed()` or `reset()`. A blocked navigation whose outro never finishes leaves the app stuck on the old page with the link apparently dead.
+
+GSAP's ticker stops in a hidden tab. Race the outro against a timeout so a click from a background tab still navigates.
+
+## Outro before navigation: the transition-aware Link
+
+This works in every mode and is the only option in declarative mode. Wrap `<Link>` or `<NavLink>`, forward unrelated props, and pass an `onClick` that:
+
+- Calls the caller's `onClick` first and stops if it prevented default.
+- Leaves native the clicks the router itself leaves native: non-primary buttons, modifier keys, a `target` other than `_self`, external URLs, `reloadDocument`, and hash-only or same-location links.
+- Calls `event.preventDefault()`, runs the outro on the live page, then calls `navigate(to, { replace, state, preventScrollReset, viewTransition, mask, relative })` with the Link's own props.
+
+The `href`, prefetch handlers, `discover`, and `NavLink` state survive because the anchor is still React Router's. What is lost: the automatic `replace` when the URL is unchanged (compute it), `useTransitions` wrapping (call `navigate` inside `startTransition` and return its promise), and coverage: `<Form>`, `<Navigate>`, redirects, and `navigate` calls elsewhere bypass the wrapper. Add a navigate helper for buttons. If a blocker also exists, the re-issued `navigate` is a fresh navigation the blocker will see; gate the blocker function with a ref the helper sets before navigating and clears after.
+
+A custom `<a>` built on `useLinkClickHandler` also works but drops prefetch, `discover`, and `NavLink` state. Use a document-level click listener only when replacing existing links is impractical; it is a retrofit, not the default.
+
+The link path starts the outro on click and holds the URL like the blocker does, and has the same swap gap, since loaders run after the outro.
+
+## One navigation at a time
+
+- Hold a lock from the first accepted destination through outro, cover, and commit. With a blocker the router retargets on a second click; without one the wrapper must ignore or record later clicks itself.
+- Release the lock when the incoming intro starts, not when it ends: a click during the intro must kill the intro and start the outro from current values, and holding the lock through the intro leaves every link dead until it finishes.
+- A `POP` during an outro is not blocked. Kill the outro so its promise settles, drop the pending destination, and let the history navigation take the intro-only path.
+- Repeated clicks must not create competing navigations or timelines.
+
+## Two kinds of navigation
+
+- **Requested** (a link the boundary intercepted, the navigate helper, a blocked `Link`, `Form`, or `navigate`): the full lifecycle. The outgoing page plays its outro on live DOM, the router loads, the incoming page prepares behind the cover and plays its intro.
+- **Unrequested** (`POP`, redirects, `<Navigate>` and `navigate` calls that bypass the helper, a fetcher revalidation that replaces content): the tree changes without an outro. Run initial state and intro only, without travel. Keep the shell stable. Optionally give these a `viewTransition` crossfade so the swap is not a hard cut.
+
+Do not keep a copy of the old React tree to fake an outro for unrequested navigation. Support fewer outro paths instead.
+
+## Back and forward
+
+- `useNavigationType()` reports `POP` after commit. A blocker function sees `historyAction === "POP"` before it. Neither runs an outro.
+- `<ScrollRestoration>` restores the saved position in a layout effect at commit. A page's `useGSAP` layout effect runs in the same commit, so write initial state there but defer the step from `initial` to `intro` by a microtask; the intro then starts after restoration. Refresh ScrollTrigger at the same point, and reveal-on-scroll targets above the restored position must not stay hidden.
+- If the pair of pathnames was navigated with `viewTransition`, the router remembers it in session storage and replays the transition on the pop with the roles reversed. Design the intro-only path to look right under that crossfade or morph.
+- A route reached by back that was reused rather than remounted still holds settled values. Write initial state explicitly.
+- A bfcache restore runs no router code except re-enabling manual scroll restoration. Leave the page readable whenever it can be unloaded.
+
+## Overlapping the old and new page
+
+The router renders one route tree. An effect that needs both on screen at once has two honest options:
+
+- **The browser.** A `viewTransition` navigation snapshots both trees. `useViewTransitionState` or a class on the root gives the CSS the direction and the names.
+- **A DOM snapshot.** After the outgoing page reaches end state and before `proceed()`, deep-clone the route container into a fixed layer: strip ids and every data attribute your lifecycle selects on, set `inert` and `aria-hidden`, position it at the container's document offset shifted by the scroll. Proceed with no cover. The incoming intro reveals the new page over the clone and removes it at settle, on a ready timeout, on `POP`, and at the start of any new navigation.
+
+The clone is a static picture, not a React tree: nothing in it updates, nothing in it is reachable, and it is gone before the page is interactive.
+
+## The swap gap and initial state
+
+Between end state and the incoming intro, the old page sits at end state while loaders run and then unmounts as the new one commits. Cover the route container during that gap, inside the element that wraps route content and never fixed to the viewport, or the header and footer flash on every click. Uncover only after every incoming target has its size and start styles.
+
+The initial state must occupy the same layout as the settled state. Prefer `autoAlpha` and transforms. Size images, media, masks, and async regions before the intro. If the effect changes geometry, reserve the settled size with a wrapper or measure both states before writing either.
+
+The route container owns geometry during the swap: hold a stable height while trees exchange, or animate it between measured sizes on purpose; reserve scrollbar space if route height changes would shift it.
+
+Server-rendered and prerendered HTML paints before hydration. Do not hide it unconditionally. If initial state must hide before first paint:
+
+- Put an inline script first in `body` in the root route's `Layout` export, which wraps the app, `HydrateFallback`, and `ErrorBoundary` alike, that marks `html` as JavaScript-active. Add `suppressHydrationWarning` to `html`, since the server HTML does not carry the attribute.
+- Add a CSS rule that hides intro targets only under that mark and only while the root is in its initial phase.
+- Skip the mark under `prefers-reduced-motion` so the page paints settled.
+- Keep the early failsafe active until preparation succeeds and the intro can run, not merely until a controller registers. Register rollback before setup, preserve the original deadline, and take the settled path after recovery. Follow [Initialization and recovery](initialization.md).
+- Register rollback before setup. Advance the phase only after start values and completion handlers are ready, in the same turn that starts the intro.
+- Keep content readable without JavaScript. Omitting `<Scripts>` is React Router's no-JavaScript mode, and the page must still read there.
+- Keep the swap cover separate from the first-paint rule.
+
+`ssr: false`, data mode, and declarative mode without server rendering paint nothing before React. `useGSAP` runs in a layout effect on the client, so explicit `set` calls there land before the first paint and no pre-paint rule is needed. A `HydrateFallback` is a skeleton that appears only on the initial load; give it the settled geometry and let the route enter through the unrequested path when its data lands.
+
+Do not rely only on inline styles: a context revert clears them during a swap. The cover must survive cleanup until the new tree is ready.
+
+## Pending state, loaders, and streaming
+
+- The router awaits loaders before rendering the next route, so during `loading` the outgoing page is mounted and interactive. Pending UI belongs there: a global indicator from `useNavigation().location`, or `isPending` on the `NavLink` that was clicked. Do not start the outro from `navigation.state`; by then the navigation is already committed to happen.
+- A promise returned un-awaited from a loader streams. `<Await>` inside `<Suspense>`, or React 19 `use`, renders it when it lands, and after `streamTimeout` it rejects. Treat each streamed region as a component with its own controller: explicit initial state on arrival, a short intro, settled, cleanup. Reserve its block size so arrival moves nothing. Query outro targets when the outro is built, not at setup, so content that streamed in after setup leaves with the page.
+- `clientLoader` runs in the browser on navigation and, with `hydrate`, on the initial load behind `HydrateFallback`. Neither changes the lifecycle; the route still commits once its data is ready.
+
+## Settled state, focus, and scroll
+
+On intro completion, mark settled once, clear temporary transforms, visibility, and `will-change`, and do not keep the page inside an active timeline to hold values.
+
+- React Router moves no focus and announces nothing on a route change. If navigation left focus on `body`, move it to the route container or main heading after the intro, with `tabIndex={-1}` and a visible focus style. Do not steal focus from an active control. Add a live region if the product needs announcements.
+- `<ScrollRestoration>` runs in a layout effect at commit: a saved position on `POP`, the hash target when there is one, nothing when `preventScrollReset` was set, otherwise the top. Submissions and revalidations leave scroll alone. It keys on `location.key` by default; `getKey` with `pathname` restores across repeat visits to the same path.
+- Keep that behavior. Do not add a second scroll reset unless the product needs it. Refresh ScrollTrigger after restoration, and after the intro if anything above a trigger changed height.
+- Pass `preventScrollReset` through the transition-aware Link and helper; `proceed()` already carries it.
+
+## Combining with View Transitions
+
+Set `viewTransition` on the Link, Form, or `navigate` call. `HydratedRouter` supports it; in data mode `RouterProvider` must come from `react-router/dom`, which wires `flushSync`, or `useViewTransitionState` throws. The router calls `document.startViewTransition` around the state update at commit and records the pathname pair so a later pop replays it. GSAP runs before it, outro on live DOM before `proceed()`, and after it, intro on the new tree once the transition finishes. Keep their jobs separate:
+
+- One engine per element per transition. A named morph and a GSAP tween on the same node fight, and a GSAP end state becomes the old snapshot. Leave a shared element lit at end state or skip the view transition for that navigation.
+- Name only elements that morph. `useViewTransitionState(to)` and the `NavLink` `isTransitioning` render prop are true only while that pair transitions, so use them to set `viewTransitionName` and clear it after.
+- The router does not expose the `ViewTransition` object. `useViewTransitionState` returns to false when the transition finishes; start GSAP on elements the browser touched from an effect on that flip, or keep them out of the intro.
+- A new navigation during a transition skips the active one and starts another. The GSAP lock must survive that.
+- `proceed()` keeps `viewTransition`, so the blocker path and the browser path compose: GSAP outro, then proceed, then the browser morphs at commit.
+- Add `::view-transition { pointer-events: none }` so a running transition does not swallow clicks.
+- Where `startViewTransition` is missing the router updates plainly. Every GSAP path must run without it.
+- Reduced motion covers both: zero view transition durations in CSS and take the GSAP reduced path.
+
+## Cases to design for
+
+- Navigation requested mid-intro.
+- Two destinations clicked quickly, with the blocker retargeting.
+- Back or forward with no outro, including mid-outro.
+- A route reused with new params, and a search-param-only change.
+- A `Form` GET, `<Navigate>`, or `navigate` call that bypasses the wrapper.
+- A hash-only link, which is same-page.
+- A redirect from a loader or action.
+- An external link, a `reloadDocument` link, and a document unload.
+- Split text or scroll plugins that changed the DOM before cleanup.
+- Streamed data arriving after the intro.
+- React development double-mounting the boundary.
+
+Each case must end on one visible, interactive route with stable layout and no stale inline styles.

package/skills/ui/gsap-react-router/references/route-lifetime.md

@@ -0,0 +1,74 @@
+# Route lifetime
+
+Read this to know which router you have, when a route mounts, updates in place, or unmounts, and how server rendering changes the first paint.
+
+## Modes
+
+Three top-level APIs, each adding features to the last. Check which one the project uses before reaching for a hook.
+
+- **Declarative**: `<BrowserRouter>` with `<Routes>` and `<Route>`. `Link`, `NavLink`, `useNavigate` (returns nothing), `useLocation`, `useNavigationType`, `useLinkClickHandler`, `useBeforeUnload`. No loaders, no `useNavigation`, no `useBlocker`, no `viewTransition`, no `<ScrollRestoration>`. The transition-aware Link is the only way to run an outro before navigation, and the browser's own scroll restoration applies.
+- **Data**: `createBrowserRouter` with `<RouterProvider>` from `react-router/dom`. Adds `loader`, `action`, `useNavigation`, `useBlocker`, `useFetcher`, `<Await>`, `<ScrollRestoration>`, `viewTransition`, `preventScrollReset`. No server rendering unless the project built its own.
+- **Framework**: the Vite plugin, `routes.ts`, route modules with `loader`, `clientLoader`, `HydrateFallback`, `Layout`, `links`, `meta`, and `<HydratedRouter>` in `entry.client.tsx`. Adds `<Link prefetch discover>`, `<Links>`, `<Scripts>`, `middleware`, SSR by default, `prerender`, and SPA mode through `ssr: false`.
+
+A Remix 2 app is framework mode with `@remix-run/react` names. A React Router 6.4+ data router is data mode with `unstable_` prefixes on older versions.
+
+## Reuse versus remount
+
+The router renders matched routes as nested elements through `<Outlet>`. React reconciles by type and position, so a navigation swaps only the levels whose route changed.
+
+- Same route, new params or search params: the route element stays mounted. `params` and `loaderData` change; `useGSAP` with no dependencies does not run again. Neither does a mount intro.
+- Different route under the same layouts: the leaf unmounts and the new one mounts. Shared layouts stay, with their state, timelines, and listeners.
+- The root route persists for the life of the document. Under `Layout`, switching between the app, `HydrateFallback`, and `ErrorBoundary` keeps the document shell mounted.
+- A revalidation reruns loaders and updates props. Nothing remounts.
+
+So a page intro tied to mount plays once per mount, not once per visit. Two fixes:
+
+- **A `pathname` dependency in the page, the default for GSAP.** Give `useGSAP` `dependencies: [pathname]` and `revertOnUpdate: true`, or run the lifecycle from an effect keyed on `useLocation().pathname`. The page keeps its state, scroll, and form values, and the DOM already holds settled values, so kill the previous timeline first and write initial state with `set` or `fromTo`, never a `from` tween that trusts a fresh node. Compare pathnames, adding params only when they mean a different screen, and skip search-only changes.
+- **`<Outlet key={location.pathname} />` in the layout.** Every pathname change destroys and recreates the subtree, so mount intros replay and page state is discarded. Key on `location.key` to remount on every navigation including the same URL. Use it when the page must be re-instantiated anyway. It also discards inner scroll positions and pending fetchers in the subtree.
+
+Do not key the root route or a layout that holds chrome on `location`. That remounts the shell and its chrome on every navigation.
+
+## Layouts, Outlet, and the boundary
+
+The root route mounts once per document and outlives every client-side navigation. That makes it the home of the route transition boundary: one stable route container around `<Outlet>`, the blocker, the phase, and the cover. When only part of the screen transitions, put the boundary in the layout route that wraps that part; its `<Outlet>` is the changing region and everything above it persists.
+
+Pages register intro and outro builders with the boundary through context and unregister in their teardown. The boundary calls the outgoing page's outro when the blocker blocks or the wrapper intercepts, and the incoming page's intro when the new `location.key` commits and its targets are ready. A page that registers nothing gets the container-level default.
+
+The outro belongs to the leaving leaf, not the layout. A layout that stays mounted has nothing to leave; a layout that also unmounts, because the navigation crosses out of it, leaves with its leaf and should register its own outro if it has one.
+
+## React lifecycle for GSAP
+
+`gsap-react` covers `useGSAP`, `scope`, `contextSafe`, and cleanup. Points that matter under a router:
+
+- Effects run after commit. `useGSAP` uses a layout effect on the client, so initial `set` calls inside it land before paint on a client-rendered tree. On a server-rendered tree the HTML has already painted; see [SSR and first paint](#ssr-and-first-paint).
+- React development runs setup, cleanup, and setup again on the same node. Write setup that is correct twice: explicit initial writes, cleanup that leaves the node readable, and a ref guard for work that should happen once per visit.
+- Reading `useLocation()`, `useNavigation()`, or `loaderData` inside a `useGSAP` with those as dependencies rebuilds the context on every change, including search-param and pending-state changes. Depend on `pathname` alone, or read the rest through refs.
+- Store the phase in state or a ref and render it as a data attribute. Do not infer it from opacity or DOM presence.
+- Never call another component's `contextSafe` function synchronously from inside a `useGSAP` callback; the inner context becomes a child of the outer one and dies with its next revert. Hand off through a microtask, an effect, or an event.
+
+## SSR and first paint
+
+- Framework mode with `ssr: true`, the default, and any `prerender` path send full HTML. The page paints before hydration and before any effect. Hiding intro targets is only sanctioned through the root-attribute rule in [The swap gap and initial state](react-router-navigation.md#the-swap-gap-and-initial-state): an inline script first in `body` in the root `Layout`, `suppressHydrationWarning` on `html`, a no-JavaScript path, and a reduced-motion skip.
+- Route modules are evaluated on the server. Importing GSAP is harmless; calling it is not. Keep registration in a `*.client.ts` module imported for its side effect from the root route, and every GSAP call inside `useGSAP`, an effect, or an event handler. Do not re-export `gsap` or `useGSAP` from the `.client` module: its exports are `undefined` on the server, so a component that imports the hook from there throws during server rendering. Import both from the packages.
+- `ssr: false` prerenders only the root route and its `HydrateFallback` into `index.html`. Route content renders after hydration, so it can wait for mount and needs no pre-paint rule. The root shell still paints early; keep chrome motion out of it or treat the shell like a server-rendered page.
+- `HydrateFallback` shows only on the initial document load while a `clientLoader` with `hydrate` runs or a route has no server loader. It never appears on client navigation. Give it the settled geometry so hydration moves nothing.
+- Data and declarative mode without a server render paint nothing until React commits, so mount, `set`, then paint holds without any rule.
+- `<Scripts>` omitted is the no-JavaScript build. Everything must read there.
+
+## Conditional content and modals
+
+React removes conditional content synchronously. For GSAP-driven show and hide, keep the node mounted with a presence controller: render while `visible || leaving`, play the outro, and clear `leaving` from the end callback. See [Conditional show and hide](motion-system.md#conditional-show-and-hide).
+
+A modal opened by a route is a presence controller with the router as its unmount. Common shapes:
+
+- A nested route rendered into the parent's `<Outlet>`, so the parent stays mounted underneath. Close by playing the outro, then `navigate(-1)` or `navigate` to the parent path. The parent's own intro must not replay: the parent is reused, and the boundary should recognize the modal path as an overlay navigation with no outro, no cover, and no lock.
+- A `Link mask` (7.15) that shows one URL while routing to another, for a gallery that opens a detail in place. The underlying route stays; the modal is conditional content keyed on the real location.
+
+Undo scroll locks, key listeners, and focus in the modal's effect teardown, which also covers a `POP` you did not initiate. A blocker in the modal is deleted when it unmounts; do not put the page blocker there.
+
+## Fetchers, revalidation, and middleware
+
+- `useFetcher` loads or submits without a navigation. `navigation.state` stays `idle`, `useBlocker` never fires, and a `Form` submission through a fetcher does not leave the page. Content a fetcher replaces is a component lifecycle, not a page one.
+- A navigation `Form` POST is a navigation with `state === "submitting"`, then `loading` while loaders revalidate, then a commit that may be a redirect. The outgoing page is still mounted through all of it. Block it like a link if the design wants an outro; the blocker sees `nextLocation` and the submission.
+- Revalidation after an action reruns every active loader and updates props in place. Nothing remounts and no outro runs. Regions whose content changes are components; give them explicit initial state on new data and keep their block size.
+- `middleware` and `clientMiddleware` (7.9 behind `future.v8_middleware`, always on in 8) run around loaders and actions inside the data phase of a navigation. They can redirect or set context; they cannot hold the DOM or wait for an animation. They are not a transition hook.

package/skills/ui/gsap-react-router/references/verification.md

@@ -0,0 +1,42 @@
+# Verification
+
+Check in proportion to what changed. Do not turn a focused animation task into a full audit.
+
+## Always
+
+- Run the repo's type, lint, format, and test commands where they exist. In framework mode run `react-router typegen` before `tsc` if the project's typecheck script does not already, so route types are current.
+- Confirm settled content is visible, interactive, and free of leftover GSAP inline styles.
+- Confirm timelines, triggers, listeners, and plugin DOM changes are cleaned up.
+- Test reduced motion when the change has a reduced-motion branch, including that `proceed()` still runs.
+
+## Initially hidden content
+
+Run the [failure verification matrix](initialization.md#failure-verification) when adding or changing hiding, preparation, or recovery. It covers disabled JavaScript, a blocked bundle after the marker, throws before/after styles and splits, stalled fonts/media, late initialization, no-flash success, reduced motion, and interruption/repeated setup. Assert text and native links, not opacity alone. Include shell/footer and intentionally hidden content.
+
+Use this framework's [integration rules](motion-system.md#initialization-and-recovery) for rendering and navigation expectations. Measure document-load LCP separately from transitions when first-load behavior changes; report measured results and untested paths.
+
+## Runtime changes
+
+Check the changed lifecycle in a real browser when practical:
+
+- Initial state is applied before reveal, including on a server-rendered or prerendered first load.
+- Intro ends in one settled state.
+- Outro keeps the route mounted until completion runs, and the URL does not change until then.
+- Rapid or interrupted input ends in one coherent state.
+- Layout boxes do not jump.
+
+For route navigation, test the paths the change affects: an ordinary internal link, a link to the same route with new params, back and forward, and a rapid double navigation. Confirm URL, visible route, focus, history, and scroll agree. Confirm that no blocker is left in a `blocked` state with the page apparently dead, and that a `Form`, `<Navigate>`, or `navigate` call that bypasses the wrapper still lands on a readable page.
+
+When both `viewTransition` and GSAP are involved, confirm no element is animated by both, that a pop replaying a recorded transition still looks right, and that clicks land during a running transition.
+
+For streamed regions, throttle the network so `<Await>` resolves after the page intro and confirm the region enters on its own and leaves with the page.
+
+For conditional components and modal routes, test show, hide, one interruption, and a `POP` close. Confirm unmount happens after the outro.
+
+Use visibility-aware selectors in browser tests, such as role queries or an explicit visible filter, since a covered or `inert` route is still in the DOM.
+
+## Builds and wider checks
+
+Run a production build for changes to routes, `react-router.config.ts`, dependencies, server and client boundaries, `.client` modules, or anything release-facing. In framework mode the server build evaluates route modules; a GSAP call outside an effect fails there, not in dev. Run wider browser, accessibility, responsive, streaming, and performance checks only when the change touches them or the user asks for a full audit.
+
+Report which checks ran and which could not. Do not claim runtime behavior was verified when only static review was possible.