compose-multiplatform-patterns

compose-multiplatform-patterns 技能概覽

什麼是 compose-multiplatform-patterns

compose-multiplatform-patterns 技能是一份實作型指南，協助你在 KMP 應用中使用 Compose Multiplatform 和 Jetpack Compose 建構 UI。它聚焦在最常拖慢團隊進度的決策：如何組織狀態、如何串接導覽、如何安全地跨平台共享 UI，以及如何在應用成長後仍維持 Compose 程式碼的可維護性。

適合誰使用

當你要為 Android、iOS、Desktop 或 Web 交付共享 UI，並且想用能減少返工的模式時，compose-multiplatform-patterns 很適合用於 Frontend Development。它最適合已經掌握 Compose 基礎，但在真實畫面、共享設計系統與平台特有邊界條件上，需要更清楚實作路徑的開發者。

它解決什麼問題

這個技能能幫你把像「用 Compose Multiplatform 做出這個畫面」這樣模糊的目標，轉成合理的 UI 架構。這通常代表要先選定狀態模型、決定商業邏輯放在哪裡、避免 recomposition 問題，並在不逼迫每個平台長得一模一樣的前提下，維持程式碼可重用。

如何使用 compose-multiplatform-patterns 技能

安裝並找到這個技能

先依照目錄的標準技能流程安裝 compose-multiplatform-patterns，再在開始寫 code 前打開技能檔案。請先從 SKILL.md 看起，並優先檢查任何相連或鄰近的指引；在這個 repo 裡，這個技能本身就是完整自洽的，所以真正的價值來自閱讀模式範例，並把它們調整成你的 app 結構，而不是期待還有額外的 helper files。

給這個技能一個具體的 UI 目標

compose-multiplatform-patterns usage 在你的 prompt 有明確寫出畫面、平台目標與限制時，效果最好。舉例來說，不要只說「幫我處理 Compose」，而是請它產出「一個在 Compose Multiplatform 中共用的商品列表畫面，包含 loading、empty、error 狀態，並針對 iOS 和 desktop 提供不同的 padding」。這樣才能讓技能有足夠上下文，建議正確的狀態形狀與 composable 邊界。

先讀會影響架構的部分

在開始實作前，請先聚焦在關於何時啟用、狀態管理、導覽、主題與效能的章節。這些內容會直接改變設計決策。若你是在既有 codebase 中採用 compose-multiplatform-patterns guide，請先把它的模式和你目前的 ViewModel、state container 與 navigation 設定做比較，再去複製任何範例。

要求結構，而不只是 code

除了實作，也請一併要求規劃。一個夠強的 prompt 可以請它交出：畫面狀態模型、ViewModel 職責、composable 階層、事件處理，以及任何 Compose 特有的取捨。這通常會比只問單一 composable 更有用，因為這個技能本來就是以模式為核心，而不是零散片段。

compose-multiplatform-patterns 技能 FAQ

compose-multiplatform-patterns 只適用於 KMP 嗎？

不是。它以 Kotlin Multiplatform 為核心，但這些模式同樣適用於需要更好狀態處理、可重用 composable 或更清楚畫面架構的 Jetpack Compose app。如果你的專案只做 Android，這個技能仍然有幫助，但最大價值還是來自共享 UI 的工作。

這比一般 prompt 更好嗎？

通常是的，前提是你需要一致的架構。一般 prompt 可能會給你一段只在當下可用的 code，但 compose-multiplatform-patterns 在你想要一套可重複使用的狀態、導覽與平台差異處理方式時，通常更有用。如果你只是要一個一次性的 composable，一般 prompt 可能就夠了。

什麼情況下不適合用？

如果你的任務大多是 backend、domain logic，或只是沒有共享 UI 顧慮的簡單靜態版面，就不要急著用 compose-multiplatform-patterns install。如果你需要的是一套帶有明確立場的設計系統，但還沒決定平台目標或狀態策略，這個技能也不是最佳選擇。

它適合初學者嗎？

可以，只要你能清楚描述要做的畫面。初學者最能受益的方式，是一次只請它處理一個頁面，並明確列出需要的 UI 狀態。這個技能重點不是背 Compose API，而是從一開始就用乾淨的模式來做。

如何改進 compose-multiplatform-patterns 技能

補上這個技能需要的缺失資訊

最能提升品質的做法，是把狀態、事件與平台限制說清楚。告訴它哪些資料會變動、有哪些使用者操作，以及哪些部分必須在 Android、iOS、Desktop 或 Web 上不同。對 compose-multiplatform-patterns 來說，這類上下文通常比視覺設計本身更重要。

明確要求 code 邊界

如果你想要更好的結果，請直接要求方案的結構：UiState、UiEvent、ViewModel flow、composable tree，以及導覽應該放在哪裡。這能減少 composable 過度膨脹，也讓輸出更容易整合進真實 app。它同時也能幫技能避免把平台程式碼和共享 UI 程式碼混在一起。

檢查可重用性與 recomposition 風險

拿到第一版輸出後，請檢查它是否能讓 UI 可重用，但又不會過度抽象。最常見的失敗模式，不是重複太多，就是間接層太多。必要時，可以請技能簡化 composable 階層、分離平台特有的 wrapper，或把 state collection 往樹狀結構更上層移動。

用真實畫面反覆調整

提升結果最快的方法，是直接丟一個真實功能，例如 onboarding、search 或 details page，並要求它依照你 app 現有慣例來實作。接著再加入限制條件微調，例如「Android 和 iOS 共用」、「支援 dark mode」，或「在低階裝置上必須維持順暢捲動」。