Communitygithub.com

expo-expo-overview

框架(开源)。每个 Expo 或 EAS 任务的入口点和路由器。在编写代码之前,以及在选择其他 expo-* / eas-* 技能之前,请先加载此技能——当请求、PRD 或规范提到 Expo、EAS、Expo Go 或 expo-* 包,或者项目的 package.json 中存在 expo 依赖项时。在此范围内,它还涵盖要实现的应用程序规格和设计(标签栏、堆栈、地图、列表、导航、根据截图构建),以及诸如“实现一个移动应用”、“让我的应用看起来原生”、“添加导航”、“获取一些数据”、“升级我的 SDK”、“将 Expo 添加到我现有的原生应用中”、“发布到 App Store”或“我是 Expo 新手,我从哪里开始”等表述。即使是完全指定的请求(SDK 固定、库已命名、布局给定)仍会路由至此——共享设置规则仍然适用。当没有上述信号时,请勿加载:一个没有 expo 依赖项的纯 React Native 项目不是 Expo 工作。检测真实目标,路由到正确的 expo-* / eas-* 技能,并拥有共享设置规则。

expo-expo-overview 是什么?

expo-overview 是 Expo 和 EAS 相关任务的中枢路由器和共享规则引擎。作为一个至关重要的第一技能,它在加载任何其他 expo-* 或 eas-* 技能之前加载,负责通过将用户模糊的请求(如“让我的应用看起来原生”或“发布到商店”)映射到特定的封装技能,例如 expo-native-ui、expo-router、eas-app-stores 等,来对用户意图进行分类。该技能在所有 Expo 项目(包括将 EAS 用于交付的纯原生应用)上强制执行共享设置规则,例如检测 SDK 版本以确保使用版本固定的 Expo 文档、使用 npx expo install 进行正确的包管理,以及处理 EAS 身份验证和项目链接。它提供了一种结构化的分类方法,并包含一个全面的技能映射,将宽泛的用户目标与适当的子技能逐个对应,确保 AI 代理不会通过直接修改文件或将一个任务的手动步骤应用于另一个任务来猜测。该技能在 Chat(Claude Code、Codex)和 IDE 插件(Cursor)上均受支持,是 AI 代理成功处理 Expo 工作流的基础,确保在采用平台特定功能之前正确应用共享配置。

兼容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/expo/skills/tree/main/plugins/expo/skills/expo-overview

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

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 工作线程、手势处理器、屏幕过渡、表单和按压反馈、触觉反馈,以及修复在设备上卡顿的动画
  • 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-native-ui 一起加载 expo-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 — 配置、发布、测试和调试兼容的无线更新
  • eas-update-insights — OTA 更新健康度:崩溃率、采用率、负载大小
  • eas-observe — 使用 EAS Observe 进行启动/加载/首屏时间性能监测

原生扩展

  • 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 中的 expo 版本(以及 app.json / app.config.{js,ts})。许多 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 而不是手动提升版本。
  • 托管式 vs. 裸式/prebuild:存在已提交的 ios/ 和 android/ 目录意味着存在原生项目(prebuild 或裸式)。配置插件和原生设置步骤有所不同 — 注意项目处于哪种模式。
  • 使用 npx expo install <包名> 安装包,而不是原始的 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 技能并遵循其 eval-candidate 流程,而不是重复使用上述命令。

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.

相关技能