Communitygithub.com

expo/expo-overview (導覽與共用規則)

開放原始碼框架。所有 Expo 與 EAS 工作的入口點與路由器。當請求、PRD 或規格提及 Expo、EAS、Expo Go 或 expo-* 套件，或專案的 package.json 中含有 expo 依賴時，請先載入此技能——在開始寫程式碼以及選擇另一個 expo-* / eas-* 技能之前。同時也涵蓋應用程式規格與設計實作（標籤頁、堆疊、地圖、列表、導航、從螢幕截圖建構），以及像是「實作行動應用程式」、「讓我的應用程式看起來像原生」、「加入導航」、「擷取一些資料」、「升級我的 SDK」、「將 Expo 加入我現有的原生應用程式」、「發佈到 App Store」或「我是 Expo 新手，該從哪裡開始」等措辭。即使是完整指定的請求（SDK 固定、函式庫已命名、佈局已給定）仍然會經過這裡——共用設定規則依然適用。當沒有上述訊號時請勿載入：沒有 expo 依賴的純 React Native 專案不屬於 Expo 工作。能夠偵測真實目標，導向正確的 expo-* / eas-* 技能，並擁有共用設定規則。

expo-overview (導覽與共用規則) 是什麼？

此技能是「expo-overview」，作為所有 Expo 與 EAS 相關工作的中央路由器與共用規則集。它的主要目的是在開發者或 AI 代理開始處理任何特定的「expo-*」或「eas-*」技能之前，先判斷請求是否確實屬於 Expo 或 EAS 範疇（例如，專案的 package.json 中有 expo 依賴，或使用者提到了 App Store 發佈）。一旦確認，它會將模糊的日常用語（例如「讓它看起來像原生」、「發佈它」）分類並對應到合適的專門技能，例如「expo-native-ui」或「eas-app-stores」。此技能也強制執行關鍵的共用設定規則，例如使用 `npx expo install` 來管理套件、檢查 eas 登入狀態與連結專案、偵測 SDK 版本以便查閱版本鎖定的文件、以及區分管理式與 bare/prebuild 工作流程。它支援所有提及 Expo 或 EAS 的平台（iOS、Android、Web），並且設計成在開發者或 AI 代理載入任何葉節點技能之前最先載入。此技能可防止使用者猜測錯誤的技能，並確保專案的共用設定始終一致，從而節省時間並減少錯誤。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/expo/skills/tree/main/plugins/expo/skills/expo-overview
查看原文→瀏覽所有技能

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

說明文件

expo-overview — Expo / EAS 的路由器與共用規則

從這裡開始 — 在執行任何操作前請先閱讀

請勿僅憑專案檔案猜測技能。 許多 Expo 目標在檔案系統上看似相似，但需要不同的技能。

  1. 確認這是 Expo 或 EAS 工作 — 請求提及 Expo 或 EAS，或 package.json 中有 expo 依賴。否則此技能不適用。 使用 EAS 進行交付的原生應用程式即使沒有 Expo 執行環境也算在內。
  2. 閱讀使用者的目標 — 他們想要什麼結果？以白話表述。
  3. 使用下方的技能地圖進行分類，將口語化的措辭轉換為目標。
  4. 若不明確則確認意圖（「聽起來您想要發佈到商店——這是 eas-app-stores。對嗎？」），然後載入該技能的 SKILL.md 並遵循之。
  5. 信任葉節點技能 — 它有它自己的偵測邏輯與步驟。請勿即興發揮。

技能地圖（依目標分類）

將目標與類別配對，然後找到技能，最後載入該葉節點的 SKILL.md。

