vercel-react-native-skills

vercel-react-native-skills 技能總覽

vercel-react-native-skills 是什麼

vercel-react-native-skills 是一個面向 React Native 與 Expo 的實作指引技能，特別適合重視效能的前端工作。當你在處理慢列表、收斂重繪、加入動畫、串接原生模組，或整理平台專屬 UI 時，它能幫你在正確的時機套用正確的規則。

誰適合使用

如果你正在用 React Native 或 Expo 開發、維護行動 App，而且需要比一般提示詞更具體的實務指引，那就適合使用 vercel-react-native-skills。它特別適合前端開發中那些容易因為重繪抖動、不穩定的 props、列表項目結構不佳，或和 UI thread 打架的動畫模式而產生回歸問題的情境。

它最擅長什麼

vercel-react-native-skills 最強的情境，是任務本身有明確的效能或架構限制。它的規則是按優先順序編排的，因此列表效能、動畫、導覽與 UI 模式會比影響較小的清理工作先被處理。當你需要的是決策輔助，而不只是實作點子時，它就很適合。

如何使用 vercel-react-native-skills 技能

安裝這個技能

請使用 vercel-react-native-skills install 流程，透過 skills 指令從 repo 加入：
npx skills add vercel-labs/agent-skills --skill vercel-react-native-skills

安裝完成後，請把這個技能當成 React Native 提示詞、code review 與重構時的工作參考，而不是一次性答案產生器。

先從真正重要的檔案開始

先讀 SKILL.md，再查看 AGENTS.md、metadata.json 和 README.md，了解適用範圍與規則優先順序。這個 repo 的真正價值在 rules/，所以先看 rules/_sections.md，再針對你的任務找對應的規則檔，例如 list-performance-*、animation-*、ui-* 或 rendering-*。

把模糊任務變成有用的提示詞

這個技能最有效的情況，是你能清楚告訴它：

• app 技術棧：React Native、Expo，或混合式 monorepo
• 目標表面：畫面、列表、手勢、modal、圖片格狀版面，或導覽流程
• 限制條件：卡頓、重繪、記憶體用量、bundle 大小、原生依賴設定，或平台行為
• 程式形態：FlatList、Reanimated、Pressable、native module，或 design system component

更強的提示詞會像這樣：
“Review this Expo screen with a FlatList and Reanimated headers. Identify which list-performance-* and animation-* rules apply, then rewrite the component to reduce re-renders and keep scroll smooth.”

把規則當成決策樹來用

在使用 vercel-react-native-skills 時，先從最符合問題的高優先級規則家族開始。如果捲動不順，先看列表規則，再看樣式規則。如果動畫感覺遲鈍，先查 animation-* 規則，再去改 state 邏輯。如果問題是結構性的，就用對應的 ui-*、rendering-* 或 state-* 規則，避免修錯層。

vercel-react-native-skills 技能 FAQ

這只適合效能修正嗎？

不是。效能是 vercel-react-native-skills 的核心，但它也涵蓋渲染正確性、導覽選擇、UI 組成，以及原生整合模式。只要你的任務是「讓這個畫面在手機上運作得更好」，它通常都很相關。

如果我已經懂 React Native，還需要這個技能嗎？

需要，尤其是任務風險高或很容易回歸的時候。一般提示詞可能會漏掉規則層級的限制，例如列表項目中穩定引用、UI thread 動畫模式，或文字渲染規則。這個技能能為 vercel-react-native-skills for Frontend Development 提供更可靠的起點。

什麼情況下不該用它？

如果你在做的是無關的 app 工作、純後端變更，或完全沒有 React Native 實作細節的純視覺 mockup，就可以先跳過。當你無法提供足夠的列表結構、元件邊界或目標裝置資訊時，它的幫助也會比較有限。

這個技能適合新手嗎？

適合，只要你把它當成下一個正確步驟的指南，而不是規則大抄。對新手最好的用法，是請它先找出最重要的規則類別、解釋取捨，然後提出最小幅度的程式碼改動。

如何改善 vercel-react-native-skills 技能

先把真正的瓶頸講清楚

提升結果最快的方法，是同時說明症狀與元件形狀。比起“My list is laggy”，像“My FlatList re-renders every item when selection changes, and each row uses inline objects and callback props.” 這樣的描述更有用。這種細節能幫 vercel-react-native-skills 指引選到正確規則。

提供最小但有用的程式碼片段

請分享父元件、項目元件，以及任何相關的動畫或 state hook。對這個技能來說，孤立片段常常會把問題藏起來；更好的輸入是從 state 到 render path 的完整 props 鏈。這對列表、渲染與 React state 規則尤其重要。

要求輸出對應到規則

一個好的後續要求是：
“Apply the relevant list-performance-, rendering-, and react-state- rules, then explain what changed and why.”
這會迫使輸出緊扣 repo 的規則系統，而不是泛泛而談的 React Native 建議。

第一次修正後再迭代

先檢查第一輪答案是否漏掉它無法從上下文得知的取捨：裝置等級、Expo 限制、原生依賴上限，以及 design-system 要求。如果改動會影響捲動、手勢或圖片載入，請再要求第二輪，聚焦在真正的瓶頸，讓下一次迭代只改善一層，不要再引入新的問題。