react-native-best-practices

react-native-best-practices 技能概覽

這個技能的用途

react-native-best-practices 技能是一份實用的 React Native 效能最佳化指南，專門用來診斷並修正真實 App 問題：啟動慢、掉幀、重度渲染、記憶體洩漏，以及 bundle 過大。當你需要的不只是泛用提示，而是一份能幫你依症狀做決策的 react-native-best-practices 指南時，它最有價值，因為它能協助你選出最適合的修正方向。

最適合的讀者與使用情境

如果你在做 React Native 或 Expo App，並且需要處理 FPS、TTI、Hermes 行為、bridge overhead、FlashList、native modules，或動畫卡頓，那麼這個 react-native-best-practices skill 很適合你。它也很適合正在檢視效能回歸、優化 release candidate，或撰寫針對 react-native-best-practices for Performance Optimization 的聚焦提示詞的工程師。

它和其他做法有什麼不同

這個 repo 的結構是為了「快速查找 + 深入追查」而設計：有速查模式、設定片段、指令，以及針對 bundle 分析、執行緒、記憶體洩漏、原生 profiling 等主題的深入參考。這讓它比鬆散的提示詞更可行，因為它會把 agent 引導到具體證據，而不是只停留在抽象建議。

如何使用 react-native-best-practices 技能

安裝並啟用它

在你的 agent 環境中，使用目錄提供的 react-native-best-practices install 安裝流程，然後用一個明確寫出症狀與平台的任務來呼叫它。repo 的預設提示詞是：Use $react-native-best-practices to diagnose and improve React Native performance. 如果你的工具鏈支援以套件方式安裝 skill，repository path 是 callstackincubator/agent-skills，而這個 skill 位於 skills/react-native-best-practices。

給技能正確的問題描述

有效的 react-native-best-practices usage 一開始就要把目標縮小：平台、症狀、限制條件。比起說「改善 app 效能」，更好的問法是「在 Android、Hermes 開啟的 Reanimated bottom sheet 上減少掉幀」。請補充你改了什麼、哪裡變慢、以及你已經量測過什麼。這樣技能才能更快把問題對應到正確參考資料。

先讀這些檔案

先看 SKILL.md，再查看 POWER.md、agents/openai.yaml，以及和你的問題最相關的參考檔案。若是 JS bundle 工作，優先看 references/bundle-analyze-js.md、references/bundle-barrel-exports.md、references/bundle-code-splitting.md。若是 runtime 卡頓或 render 問題，請讀 references/js-measure-fps.md、references/js-profile-react.md、references/js-lists-flatlist-flashlist.md。若是原生啟動與記憶體相關工作，則檢查 references/native-measure-tti.md、references/native-threading-model.md、references/native-memory-leaks.md。

把粗略目標改寫成有用的提示詞

這個技能的強提示詞應該包含：App 類型、RN 版本、平台、指標、重現路徑，以及任何 profiler 輸出。範例：Audit our React Native app on iOS 17, RN 0.78, Hermes enabled. TTI regressed after adding three navigation-heavy screens; inspect bundle size, startup imports, and native initialization order. Recommend the smallest set of changes with verification steps. 這類提示詞能幫助 react-native-best-practices usage 產出更聚焦、可驗證的結果。

react-native-best-practices 技能 FAQ

這只用於效能工作嗎？

是的，這是它的主要定位。react-native-best-practices 技能是用來診斷與改善效能相關問題，而不是一般 App 架構、功能設計或 UI 文案。如果你的任務和延遲、記憶體、bundle 大小或渲染成本無關，通常用一般的 React Native 提示詞就夠了。

它能取代一般除錯或 profiling 嗎？

不能。它能提升調查品質，但你仍需要真實訊號：profiler traces、bundle 報表、log、以及重現步驟。這個技能能幫你決定該看什麼、哪些取捨重要，但沒有證據，它無法替你推斷 App 的瓶頸。

它適合新手嗎？

適合，只要你想要的是有引導的 react-native-best-practices guide，而不是理論很多的文件。新手最能受益的方式，是直接貼一個具體症狀，然後要求一份有優先順序的檢查清單。進階使用者則更能從 repo 裡的特定參考資料與最佳化路徑得到價值。

什麼情況下不該用它？

不要把它當成產品決策、後端延遲分析，或不相關的 JavaScript troubleshooting 的替代品。當你只需要一個沒有效能背景的快速程式風格答案時，它也不太合適。這些情況下，使用這個 skill 只會增加負擔，卻不會讓結果更好。

如何改善 react-native-best-practices 技能

先講可量測的症狀

最好的輸出，來自於能說清楚「哪裡壞了、在哪裡發生、你怎麼知道」的輸入。可以直接說「加入 analytics SDK 初始化後，啟動時間增加了 1.8 秒」，或「有 200 列與圖片縮圖的 FlashList 在捲動時會卡頓」。症狀越精準，react-native-best-practices for Performance Optimization 就越能縮小搜尋範圍。

補上環境限制

請說明你是否使用 Hermes、Expo、Reanimated、Fabric、Turbo Modules，或自訂 native stack。也要提到版本限制，例如 RN 0.78 與 0.79+，因為有些建議會隨版本改變。這些資訊會影響安裝判斷、啟動行為，以及修正是否值得付出複雜度。

要求有證據的修正建議

請要求附上驗證步驟的建議，而不是只有點子。比如說：For each suggestion, tell me what metric should improve, how to verify it, and what regressions to watch for. 這樣可以減少空泛建議，也讓輸出更容易轉成 issue 或 PR 計畫。

從第一個答案開始迭代

如果第一次結果太廣泛，就補上 profiler traces、bundle analyzer 輸出，或最小化程式碼範例。接著請技能把可能原因排序，並區分高影響變更與低風險整理。這種迭代流程正是 react-native-best-practices 最有用的地方：它能把模糊直覺轉成具體的最佳化計畫。