expo-overview

expo-overview — Expo / EAS 向けのルーターと共通ルール

まずここから — 何かを始める前にお読みください

プロジェクトファイルだけを見て、スキルを推測しないでください。 ファイルシステム上では似ているように見えても、目的によって必要なスキルは異なります。

1. Expo または EAS に関する作業か確認します — リクエストに Expo または EAS が記載されているか、package.json に expo の依存関係がある場合が該当します。それ以外の場合、このスキルは適用されません。 Expo ランタイムを使用していなくても、EAS で配信するネイティブアプリは対象です。
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 ワークレット、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 コンポーネント（リスト行、ボトムシート、ピッカー、スライダー、メニュー、ボタン、セグメントコントロール、トグル）が必要な場合は、React Native の組み込み機能やコミュニティライブラリを使う前に、必ず 最初に expo-ui を確認し、@expo/ui にネイティブ相当のものがあるか調べてください。ネイティブの @expo/ui コンポーネントはプラットフォームへの適合性が最も高く、SDK 56 以降ではユニバーサルコンポーネントをカスタムビルドなしで Expo Go 上で実行できます。リスト、詳細シート、フォームコントロールを表示するアプリでは、expo-ui と expo-native-ui を併せて読み込んでください。例外が 1 つあります。@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 — Expo／React Native の画面をネイティブの SwiftUI／UIKit アプリや Android アプリに組み込みます。分離された成果物と統合ビルドに対応します
• expo-app-clip — iOS App Clip ターゲット（AASA、スマートアプリバナー）

メンテナンスと学習

• expo-upgrade — Expo SDK をアップグレードし、依存関係の競合を解決
• expo-examples — 正式なバージョン対応の統合例（Stripe、Clerk、Supabase など）

曖昧な依頼の振り分け

日常的な表現の中には、スキル名にすぐ対応付けられないものがあります。振り分ける前に言い換えてください。

• 「ネイティブらしい見た目にして」→ グループ化されたコントロール／設定フォーム＝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 によって異なります。
• latest ではなく、その SDK のドキュメントを読んでください。 SDK 56 では、たとえば https://docs.expo.dev/versions/latest/sdk/ui/ ではなく、バージョンを指定した URL の https://docs.expo.dev/versions/v56.0.0/sdk/ui/ を使用します。latest のページは最新の SDK を対象としており、プロジェクトではまだ利用できない API が記載されていることがあります。
• 新しい SDK への移行は独立したタスクです。バージョンを手動で上げるのではなく、expo-upgrade を読み込んでください。
• Managed と bare／prebuild の違い：ios/ と android/ ディレクトリがコミットされている場合、ネイティブプロジェクト（prebuild または bare）が存在します。設定プラグインとネイティブセットアップの手順は異なるため、プロジェクトがどちらに該当するかを確認してください。
• パッケージのインストールには npm／yarn／pnpm add ではなく npx expo install <pkg> を使用してください。プロジェクトの SDK との互換性を保てます。
• 自分でアプリを起動しますか？ Expo Go または開発ビルドを開いて表示、スクリーンショット撮影、操作を行う場合は、初回起動時のオンボーディング、起動時に開く開発メニュー、フローティングの Tools ボタンをスキップしてください。SDK 58 以降では、Expo CLI が非対話型シェルから起動する場合、これらをスキップします。SDK 57 以前の場合、および自分で開く URL（simctl openurl、adb、コントローラーを使用する場合）については、./references/launch-without-dev-menu.md に従ってください。
• EAS の認証とリンク設定（ビルド／提出／更新／監視／ワークフローでのみ必要）：eas whoami でログイン状態を確認し、eas login でログインします。アプリ設定に extra.eas.projectId があれば、プロジェクトはリンク済みです。存在しない場合は eas init で作成してください。

ルーターを介さずに振り分ける場合

• ユーザーが特定の expo-*／eas-* スキルを明示的に指定した場合に限り、そのスキルを直接読み込みます。
• タスクの仕様がすべて決まっている場合（SDK バージョンが固定され、ファイル構成が提示され、ライブラリが指定されている場合）も、ルーターを省略する理由にはなりません。共通ルールは引き続き適用されるため、確認してから該当する個別スキルに振り分けてください。

フィードバックの送信

このスキルに誤り、誤解を招く情報、古い情報があった場合は、Expo が改善できるよう報告してください。

npx --yes @expo/agent-cli@latest feedback --category skills --subject "expo-overview" "<actionable feedback>"

具体的で実行可能な内容がある場合に限り、送信してください。関連する背景情報をできるだけ詳しく記載してください。 エージェントが Expo のタスクを繰り返し失敗する場合、またはユーザーが介入しなければならない場合は、タスク、期待される結果、問題点を簡潔に報告し、--category evals と、関連する Expo パッケージまたはコマンドを --subject として指定してください。