Implement parallel routes-based modals in Next.js layouts.
npx skills add https://github.com/RomualdP/hoki --skill parallel-routes-generator
Please help me install this Agent Skill. Skill: Parallel Routes Generator Source: https://github.com/RomualdP/hoki/tree/main/.claude/skills/parallel-routes Command: npx skills add https://github.com/RomualdP/hoki --skill parallel-routes-generator
This Skill leverages Next.js Parallel Routes to implement modals and dialogs without causing disruptive layout shifts, providing a superior user experience compared to traditional modal implementations.
(..) convention to intercept a route and render it within a modal slot, while still allowing direct navigation to the full page.To create a modal using Parallel Routes, define an @modal slot in your layout, create a default.tsx file returning null inside @modal, and then create an intercepted route like @modal/(..)my-modal/page.tsx for your modal content.
High-intent search queries and answers about installing and using this skill.
Layout shifts occur when modals are rendered in the document flow. Next.js Parallel Routes solve this by rendering modals in a separate slot (@modal) that doesn't affect the underlying page layout, preserving state and preventing visual disruption.
Parallel routes create independent slots in your layout that render simultaneously. Intercepted routes use the (..) syntax to intercept a navigation and render content in a modal slot instead of navigating away, while still allowing direct access to the full page via URL.
Define an @modal folder in your app directory, create a default.tsx file returning null inside it, then create an intercepted route like @modal/(..)page-name/page.tsx. Update your root layout to accept and render the modal prop alongside your page content.
Yes. With intercepted routes, sharing the modal's URL loads the full page directly because the interception only applies within the app context. Direct navigation bypasses the interception and renders the complete page layout.
Parallel Routes modals require familiarity with Next.js app directory conventions and React components. You need to understand layout composition, slots, and how to manage modal state and close behavior within a React component.
JosiahSiegelGuide Next.js App Router development covering routing layouts loading states and metadata.
KazmerMaximilianoGenerate a Neus UI modal pattern with trigger button and confirmation handlers.
HieubkavDesign scalable TypeScript React component architecture with hooks and composition.
zuzu59Implement intercepted modal routing with masked URLs in TanStack Start.