Define parallel routes rendering multiple named slots simultaneously in @rangojs/router layouts.
npx skills add https://github.com/rangojs/rango --skill parallel-rangojs
Please help me install this Agent Skill. Skill: parallel Source: https://github.com/rangojs/rango/tree/main/packages/rangojs-router/skills/parallel Command: npx skills add https://github.com/rangojs/rango --skill parallel-rangojs
parallel() and <ParallelOutlet name="@slot" />, with last-definition-wins override semantics for composition. - Independent streaming and loaders: Attach loader() and loading() per slot so slow regions stream in without blocking the rest of the page. - Scoped revalidation and context: Control when slots refresh with revalidate() contracts, read parent handler data via ctx.get(), and push metadata through UI-less @meta slots. - Use Case: Build a shop layout where a promo banner, category sidebar, cart preview, and notification panel each load their own data and revalidate only when relevant actions occur, while the main outlet renders the current route. ## Quick Start Ask the AI to add a parallel route with a @sidebar slot and its own loader and skeleton to a layout in your @rangojs/router route tree.High-intent search queries and answers about installing and using this skill.
Call parallel() inside a layout or path with an object mapping slot names to handlers, then render each slot with <ParallelOutlet name="@slot" /> in the layout component. Each slot renders alongside the main <Outlet /> content at the same URL.
A parallel slot with loading() becomes an independent streaming unit: its skeleton renders immediately while its loader resolves in the background. Without loading(), the slot's loaders block the parent layout's rendering until data is ready.
Use parallel() when slots always render alongside the page, such as sidebars or dashboards. Use intercept() for modals or slide-overs that appear only on soft navigation but show a full page on hard navigation.
Slots under a standalone layout are skipped on actions by default; add a revalidate() callback such as ctx.isAction(CartActions) to opt in. Slots under a path() revalidate together with their route entry automatically.
Yes, slots read parent handler or layout data via ctx.get() because handlers execute before their parallels. Layout-level parallels see layout data only, while parallels inside a path see both layout and path handler data.
Parallel slots accept only revalidate, loader, loading, errorBoundary, notFoundBoundary, and transition via handler.use; middleware and layout are not allowed. Slot-level transition does not apply a ViewTransition wrapper at render time.
lespacemanCapture and manage dynamic URL segments in TanStack Router routes.
khiwnitiImplements Next.js App Router patterns including route groups, dynamic routes, and middleware.
TanStackConfigure notFound() and errorComponent for TanStack Router routes.
RomualdPImplement parallel routes-based modals in Next.js layouts.