react-native-design

react-native-design 技能總覽

react-native-design 是一個聚焦型技能，專門用來產生與檢視 React Native UI 的實作模式，特別著重於 StyleSheet、響應式版面、React Navigation，以及 Reanimated 3。對正在打造跨平台行動介面的開發者、AI 輔助寫程式使用者，以及產品團隊來說，如果你希望產出的內容更接近正式上線可用的 React Native 結構，而不是泛泛的「把這個畫面做漂亮一點」提示，react-native-design 會是更合適的選擇。

react-native-design 主要適合解決什麼問題

真正要解的不是抽象的「設計」，而是把 UI 需求轉成符合 React Native 的程式碼與實作模式，同時顧及行動裝置限制：畫面版面、平台差異、型別安全的 navigation、適合手勢操作的互動，以及效能合理的動畫選擇。

誰適合安裝 react-native-design

如果你經常需要協助處理以下工作，就適合使用 react-native-design：

• 在 React Native 中建立畫面與元件版面
• 在 stack、tabs 與巢狀 navigation 模式之間做選擇
• 加入 Reanimated 3 動態效果，而不用猜 API 應該怎麼寫
• 以可維護的方式組織樣式、variants 與 theme
• 把粗略的產品需求轉成可直接實作的 UI 程式碼

react-native-design 與一般 prompt 有什麼不同

react-native-design 最大的差異在於範圍。它不是泛用型的前端設計助手，而是明確聚焦在 React Native 的實作細節，並引導使用者參考技能內的具體模式檔案：

• references/styling-patterns.md
• references/navigation-patterns.md
• references/reanimated-patterns.md

這讓它在你需要的是行動 UI 的程式碼結構，而不只是視覺建議時，實用性高很多。

react-native-design 擅長的事情

當需求落在以下三大類型時，react-native-design 表現最好：

1. 使用 StyleSheet 進行畫面與元件樣式設計
2. 搭配型別化 route params 的 navigation 架構
3. 使用 Reanimated 3 實作動畫與互動模式

如果你的目標涵蓋這些面向，react-native-design 能有效降低 prompt 的模糊性，加快第一版實作速度。

安裝 react-native-design 前要先知道的限制

這不是完整的 design system 套件、元件庫，也不是 Expo 設定精靈。它同樣不能取代特定 app 的 UX 決策、無障礙檢查或測試流程。如果你的主要需求是 Figma 生成、Web CSS，或品牌視覺探索，那 react-native-design 多半不是合適選項。

如何使用 react-native-design 技能

在你的 skills 環境中安裝 react-native-design

從 repository 加入這個技能：

npx skills add https://github.com/wshobson/agents --skill react-native-design

安裝完成後，當你希望 agent 提供的是 React Native UI 實作指引，而不是泛用 UI 點子時，就呼叫 react-native-design。

建議先讀這些檔案

如果你想快速評估，建議依照這個順序閱讀：

1. SKILL.md
2. references/styling-patterns.md
3. references/navigation-patterns.md
4. references/reanimated-patterns.md

這條閱讀路徑對應多數人採用時最常見的問題順序：先看 styling，再看 app flow，最後看 motion。

react-native-design 需要什麼輸入資訊

當你提供的是具體實作脈絡，而不只是畫面名稱時，react-native-design 的效果最好。建議包含：

• React Native 的設定細節：Expo 或 bare、TypeScript 或 JavaScript
• 目標平台：iOS、Android，或兩者都有
• 目前已使用的 navigation stack（如果有）
• state management 或 theming 限制
• 該畫面的目標與使用者操作流程
• 任何動畫意圖、手勢行為或效能敏感點

較弱的輸入：

• 「Build a profile screen.」

較好的輸入：

• 「Using React Native with TypeScript and React Navigation native stack, build a profile screen for iOS and Android with a header, avatar, stats row, editable bio, and sticky action bar. Use StyleSheet, support dark mode, and include a subtle Reanimated entrance for the stats cards.」

後者能給 react-native-design 足夠的結構，回傳更貼近你技術堆疊的程式碼。

如何把模糊想法整理成好用的 react-native-design prompt

一個實用的 prompt 範本：

Use react-native-design.

Context:
- Stack: React Native + TypeScript
- Navigation: React Navigation native stack
- Styling: StyleSheet only
- Platforms: iOS and Android

Goal:
Build a [screen/component] for [user task].

