Communitygithub.com

expo/expo-overview

Expoフレームワーク全体のエントリーポイントとルーター。すべてのExpo/EASタスクの前に読み込み、プロジェクトの目標を検出して適切な専門スキルにルーティングします。

expo-overview とは?

このスキルは、Expo / EAS に関連するあらゆるタスクの最初のエントリーポイントとして機能します。ユーザーのリクエストやプロジェクト構成を分析し、実際の目的を検出した上で、適切な専門スキル(expo-* / eas-*)にルーティングする責務を持ちます。また、SDKバージョンの自動検出、`npx expo install` によるパッケージインストール、EAS認証・リンク設定など、すべてのExpoプロジェクトに共通するセットアップルールを一元管理します。単なる「モバイルアプリを実装したい」「App Storeに公開したい」といった曖昧なリクエストも、あらかじめ定義されたスキルマップを通じて適切に解釈・転送します。このスキルは、Expo Router を使用した新規プロジェクトのスキャフォールディング、EAS を用いたネイティブアプリの構築・提出、UIコンポーネントの選択(`@expo/ui` 優先)、アニメーション実装、デザインシステムの導入など、あらゆるフェーズの前に必ず実行する必要があります。対象外は、`expo` 依存関係のない素のReact Nativeプロジェクトのみです。なお、ユーザーが明示的に特定のスキル名を指定した場合や、SDK、ライブラリ、レイアウトが全て指定された「完全指定タスク」の場合でも、このスキルはスキップせず、共有ルールを適用した後にルーティングを行います。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/expo/skills/tree/main/plugins/expo/skills/expo-overview

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

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 ワークレット、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 スキルを読み込み、その評価候補フローに従ってください。

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.

関連スキル