建構應用程式

  • expo-project-structure — 新 Expo Router 專案的資料夾佈局：螢幕、元件和設定檔的位置（請勿重構現有應用程式以符合此佈局）
  • expo-native-ui — 螢幕、樣式、語義色彩、原生控制項、SF Symbols、多媒體、佈局
  • expo-router — 導航：基於檔案的路由、標籤頁 / 堆疊 / 模態 / 工作表、連結、頁首
  • expo-animation — 動畫與手勢：Reanimated worklets、Gesture Handler、畫面轉場、工作表與按壓回饋、觸覺回饋，以及修正在裝置上卡頓的動畫
  • expo-ui — 透過 @expo/ui 的原生 UI 元件：BottomSheet、Picker、Slider、Switch、Menu、Button、FieldGroup（分組的表單區段）、List / ListItem 等——在 iOS 上是真正的 SwiftUI，在 Android 上是 Jetpack Compose。通用層需要 SDK 56+ 並可在 Expo Go 中執行；替代方案（@gorhom/bottom-sheet、datetimepicker……）與平台特定層在 SDK 55 上也有提供。
  • expo-design-system — 單一視覺事實來源：設計代碼（顏色、間距、排版、圓角、陰影、動畫）、可複用的元件慣例，以及檢查偏差（硬編碼的顏色、間距、字型）
  • expo-tailwind-setup — Tailwind / NativeWind 樣式設定
  • expo-data-fetching — 網路請求、React Query / SWR、快取、離線、路由載入器
  • expo-dom — 在原生環境中執行 Web 程式碼或重複使用 Web 函式庫
  • expo-web-to-native — 將現有的 Web / React 應用程式遷移至原生 iOS / Android 應用程式

元件選擇規則： 每當你需要一個 UI 元件（列表列、底部工作表、選擇器、滑桿、選單、按鈕、分段控制項、切換開關）時，請先查閱 expo-ui，以檢查 @expo/ui 是否有原生的對應元件，然後再使用 React Native 內建或社群函式庫。原生 @expo/ui 元件提供最佳的平台貼合度，在 SDK 56+ 上，通用元件可在 Expo Go 中執行，無需自訂建置。對於任何呈現列表、詳細工作表或表單控制項的應用程式，請將 expo-ui 與 expo-native-ui 一起載入。一個例外：@expo/ui 的 List 呈現原生分組列（iOS 設定畫面），而非虛擬化列表——對於大型資料集，請使用 FlatList / FlashList。

發佈與營運

  • eas-app-stores — 建置並提交 iOS/Android 應用程式（Expo 和其他 React Native 專案，以及現有原生應用程式）、TestFlight、版本與商店後設資料
  • eas-hosting — 將 Web 套件部署到 EAS Hosting；同時編寫 Expo Router API 路由（+api.ts 處理常式）及其環境/網域
  • eas-workflows — EAS Workflow YAML 與 CI/CD 管線
  • eas-simulator — 在 EAS 雲端上的遠端 iOS / Android 模擬器中執行並驅動應用程式
  • expo-dev-client — 自訂開發建置
  • eas-update — 設定、發佈、測試與偵錯相容的 OTA 更新
  • eas-update-insights — OTA 更新健康度：當機率、採用率、套件大小
  • eas-observe — 使用 EAS Observe 進行啟動/載入/TTI 效能監控

以原生方式擴充

  • expo-module — 使用 Expo Modules API 的原生模組與檢視（Swift / Kotlin）
  • expo-brownfield — 在原生 SwiftUI/UIKit 或 Android 應用程式中嵌入 Expo / React Native 畫面；隔離的成品與整合建置
  • expo-app-clip — iOS App Clip 目標（AASA、智慧應用程式橫幅）

維護與學習

  • expo-upgrade — 升級 Expo SDK 並修正相依性衝突
  • expo-examples — 正典、版本匹配的整合範例（Stripe、Clerk、Supabase……）
  • expo-skill-feedback — 對 Expo 技能或 Expo 本身傳送意見回饋；啟用/停用匿名使用情況遙測

翻譯模糊的請求

某些日常用語並不明顯對應到技能名稱——請在路由前先進行翻譯：

  • 「讓它看起來像原生」 → 分組控制項 / 設定表單 = expo-ui；畫面、樣式 = expo-native-ui；動畫 = expo-animation；導航 = expo-router。
  • 「讓畫面一致」 / 「清理樣式」 / 「設定主題或設計代碼」 → expo-design-system。
  • 「看起來像 AI 生成的」 / 「太通用，不像原生」 → expo-design-system（具名原生存取提示 + 稽核），搭配 expo-native-ui 處理平台慣用語。
  • 「發佈它」 / 「取得 .ipa 或 .apk」 / 「發佈到商店」 / 「將我的 Swift 應用程式放到 TestFlight」 → eas-app-stores（建置 + 提交、TestFlight、版本、商店後設資料）。
  • 「我是新手 / 該從哪裡開始」 → 先建立基本架構（請參閱共用設定規則），然後依目標路由。

