parallel-routes-slotslisted
Install: claude install-skill voidcorp-core/void-harness
# parallel-routes-slots
Use when you need to render **multiple independent UI pieces in the same layout that can navigate independently**, or to **show a modal that's also a deep-linkable route**. Parallel routes and intercepting routes are powerful but easy to mis-apply.
If you only need a different page at a different URL → use a normal route. No slots needed.
## Parallel routes (`@slot`)
A `@slot` folder is a **named layout slot** that can be filled by any of its child pages.
```
app/dashboard/
├── @analytics/
│ ├── page.tsx # default content for the slot
│ └── audience/page.tsx # different content at the slot
├── @team/
│ ├── page.tsx
│ └── invite/page.tsx
└── layout.tsx # consumes both slots
```
```tsx
// app/dashboard/layout.tsx
export default function Layout({
children,
analytics,
team,
}: {
children: React.ReactNode;
analytics: React.ReactNode;
team: React.ReactNode;
}) {
return (
<div className="grid grid-cols-3 gap-4">
<main className="col-span-2">{children}</main>
<aside>{analytics}</aside>
<aside>{team}</aside>
</div>
);
}
```
Each slot can independently navigate. The URL `/dashboard/audience/invite` could render `@analytics/audience` AND `@team/invite` AND the main `children` page simultaneously.
## When parallel routes WIN
- **Dashboard layouts** with widgets that load independently and can be refreshed/navigated without rerouting the main view
- **Admin panels** wit