react-native

react-native 技能概覽

這個 react-native 技能能做什麼

react-native 技能是一份實用指南，協助你處理 React Native 應用程式程式碼，特別適合需要一致的元件模式、考量平台差異的行為，以及更清楚區分 UI 與邏輯的情境。它最適合用在 Frontend Development 任務，且輸出必須貼合行動裝置程式碼庫，而不只是一般性的 React 提示詞。

誰適合使用

如果你正在編輯 .tsx 或 .jsx 畫面、打造可重用的行動元件，或是要動到 ios/ 與 android/ 的特定行為，就很適合使用這個 react-native 技能。當你想要的是一套可提示式的應用程式結構工作流程，而不只是一次性的程式碼生成，它會特別有幫助。

安裝前最重要的是什麼

這個技能輕量且聚焦：它偏好函式元件、用 hooks 處理畫面邏輯，以及清楚的專案結構。它看起來不像完整框架，不會附帶腳本或輔助資產，所以你應該把它視為指導層級的價值，而不是自動化工具。如果你想要協助撰寫能在既有應用程式中維持可維護性的 React Native 程式碼，react-native 技能是很強的選擇。

如何使用 react-native 技能

在正確的情境下安裝

如果要安裝技能，請把你的工作區指向包含 skills/react-native 的 repo 路徑，然後使用平台提供的技能安裝流程。如果你的系統支援來源中示範的 repo 風格指令，格式如下：
npx skills add alinaqi/claude-bootstrap --skill react-native

提供正確的輸入

這個技能在你的需求包含以下內容時效果最好：目標畫面或元件、平台考量，以及程式碼邊界。例如，不要只說「做一個設定頁」，而是改成「做一個 React Native 設定畫面，使用函式元件、抽出的 hooks，並且分開處理 iOS/Android 的 safe-area 間距」。

先閱讀這些檔案

先從 SKILL.md 開始，了解這個模式；如果你的專案有 CLAUDE.md，再接著檢視它。之後，掃描你應用程式的 src/components/、src/screens/、navigation/ 與 store/ 結構，讓輸出符合你既有的 React Native 慣例。當 repo 已經使用 TypeScript、barrel exports，或以 hooks 為主的畫面邏輯時，這個技能特別有用。

使用可減少返工的工作流程

一個好的 react-native 使用流程是：先描述 UI 目標，再說明任何平台差異，接著指定狀態與資料來源，最後要求拆分 component 與 hook。這比要求「best practices」更有效，因為這個技能的設計本來就是把粗略的行動需求轉成能放進真實 React Native 應用程式的程式碼。

react-native 技能 FAQ

這只適用於 React Native 應用程式嗎？

是。react-native 技能是為 React Native 行動應用程式程式碼設計的，不是只做網頁的 React 元件。如果你的任務主要是瀏覽器 UI，通常會更適合用其他技能，或直接使用一般 React 提示詞。

它和一般提示詞有什麼不同？

一般提示詞可能也能產出可運作的程式碼，但這個技能會把輸出往行動裝置專屬的結構推：函式元件、可重用的 UI 區塊、抽出的 hooks，以及對 ios/ 與 android/ 程式路徑的明確意識。當一致性與可維護性很重要時，這會更實用。

對初學者友善嗎？

大致上是的，只要你能清楚描述想要的畫面或功能。你不需要很深的 repo 知識也能使用 react-native 技能，但你必須明確說出功能邊界，否則輸出可能會太廣。

什麼情況下不該使用它？

不要把它用在純後端工作、只做網頁 UI 的任務，或已經被極小的單檔修改完全限定住的工作上。當工作範圍涵蓋元件結構、hooks，以及行動應用程式慣例時，它最有價值。

如何改進 react-native 技能

把功能邊界說得更精準

最好的結果來自清楚點出畫面、使用者動作與平台限制的輸入。「建立個人檔案編輯表單」不如「建立一個 React Native 個人檔案編輯畫面，包含文字輸入欄、頭像上傳占位元件、用自訂 hook 做驗證，以及 Android 鍵盤處理分離」來得有效。

加上你想要的程式碼形狀

如果你在意可維護性，就直接說明：只要函式元件、邏輯放在 hooks、可重用子元件，或不要 class components。react-native 技能本來就是圍繞這些模式設計的，越早說清楚，後面要整理的東西就越少。

提到你想保留的 repo 模式

如果你的應用程式已經使用 barrel exports、screens/ 層，或用 core/ 目錄放非 UI 邏輯，請在提示詞中一併寫出來。這能幫助技能對齊你現有的 React Native 指南，也能避免輸出看起來沒問題，實際上卻放錯資料夾。

針對第一版持續迭代

如果第一版結果太泛，就在下一次要求中只鎖定一個失敗模式：例如平台細節不足、component 裡塞了太多 UI 邏輯，或資料夾放置不正確。這類回饋比要求模型「改得更好」更有用，而且通常能很快改善下一版 react-native 輸出。