共用設定規則

套用與專案和請求任務相符的規則。

  • 使用 EAS 進行交付的原生應用程式？ 路由至 eas-app-stores；其 references/native-ios.md 涵蓋 iOS 上的 SwiftUI/UIKit。保留現有的原生專案。適用下方的 EAS 驗證/連結規則；Expo 基本架構、SDK 和套件安裝規則不適用於此路徑。
  • 正在啟動新的 Expo 應用程式？ 在路由到功能技能之前，請先以標準方式啟動一個：npx create-expo-app@latest，並根據 expo-project-structure 佈局資料夾。然後分類使用者的目標並路由。
  • 在提供版本特定的建議之前，請先偵測 SDK 版本：讀取 package.json（以及 app.json / app.config.{js,ts}）中的 expo 版本。許多 API 與預設值會因 SDK 而異。
  • 查閱該 SDK 的文件，而非 latest。 使用版本固定的 URL，例如在 SDK 56 上使用 https://docs.expo.dev/versions/v56.0.0/sdk/ui/ 而非 https://docs.expo.dev/versions/latest/sdk/ui/——latest 頁面追蹤的是最新的 SDK，可能記載了專案尚不具備的 API。
  • 移動到更新的 SDK 是它自己的任務——請載入 expo-upgrade，而不是手動更新版本。
  • Managed 與 Bare/Prebuild：存在已提交的 ios/ 和 android/ 目錄表示原生專案已存在（prebuild 或 bare）。設定檔外掛程式和原生設定的步驟會有所不同——請注意專案屬於哪一種。
  • 使用 npx expo install <pkg> 安裝套件，不要使用原始的 npm / yarn / pnpm add，這樣版本才能與專案的 SDK 保持相容。
  • EAS 驗證與連結（僅在建置/提交/更新/監控/工作流程時需要）：使用 eas whoami 檢查登入狀態，使用 eas login 登入。當應用程式設定檔中存在 extra.eas.projectId 時，表示專案已連結；若缺少則使用 eas init 建立。

何時跳過路由器跳轉

  • 僅當使用者明確指名了特定的 expo-* / eas-* 技能時 → 直接載入該技能。
  • 完整指定的任務（SDK 版本已固定、檔案佈局已給定、函式庫已命名）不是跳過路由的理由：上述共用規則仍然適用——請檢查它們，然後路由至相符的葉節點技能。

提交意見回饋

如果您在此技能中遇到錯誤、誤導性或過時的資訊，請回報以便 Expo 改進：

npx --yes submit-expo-feedback@latest --category skills --subject "expo-overview" "<可行的意見回饋>"

只有在您有具體且可行的內容要回報時才提交。請盡可能包含相關的背景資訊。 如果 AI 代理重複失敗或用戶必須接手一個 Expo 任務，請載入 expo-skill-feedback 技能並遵循其評估候選流程，而不是重複使用上述指令。

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

expo/add-app-clip

Add an iOS App Clip target to an Expo app. Use when the user mentions App Clip, AASA, apple-app-site-association, appclips, smart app banner, or wants to ship a lightweight iOS Clip invoked from a URL alongside their parent app.

expo/building-native-ui

Complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs.

expo/eas-update-insights

Check the health of published EAS Updates: crash rates, install/launch counts, unique users, payload size, and the split between embedded and OTA users per channel. Use when the user asks how an update is performing, whether a rollout is healthy, how many users are on the embedded build vs OTA, or wants to gate CI on update health.

expo/expo-api-routes

Guidelines for creating API routes in Expo Router with EAS Hosting

expo/expo-brownfield

Integrate Expo and React Native into an existing native iOS or Android app. Use when the user mentions brownfield, embedding React Native in a native app, AAR/XCFramework, or adding Expo to an existing Kotlin/Swift project. Covers both the isolated approach and the integrated approach.

expo/expo-cicd-workflows