Requirements:
- Include [layout sections]
- Handle [states, empty/loading/error]
- Use [navigation behavior]
- Add [animation/gesture needs]
- Keep code modular and production-oriented

Output:
- component code
- styles
- navigation types if needed
- short explanation of key design choices

這種格式能幫助技能從正確的模式類型中挑選做法，而不是自行拼湊出不相符的方案。

使用 react-native-design 實作畫面的最佳工作流程

使用 react-native-design 的高訊號工作流程通常是：

1. 先要求畫面結構與 state map
2. 再要求基礎元件與 StyleSheet
3. 接著加入 navigation 整合
4. 等版面穩定後，再加入動畫
5. 如果輸出過大，再要求重構成較小元件

這個順序很重要，因為當階層結構先穩定下來後，navigation 與 animation 會更容易乾淨地加上去。

有意識地使用 styling 參考檔

references/styling-patterns.md 是最泛用、也最值得先看的檔案。它涵蓋的模式包括：

• typed styles
• style composition
• theme context approaches
• external style overrides

當你請 react-native-design 做 UI Design 工作時，最好明確說出你要的是純 StyleSheet、theme token，還是 style variants。否則輸出可能技術上可行，但和你現有 codebase 慣例不一致。

遇到 app 結構問題時，優先使用 navigation 參考檔

如果你的需求涉及巢狀 navigator、route params，或 TypeScript-safe 的 screen props，references/navigation-patterns.md 特別有價值。你可以要求 react-native-design 產出：

• param list definitions
• screen prop typing
• navigator composition
• hook usage for navigation and route access

這也是 react-native-design 比一般 prompt 更有價值的地方，因為 navigation 程式碼一旦漏掉 route types，往往很快就會出問題。

只有在真的需要動態效果時，再使用 Reanimated 參考檔

references/reanimated-patterns.md 最適合處理明確的動態需求，例如：

• entrance 或 exit transitions
• gesture-driven transforms
• spring 或 timing animation choices
• animation callbacks and state handoff

如果畫面版面本身還沒定義清楚，就不要一開始先談動畫。實務上，當 motion 是建立在穩定的 component tree 之上時，react-native-design 會給出更好的結果。

適合這個技能的實用 prompt 範例

styling 範例：

Use react-native-design to create a settings screen with grouped sections, reusable row components, and dark mode support. Use React Native `StyleSheet`, keep spacing tokenized, and show how to override row styles safely.

navigation 範例：

Use react-native-design to set up a root stack with auth flow, main tabs, and a modal details screen. Generate TypeScript param lists and example screen props for each layer.

animation 範例：

Use react-native-design to add Reanimated 3 interactions to a draggable card deck. Explain which values should be shared values, which styles should be animated, and where to keep React state separate.

導入 react-native-design 時常見的卡點

多數人對 react-native-design 的挫折，通常來自缺少上下文，不是技能本身做不到。常見卡點包括：

• 要求「design」，卻沒有說明 React Native 的限制條件
• 在原生版面需求中混入 Web CSS 的預期
• 要 navigation 程式碼，卻沒有說明目前使用哪種 navigator
• 要求動畫，卻沒說是否已安裝 react-native-reanimated

只要把環境與預期輸出格式交代清楚，react-native-design 的表現通常會穩定很多。

react-native-design 技能 FAQ

react-native-design 適合初學者嗎？

適合，但前提是你已經了解基本的 React Native 專案結構。這個技能能提供可直接使用的實作模式，但它預設你知道檔案要放哪裡、app 要怎麼執行。對初學者來說，最有價值的切入方式通常是先從 styling 類需求開始，再進一步問巢狀 navigation 或較進階的 Reanimated 行為。

react-native-design 只適合做視覺潤飾嗎？

不是。react-native-design 比起視覺美化，更偏向實作導向。它最強的輸出往往是程式碼結構：型別化 navigation、可重用的 styled components，以及效能合理的動畫設定。如果你需要的是像素級品牌視覺探索，建議搭配你自己的設計來源一起使用。

react-native-design 和一般 prompt 的差別是什麼？

一般 prompt 很容易產出泛用、偏 React 風格的程式碼，忽略行動端 navigation、平台行為，或 Reanimated 的慣例。react-native-design 的範圍更窄，因此更擅長回傳真正針對 React Native 的實作模式，而且是建立在 repository 參考資料之上的。

什麼情況不該使用 react-native-design？

如果你的工作主要是以下類型，就建議略過 react-native-design：

