Parallel Routes Generator

Parallel Routes Generator 是一項專為使用 App Router 的 Next.js 應用程式所設計的工程技能。它為處理模態視窗 (modals) 與對話框 (dialogs) 提供了一套標準化架構模式，確保視圖之間的導航不會觸發非預期的版面位移 (layout shifts)，進而顯著提升 UX 與技術穩定性。透過運用 Next.js 的平行路由與攔截路由功能，此技能可創造流暢的切換效果，讓內容以浮動視窗呈現，同時維持底層頁面作為背景插槽，確保透過直接 URL 存取時能正確渲染完整頁面。

• 自動配置目錄結構中的 @modal 插槽模式。

• 標準化 default.tsx 的實作，確保模態視窗在未啟用時能被安全地處理為 null。

• 實作 (..) 攔截路由，以維持客戶端導航與直接連結之間的行為一致性。

• 提供可重複使用的 Modal 元件，利用 @radix-ui/react-dialog 確保無障礙存取性與鍵盤焦點管理。

• 整合 useRouter 鉤子，在關閉模態視窗時自動處理後退瀏覽行為。

• 強制執行此模式於所有相關 UI 任務，以防止狀態管理不一致的問題。

• 當使用者提及 'modal'、'dialog'、'popup'、'parallel route' 或 'intercepted route' 時，應觸發此技能。

• 輸入：目標路由路徑與擬顯示於模態視窗的元件內容。

• 輸出：功能完整且具無障礙性的 React Modal 元件、對應的路由插槽資料夾結構，以及必要的 layout 注入代碼。

• 限制：需具備現有的 App Router 架構；必須嚴格遵守專案說明文件中定義的 parent/slot 佈局架構。

• 最佳實踐：務必確保 layout.tsx 檔案同時接受 {children} 與 {modal} 參數，以防止執行期間的插槽錯誤。