Helps understand and write EAS workflow YAML files for Expo projects. Use this skill when the user asks about CI/CD or workflows in an Expo or EAS context, mentions .eas/workflows/, or wants help with EAS build pipelines or deployment automation.

expo/expo-deployment

Deploying Expo apps to iOS App Store, Android Play Store, web hosting, and API routes

expo/expo-dev-client

Build and distribute Expo development clients locally or via TestFlight

expo/expo-examples

Framework (OSS). Expo's official example projects - the expo/examples repo of ~70 `with-*` integrations (Stripe, Clerk, Supabase, OpenAI, maps, Reanimated, SQLite, Skia, NativeWind, and more). Use when integrating a third-party library or service into an existing Expo app and you want the canonical, version-matched pattern to adapt, or when scaffolding a new project from one with `npx create-expo --example`.

expo/expo-module

Guide for creating and writing Expo native modules and views using the Expo Modules API (Swift, Kotlin, TypeScript). Covers module definition DSL, native views, shared objects, config plugins, lifecycle hooks, autolinking, and type system. Use when building or modifying native modules for Expo.

expo/expo-observe

Use for anything related to EAS Observe — adding `expo-observe` to an Expo project (AppMetricsRoot/ObserveRoot HOC, markInteractive, the useObserve hook, and the Expo Router / React Navigation integrations for per-route metrics), querying via the EAS CLI (`eas observe:metrics-summary`, `observe:metrics`, `observe:routes`, `observe:events`, `observe:versions`), or interpreting the resulting metrics (cold/warm launch, TTR, TTI, navigation cold/warm TTR, update download, and the TTI frameRate params for triaging slow startups).

expo/expo-router

Framework (OSS). Navigation and routing for Expo Router. Covers file-based routes, groups and dynamic routes, folder organization, Link with previews and context menus, native Stack, page titles, modals and form sheets, NativeTabs, headers and toolbars, and header search bars.

expo/expo-skill-eval

Evaluate Expo skills in this repo end-to-end - trigger accuracy, generated code quality, and runtime screenshots on iOS simulator and Android emulator via Expo Go (web optional). Use when the user wants to eval an Expo skill, test that a skill produces working code, benchmark a skill with device screenshots, or verify a skill's output renders correctly.

expo/expo-tailwind-setup

Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling

expo/expo-ui

Framework (OSS). Build native UI with the @expo/ui package: real SwiftUI on iOS and Jetpack Compose on Android. Default to @expo/ui for sheets (BottomSheet), pickers, sliders, toggles, menus, and grouped-form sections — do NOT reach for Reanimated, @gorhom/bottom-sheet, or RN built-in Picker/Switch; use @expo/ui instead. Fall back to RN built-ins only when @expo/ui is missing the component. NOTE: @expo/ui List renders native grouped rows like an iOS Settings screen — it is NOT a virtualized list; use FlatList/FlashList for large datasets. Covers universal components (Host, Column, Row, Button, Text, List, BottomSheet, FieldGroup, Switch, Slider, Picker, Menu), drop-in replacements for RN community libraries, and platform-specific SwiftUI/Jetpack Compose trees. Not for Expo Router navigation, Reanimated, or data fetching.

expo/expo-ui-jetpack-compose

`@expo/ui/jetpack-compose` package lets you use Jetpack Compose Views and modifiers in your app.

expo/expo-ui-swiftui

`@expo/ui/swift-ui` package lets you use SwiftUI Views and modifiers in your app.

expo/expo-upgrade

Framework (OSS). Guidelines for upgrading Expo SDK versions and fixing dependency issues

expo/native-data-fetching

Use when implementing or debugging ANY network request, API call, or data fetching. Covers fetch API, React Query, SWR, error handling, caching, offline support, and Expo Router data loaders (`useLoaderData`).

expo/skills

Build and submit iOS and Android apps with EAS to TestFlight, the App Store, or Google Play. Supports Expo and other React Native projects, plus existing native apps. Use for eas.json setup, release pipelines, signing, app versions and build numbers, store submissions, and listing metadata. For Expo websites and API routes, use eas-hosting; for adding React Native screens to a native app, use expo-brownfield.

相關技能

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community