expo-overview — Expo / EAS のルーターと共通ルール
最初に読む — 何かをする前に行うこと
プロジェクトファイルだけでスキルを推測しないでください。 多くの Expo 目標はファイルシステム上では似ていますが、異なるスキルを必要とします。
- これが Expo または EAS の作業かを確認 — リクエストに Expo または EAS が含まれているか、
package.jsonにexpo依存関係があるかを確認します。そうでなければ、このスキルは適用されません。EAS を使用して配信するネイティブアプリは、Expo ランタイムがなくても条件を満たします。 - ユーザーの目標を読む — ユーザーが平易な言葉で何を求めているかを把握します。
- 以下のスキルマップを使用して分類し、カジュアルな表現を目標に変換します。
- 曖昧な場合は意図を確認(「ストアにリリースしたいように聞こえますね。それは
eas-app-storesのタスクです。よろしいですか?」)。その後、該当スキルのSKILL.mdを読み込み、それに従います。 - 末端のスキルを信頼 — 各スキルには独自の検出ロジックと手順があります。場当たり的な対応は避けてください。
スキルマップ(目標別)
目標をカテゴリに分類し、その後スキルにマッピングし、そのスキルの 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— 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-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 によって異なります。 latestではなく、その SDK のドキュメントを読む。 バージョン固定の 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)を意味します。Config-plugin とネイティブセットアップの手順が異なります — プロジェクトがどちらであるかを確認してください。 - パッケージは
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" "<actionable feedback>"
具体的で実行可能な報告事項がある場合のみ送信してください。可能な限り多くの関連コンテキストを含めてください。 AI エージェントが繰り返し失敗した場合や、ユーザーが Expo タスクを引き継ぐ必要があった場合は、上記のコマンドを再利用する代わりに、expo-skill-feedback スキルを読み込み、その評価候補フローに従ってください。