• web UI 或 CSS 架構
• 非 React Native 的行動框架
• backend 或 API 設計
• 沒有實作目標的純 UX 策略
• 視覺資產製作

另外，如果你需要的是 app 中每個套件從安裝到設定的完整依賴教學，它也不是理想選擇；這個技能更偏重實作模式，而不是端到端的專案 bootstrapping。

react-native-design 有涵蓋 navigation setup 嗎？

有，而且這正是很值得使用它的原因之一。navigation 參考內容包含具體的安裝脈絡與型別化模式，涵蓋 @react-navigation/native、native stack、tabs、react-native-screens 與 react-native-safe-area-context。

react-native-design 能幫忙處理動畫嗎？

可以，特別是在 Reanimated 3 的概念上，例如 shared values、animated styles、spring/timing transitions，以及 callback flow。當你已經知道想要什麼互動，但需要協助把它對應到正確的 Reanimated 結構時，這個技能尤其實用。

如何改善 react-native-design 的使用效果

一開始就把 react-native-design 的實作限制講清楚

想讓輸出品質快速提升，最有效的方法就是先把限制條件講清楚：

• Expo 或 bare React Native
• TypeScript 或 JavaScript
• styling system
• navigator choice
• package versions（如有關聯）
• target platforms
• accessibility 或 performance requirements

這能減少那種「看起來合理，但放不進我 app」的回應。

不要只問 happy path，也要把狀態講出來

很多第一版 UI prompt 只描述理想流程，忽略 loading、empty、error、offline 與 disabled 等狀態。當你把這些狀態明確寫進需求時，react-native-design 會更有用，因為它們會直接影響版面、navigation 邏輯與動畫行為。

更好的提問方式：

• 「Include loading, empty, and error states with reusable layout wrappers.」

先分開處理架構與潤飾

如果你一次要求 styling、navigation 與複雜動畫，輸出很容易變得臃腫。更好的順序是：

1. architecture
2. base screen code
3. navigation typing
4. motion details
5. cleanup and extraction

這樣能讓 react-native-design 保持聚焦，也更容易審查。

告訴它你要優先最佳化什麼

不同的 React Native 團隊在意的取捨並不一樣。你可以明講優先順序是：

• readability
• reusability
• animation performance
• strict typing
• fast prototyping
• platform consistency

否則 react-native-design 可能會選出技術上成立、但不符合你團隊標準的模式。

在需求中直接引用技能的來源檔案

你可以透過指定參考檔，讓 react-native-design 的輸出更精準：

• 「Follow the style composition approach from references/styling-patterns.md.」
• 「Use the typed navigator approach from references/navigation-patterns.md.」
• 「Apply shared values and animated styles in the spirit of references/reanimated-patterns.md.」

這比抽象地要求「best practices」更容易得到有根據的答案。

留意 react-native-design 常見的失敗模式

常見的較弱輸出包括：

• styles 雖然有效，但沒有 token 化，也不易重用
• navigation 範例缺少完整的 param typing
• 在其實用簡單 layout transitions 就夠的地方，硬加 Reanimated 程式碼
• 元件把視覺結構與 app state 綁得太緊

看到這些情況時，可以要求 react-native-design 一次只針對一個關注點做重構。

用元件邊界來改善 prompt 品質

與其要求一個很大的畫面，不如直接指定元件邊界，例如：

• ProfileHeader
• StatsRow
• ActionBar
• SettingsSection

這能幫助 react-native-design 產出模組化的程式碼，更容易貼進真實專案，也更方便測試。

第一輪回答後要繼續迭代

最佳做法不是一次丟出超大型 prompt，而是先給一個好的 prompt，再跟上一個精準的修訂要求。常見且有用的 follow-up 包括：

• 「Now extract shared styles into reusable tokens.」
• 「Now add typed route params and screen prop helpers.」
• 「Now replace basic transitions with Reanimated 3 springs.」
• 「Now make the layout more robust for small screens.」

通常就是透過這種方式，才能從「勉強可用」推進到「真的能整合進專案」的程式碼。

把 react-native-design 用在 UI Design，不要把它當成最終 QA

react-native-design for UI Design 最擅長的是提出實作結構與程式碼模式，但不該成為最後一步。最終仍要在實機上驗證：

• touch target size
• safe area handling
• keyboard overlap
• animation smoothness
• platform-specific visual differences

React Native 的問題通常就是在這個最後驗證階段浮現，任何技能都無法完全取代這一步。