Define layout routes that wrap child routes with persistent UI shells in @rangojs/router.
npx skills add https://github.com/rangojs/rango --skill layout-rangojs
Please help me install this Agent Skill. Skill: layout Source: https://github.com/rangojs/rango/tree/main/packages/rangojs-router/skills/layout Command: npx skills add https://github.com/rangojs/rango --skill layout-rangojs
layout() inside urls(). - Outlets and parallel routes: Render child content with <Outlet /> and named slots via <ParallelOutlet /> for dashboards and sidebars. - Orphan layouts and data flow: Attach layouts inside path() entries to read handler data via ctx.get() with safe action revalidation defaults. - Revalidation contracts: Control which segments re-render after Server Actions using revalidate() predicates shared between producer and consumer segments. - Use Case: Build a shop section where a persistent nav and cart sidebar wrap product, cart, and index pages, with the cart loader revalidating only when cart actions run. ## Quick Start Ask the AI to create a layout route in @rangojs/router that wraps your shop pages with a shared navigation shell and an Outlet for child content.High-intent search queries and answers about installing and using this skill.
Use layout() inside the urls() callback, passing a JSX element or component and a children callback containing path() entries. Child routes render through the <Outlet /> component imported from @rangojs/router/client.
Import Outlet from @rangojs/router/client and place it where child routes should render inside the layout component. For parallel routes, use ParallelOutlet with a name prop matching the parallel slot key.
Yes, an orphan layout declared as a child of path() can call ctx.get() to read values the route handler set with ctx.set(). The handler always executes before its children, and the whole entry revalidates together on actions by default.
Standalone layout() entries skip revalidation on actions by default because parent-chain segments are not re-run. Add a revalidate() predicate inside the layout's children, such as one checking ctx.isAction(), to opt the segment in.
Define a named revalidation function, for example one returning ctx.isAction(addToCart) || undefined, and reuse it in revalidate() calls on both the producer and consumer segments. This keeps cross-entry data dependencies in sync.
Yes, attach a .use property to the layout handler returning middleware(), parallel(), or include() items. These defaults merge with any explicit use() declared at the mount site, with handler defaults applied first.
guillempucheConstruct programmatic route trees for TanStack Router with virtual and physical routes.
lgerard314Coordinates TanStack Query cache updates with Next.js server actions and cross-tab messaging.
RomualdPImplement parallel routes-based modals in Next.js layouts.
theslashdojoCreate and organize Next.js App Router routes and layouts.