Parallel Routes Generator

The Parallel Routes Generator is an engineering skill designed for Next.js 13+ applications using the App Router. It provides a standardized architectural pattern for handling modals and dialogs, ensuring that navigation between view states does not trigger unwanted layout shifts, thus significantly enhancing user experience and technical stability. By leveraging Next.js Parallel Routes and Intercepted Routes, this tool creates a seamless transition effect where content is displayed in a modal overlay while maintaining the underlying page context as a background slot, ensuring that direct URL access still renders the full-page version of the content.

• Automatically configures the @modal slot pattern in the directory structure.

• Standardizes default.tsx implementation to ensure the modal state is safely handled as null when inactive.

• Implements (..) interception routes for consistent client-side navigation vs. direct-link behavior.

• Provides a reusable Modal component leveraging @radix-ui/react-dialog for accessibility and keyboard focus management.

• Integrates with the useRouter hook to handle back-navigation automatically upon modal dismissal.

• Strictly enforces the pattern for all modal-related UI tasks to prevent inconsistent state management.

• This skill should be triggered whenever the user mentions 'modal', 'dialog', 'popup', 'parallel route', or 'intercepted route'.

• Input: Target route path and component content intended for the modal display.

• Output: A functional, accessible React modal component, corresponding route slot folder structure, and necessary layout injection code.

• Constraints: Requires an existing App Router setup; strictly follows the parent/slot layout architecture defined in the project's documentation.

• Best practice: Always ensure that the layout.tsx file accepts both {children} and {modal} to prevent runtime slot errors.