expo-overview

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

expo-overview

— router & shared rules for Expo / EAS

expo-overview

— Expo/EAS的路由工具与共享规则

Start Here — read before doing anything

从这里开始——执行任何操作前请阅读

Do not guess the skill from project files alone. Many Expo goals look similar from the filesystem but need different skills.

Confirm this is Expo work — the request mentions Expo, or
```
package.json
```
has an
```
expo
```
dependency. If neither holds, stop: this skill does not apply. A bare React Native project with no
```
expo
```
dependency is not Expo work.
Read the user's goal — what outcome do they want, in plain terms?
Classify it using the Skill Map below, translating casual phrasing to a goal.
Confirm intent if ambiguous ("Sounds like you want to ship to the stores — that's
```
eas-app-stores
```
. Right?"), then load that skill's
```
SKILL.md
```
and follow it.
Trust the leaf skill — it has its own detection logic and steps. Don't improvise.

不要仅通过项目文件猜测技能。 许多Expo目标从文件系统看类似，但需要不同的技能。

确认这是Expo相关工作——需求提及Expo，或
```
package.json
```
包含
```
expo
```
依赖。如果两者都不满足，请停止：此技能不适用。没有
```
expo
```
依赖的纯React Native项目不属于Expo相关工作。
理解用户目标——他们想要的结果是什么，用直白的话描述？
使用下方的技能地图进行分类，将日常表述转化为明确目标。
若存在歧义请确认意图（“听起来你想要发布到应用商店——那需要使用
```
eas-app-stores
```
技能。对吗？”），然后加载该技能的
```
SKILL.md
```
并遵循其指引。
信任分支技能——它有自己的检测逻辑和步骤。不要自行发挥。

Skill Map (by goal)

技能地图（按目标分类）

Match the goal to a category, then the skill, then load that leaf's

SKILL.md

Build the app

```
expo-project-structure
```
— folder layout for a new Expo Router project: where screens, components, and config live (never restructure an existing app to match)
```
expo-native-ui
```
— screens, styling, semantic colors, native controls, SF Symbols, media, animations, layout
```
expo-router
```
— navigation: file-based routes, tabs / stacks / modals / sheets, links, headers
```
expo-animation
```
— motion and gestures: Reanimated worklets, Gesture Handler, screen transitions, sheet and press feedback, haptics, and fixing animation that stutters on device
```
expo-ui
```
— native UI components via
```
@expo/ui
```
: BottomSheet, Picker, Slider, Switch, Menu, Button, FieldGroup (grouped form sections), List / ListItem, and more — real SwiftUI on iOS, Jetpack Compose on Android. The universal layer needs SDK 56+ and runs in Expo Go; the drop-in replacements (
```
@gorhom/bottom-sheet
```
,
```
datetimepicker
```
, …) and platform-specific layers also exist on SDK 55.
```
expo-design-system
```
— one visual source of truth: design tokens (color, spacing, typography, radius, shadow, motion), reusable component conventions, and audits for drift (hardcoded colors, spacing, fonts)
```
expo-tailwind-setup
```
— Tailwind / NativeWind styling
```
expo-data-fetching
```
— network requests, React Query / SWR, caching, offline, route loaders
```
expo-dom
```
— run web code or reuse a web library inside native
```
expo-web-to-native
```
— migrate an existing web / React app to a native iOS / Android app

Component selection rule: whenever you need a UI component (list rows, bottom sheets, pickers, sliders, menus, buttons, segmented controls, toggles), consult
expo-ui
first to check whether
@expo/ui
has a native equivalent before reaching for a React Native built-in or a community library. Native
@expo/ui
components give the best platform fit, and on SDK 56+ the universal ones run in Expo Go with no custom build. Load
expo-ui
alongside
expo-native-ui
for any app that renders lists, detail sheets, or form controls. One exception:
@expo/ui
List
renders native grouped rows (an iOS Settings screen), not a virtualized list — use
FlatList
/
FlashList
for large datasets.

Ship & operate

```
eas-app-stores
```
— build and submit to the App Store / Play Store / TestFlight, versions, and store metadata
```
eas-hosting
```
— deploy the web bundle to EAS Hosting; also author Expo Router API routes (
```
+api.ts
```
handlers) and their environments / domains
```
eas-workflows
```
— EAS Workflow YAML and CI/CD pipelines
```
eas-simulator
```
— run and drive the app on a remote iOS / Android simulator on EAS cloud
```
expo-dev-client
```
— custom development builds
```
eas-update-insights
```
— OTA update health: crash rate, adoption, payload size
```
eas-observe
```
— startup / launch / TTI performance with EAS Observe

Extend natively

```
expo-module
```
— native modules and views (Swift / Kotlin) with the Expo Modules API
```
expo-brownfield
```
— embed Expo / React Native in an existing native app
```
expo-app-clip
```
— iOS App Clip target (AASA, smart app banner)

Maintain & learn

```
expo-upgrade
```
— upgrade the Expo SDK and fix dependency conflicts
```
expo-examples
```
— canonical, version-matched integration examples (Stripe, Clerk, Supabase, …)
```
expo-skill-feedback
```
— send feedback on an Expo skill or on Expo itself; enable / disable the anonymous usage telemetry

将目标匹配到对应类别，再找到对应的技能，然后加载该分支技能的

SKILL.md

。

构建应用

```
expo-project-structure
```
— 新Expo Router项目的文件夹布局：屏幕、组件和配置的存放位置（切勿重构现有应用以匹配此布局）
```
expo-native-ui
```
— 屏幕、样式、语义颜色、原生控件、SF Symbols、媒体、动画、布局
```
expo-router
```
— 导航：基于文件的路由、标签页/栈/模态框/底部弹窗、链接、头部
```
expo-animation
```
— 动效与手势：Reanimated工作单元、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
```
— 构建并提交到App Store/Play Store/TestFlight、版本管理、应用商店元数据
```
eas-hosting
```
— 将Web包部署到EAS Hosting；同时支持编写Expo Router API路由（
```
+api.ts
```
处理器）及其环境/域名配置
```
eas-workflows
```
— EAS工作流YAML与CI/CD流水线
```
eas-simulator
```
— 在EAS云端的远程iOS/Android模拟器上运行和调试应用
```
expo-dev-client
```
— 自定义开发构建
```
eas-update-insights
```
— OTA更新健康度：崩溃率、采用率、包大小
```
eas-observe
```
— 使用EAS Observe监控启动/加载/TTI性能

原生扩展

```
expo-module
```
— 使用Expo Modules API开发原生模块与视图（Swift/Kotlin）
```
expo-brownfield
```
— 在现有原生应用中嵌入Expo/React Native
```
expo-app-clip
```
— iOS App Clip目标（AASA、智能应用横幅）

维护与学习

```
expo-upgrade
```
— 升级Expo SDK并修复依赖冲突
```
expo-examples
```
— 规范的、版本匹配的集成示例（Stripe、Clerk、Supabase等）
```
expo-skill-feedback
```
— 提交关于Expo技能或Expo本身的反馈；启用/禁用匿名使用遥测

Translating vague asks

模糊需求转化

Some everyday phrasings don't obviously map to a skill name — translate before routing:

"Make it look native" → grouped controls / settings forms =
```
expo-ui
```
; screens, styling, animations =
```
expo-native-ui
```
; navigation =
```
expo-router
```
.
"Make the screens consistent" / "clean up the styling" / "set up a theme or design tokens" →
```
expo-design-system
```
.
"Ship it" / "get an .ipa or .apk" / "release to the stores" →
```
eas-app-stores
```
(build + submit, TestFlight, versions, store metadata).
"I'm new / where do I start" → scaffold first (see Shared setup rules), then route by goal.

一些日常表述无法直接对应技能名称——转化后再进行路由：

“让它看起来像原生应用” → 分组控件/设置表单 =
```
expo-ui
```
；屏幕、样式、动画 =
```
expo-native-ui
```
；导航 =
```
expo-router
```
。
“让屏幕保持一致”/“清理样式”/“设置主题或设计令牌” →
```
expo-design-system
```
。
“发布应用”/“获取.ipa或.apk文件”/“发布到应用商店” →
```
eas-app-stores
```
（构建+提交、TestFlight、版本管理、应用商店元数据）。
“我是新手/该从哪里开始” → 先搭建项目（参考共享设置规则），再根据目标路由。

Shared setup rules

共享设置规则

These apply across every Expo skill, so handle them here once instead of repeating them in each leaf.

No Expo project yet? Start one the standard way before routing to a feature skill:
```
npx create-expo-app@latest
```
, laying out folders per
```
expo-project-structure
```
. Then classify the user's goal and route.
Detect the SDK version before giving version-specific advice: read the
```
expo
```
version in
```
package.json
```
(and
```
app.json
```
/
```
app.config.{js,ts}
```
). Many APIs and defaults differ by SDK.
Read the docs for that SDK, not
latest
. Use the version-pinned URL, e.g.
```
https://docs.expo.dev/versions/v56.0.0/sdk/ui/
```
on SDK 56 instead of
```
https://docs.expo.dev/versions/latest/sdk/ui/
```
— the
```
latest
```
pages track the newest SDK and can document APIs the project does not have yet.
Moving to a newer SDK is its own task — load
```
expo-upgrade
```
instead of bumping versions by hand.
Managed vs. bare/prebuild: the presence of committed
```
ios/
```
and
```
android/
```
directories means native projects exist (prebuild or bare). Config-plugin and native-setup steps differ — note which one the project is in.
Install packages with
npx expo install <pkg>
, not raw
```
npm
```
/
```
yarn
```
/
```
pnpm add
```
, so versions stay compatible with the project's SDK.
EAS auth & linking (only needed for build/submit/update/observe/workflows): check login with
```
eas whoami
```
, log in with
```
eas login
```
. A project is linked when
```
extra.eas.projectId
```
exists in the app config; create it with
```
eas init
```
if missing.

这些规则适用于所有Expo技能，因此在此统一处理，无需在每个分支技能中重复。

还没有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
```
技能，而非手动升级版本。
托管式 vs. 原生/预构建：若存在已提交的
```
ios/
```
和
```
android/
```
目录，则表示存在原生项目（预构建或原生项目）。配置插件和原生设置步骤不同——请注意项目所属类型。
使用
npx expo install <pkg>
安装包，而非直接使用
```
npm
```
/
```
yarn
```
/
```
pnpm add
```
，以确保版本与项目SDK兼容。
EAS认证与关联（仅在构建/提交/更新/监控/工作流时需要）：使用
```
eas whoami
```
检查登录状态，使用
```
eas login
```
登录。当应用配置中存在
```
extra.eas.projectId
```
时，表示项目已关联；若缺失，使用
```
eas init
```
创建。

When to skip the router hop

何时跳过路由步骤

Only when the user explicitly named a specific
```
expo-*
```
/
```
eas-*
```
skill → load that skill directly.
A fully-specified task (SDK version pinned, file layout given, libraries named) is not a reason to skip: the shared rules above still apply — check them, then route to the matching leaf skill.

仅当用户明确指定某个
```
expo-*
```
/
```
eas-*
```
技能时→直接加载该技能。
完全明确的任务（指定SDK版本、给定文件布局、命名库）不是跳过路由的理由：上述共享规则仍然适用——先检查这些规则，再路由到匹配的分支技能。

Submitting Feedback

提交反馈

If you encounter errors, misleading or outdated information in this skill, report it so Expo can improve:

bash

npx --yes submit-expo-feedback@latest --category skills --subject "expo-overview" "<actionable feedback>"

Only submit when you have something specific and actionable to report. Include as much relevant context as possible. If an AI agent repeatedly failed or the user had to take over an Expo task, load the expo-skill-feedback skill and follow its eval-candidate flow instead of reusing the command above.

如果在此技能中遇到错误、误导性或过时信息，请报告给Expo以帮助改进：