Define intercept routes that render modals during soft navigation in @rangojs/router.
npx skills add https://github.com/rangojs/rango --skill intercept-rangojs
Please help me install this Agent Skill. Skill: intercept Source: https://github.com/rangojs/rango/tree/main/packages/rangojs-router/skills/intercept Command: npx skills add https://github.com/rangojs/rango --skill intercept-rangojs
@modal) with intercept(), including layouts, loaders, loading states, and middleware. - Conditional interception: Use the when config to activate intercepts only for specific navigation contexts, with single predicates or AND-combined arrays. - Framework integration: Covers middleware chains, revalidation contracts for shared ctx.set() data, view transition interaction, and build-time prerendering of intercept handlers. - Use Case: A shop app where clicking a product link opens a <ProductModal /> overlay on top of the listing page, while visiting /shop/product/:slug directly renders the full product page. ## Quick Start Ask the AI to add an intercept route that opens the product detail page in a modal slot when navigating from the shop index in @rangojs/router.High-intent search queries and answers about installing and using this skill.
Use intercept() inside your urls() tree, passing the slot name, the target route name, and the modal component. During soft navigation the modal renders in the parallel slot while the background page is preserved; direct URL visits render the full page.
Pass a when config as the fourth argument to intercept(). It receives { from, to, params, segments } and activates the intercept only when the predicate returns true. Pass an array of predicates for AND logic where all must match.
Parallel slots always render alongside the page, such as sidebars or multi-column layouts. Intercepts only swap in a different component during soft navigation; hard navigation shows the normal route. Use parallel() for permanent slots and intercept() for modal-style overlays.
Yes. When the target route uses Prerender, the intercept handler is also resolved at build time and stored under an /i variant key. Loaders inside the intercept still run fresh at request time, and when conditions are evaluated at runtime.
Partial action revalidation only recomputes segments that actually revalidate. Attach matching named revalidate contracts to both the outer producer layout and the intercept consumer so both rerun together when shared ctx.set() data changes.
atman-33Documents React Router v7 file-based routing conventions including nested and dynamic routes.
RomualdPImplement parallel routes-based modals in Next.js layouts.
typeclawConsolidate observations into persistent memory streams and retrieve past experiences.
project-axDebug MITM proxy issues including domain allowlists and HTTPS connectivity.