What problem does it solve? Navigations in a React Server Components app remount content and flash loading skeletons by default, with no animated cross-fade between pages. This Skill wires React's startTransition driving and <ViewTransition> boundaries into the rango route tree so page changes hold stale content and morph smoothly. ## Core Features & Use Cases - Layout and route transitions: Apply transition() inside layout() or path() entries to cross-fade outlet content while keeping shell chrome (navbars, sidebars, modal slots) outside the animated subtree. - Direction-aware and conditional transitions: Key ViewTransitionClass objects by "navigation" or "navigation-back" for directional slides, and gate holds per request with a server-side when predicate reading navigation source, action metadata, and request context. - Boundary opt-out: Set viewTransition: false per segment or globally via createRouter to keep startTransition driving and content-hold while placing your own named <ViewTransition> elements. - Use Case: A gallery app fades between feed pages through a shared layout while intercept modals open in a parallel slot without firing the underlying page transition, and form actions inside the modal revalidate without remounting it. ## Quick Start Add a fade transition to the routes under my shop layout in @rangojs/router so navigating between pages cross-fades the outlet content.
