React 轉換為 Phoenix LiveView
重現所要求的 React 介面，同時與目標應用程式的架構整合。將原始來源視為視覺與行為的參考；在目標有不同要求時，遵循目標的明確規範。透過程式碼探索慣例，而非預設 React 框架、CSS 系統、元件庫或 Phoenix 版本。
界定範圍與慣例
- 讀取適用的儲存庫指示及兩個專案的相關文件。找出 React 進入點、目標應用程式以及要求的路由或元件。專案可能是不同的儲存庫或共享同一個工作區。
- 檢視 manifest 與既有實作，以識別樣式、元件、字型、主題、資產、路由、認證、資料存取與 JavaScript 整合。在建立新項目前，檢查是否已有既有的路由、部分移植、元件或 hook。
- 將範圍限定於指定的介面與所需行為。靜態 mockup 不需要新的後端功能；功能遷移則需要真實的整合或明確揭露的缺口。
- 尊重使用者的測試與工具權限。來源檢查、參考檢查、預覽準備、自動化測試與瀏覽器 QA 是不同的活動；不要假設所有活動都已授權。
1. 檢查來源
閱讀 css-extraction.md。追蹤頁面、視覺上重要的子元件、樣式、元件變體、資產與狀態邏輯。建立：
- 版面配置、響應式規則、排版、主題、圖像與動畫。
- 在函式庫預設值、本地覆寫、條件式 props 與 CSS 串聯後的有效樣式。
- 與範圍相關的導航、表單、覆蓋層、載入、權限、變異、持久化與復原路徑。
記錄一份精簡的遷移對照表：來源元件 → 目標元件、來源資料/動作 → 目標 context/事件、來源 token → 目標對等項目。將觀察到的行為與假設及未解析的執行期數值分開。
如果是分析請求，提供發現結果後停止。如果是授權的實作，簡要說明重大的缺口或偏差後繼續。只有在未解決的選擇會顯著改變範圍、行為或 fidelity 時才提問；不需要為例行性的轉換決策而要求單獨確認。
2. 在 Phoenix 中實作
閱讀 liveview-conventions.md。重複使用目標的元件、佈局、context、授權、token、資產與 hook，以重現所需結果。
- 翻譯渲染輸出與行為，而非機械性地轉換 React 語法或元件名稱。
- 保留視覺數值、響應式規則、狀態與語意。不要未經說明就改用相似的字型、圖示、元件或動畫。
- 一致地套用明確的目標要求，並解釋可見的偏差。絕不將其他專案的字型限制、儲存提供者、路由結構或命名帶入移植中。
- 將伺服器擁有的狀態保留在 LiveView 與 context 中；使用 CSS 或既有客戶端機制處理本機視覺行為。僅針對需要它們的瀏覽器功能添加 hook。
- 完成適用的載入、空白、驗證、待處理、成功、失敗、重試、權限與復原狀態。在失敗時保留使用者輸入，並防止重複操作損壞資料。
3. 審查與交接
根據遷移對照表審查變更，包括響應式/主題變體、授權、事件處理、無障礙性與生命週期清理。檢查所需資產與引用的元件是否存在。
僅在允許時使用專案驗證命令與執行期工具。允許時準備即時預覽。絕不要僅根據來源檢查就聲稱已通過執行期、視覺或測試驗證。
簡要交接：移植了什麼、重大的偏差、模擬或缺少的整合、已執行或省略的驗證、以及使用者應測試的狀態。如果某項依賴關係阻礙完成，具體指出它，並在範圍內完成獨立的工作。