Expo Skills

repository·main·Indexed 25 days ago

https://github.com/expo/skills

A collection of specialized knowledge modules designed to empower AI coding agents—such as Claude Code, Cursor, and GitHub Copilot—to build, deploy, and debug Expo applications. It includes open-source Framework skills for development tasks (routing, UI, native modules, and SDK upgrades) and paid Services skills for Expo Application Services (EAS) tasks including App Store submissions, EAS Build, hosting, and remote cloud simulators.

Tokens
125K
Snippets
340
Records
505
Agent score
81%

What's inside expo-skills

  1. Overview of Expo AI Agent Skills

    main

    Expo provides official AI agent skills designed to assist with building, deploying, upgrading, and debugging Expo applications. These skills are categorized into two distinct groups based on their cost and purpose:

    1. Framework Skills (Open Source): Focused on development tasks such as project structure, navigation (Expo Router), UI components (@expo/ui), data fetching, styling (Tailwind CSS/NativeWind), native modules, and SDK upgrades.
    2. Services & Paid Distribution Skills: Focused on Expo Application Services (EAS) tasks such as App Store/Play Store submissions, EAS Build configuration, CI/CD workflows, EAS Update monitoring, EAS Hosting, and remote cloud simulators. Note that these skills often involve paid EAS services and may have plan limits.

    Use Framework skills for local development and building features, and Services skills for deployment, distribution, and production monitoring.

  2. Overview of EAS Observe CLI commands

    main

    EAS Observe collects app performance telemetry and custom events from Expo apps. You can access this data using five primary CLI commands:

    • eas observe:metrics-summary: Provides per-version statistical aggregates (median, p90, etc.) for app-startup performance metrics.
    • eas observe:metrics: Provides individual performance metric samples, ordered by value or timestamp (paginated).
    • eas observe:routes: Provides per-route statistical aggregates for navigation metrics (Cold TTR, Warm TTR, Nav TTI).
    • eas observe:events: Provides custom events emitted via logEvent. You can view a summary of event names, all events, or filter by a specific event name.
    • eas observe:versions: Displays the app version hierarchy, including build numbers, OTA update IDs, and event counts.
  3. Overview of EAS Observe

    main

    EAS Observe is a paid Expo Application Services product that tracks startup, navigation, and custom-event performance from production Expo apps. It allows you to monitor metrics such as cold/warm launch, Time to Render (TTR), Time to Interactive (TTI), navigation performance, update downloads, and more.

    Note: This is a paid service. Ingesting and querying production metrics counts against your plan's event/usage allowance. Review the Expo pricing page before enabling it in production.

  4. Overview of Expo Skills

    main

    Expo Skills are specialized knowledge modules used by agents and developers to handle specific tasks within the Expo ecosystem. They are categorized into two main types:

    1. Framework (OSS): Free, open-source Expo SDK and React Native skills. These focus on development, navigation, UI, data fetching, and module creation.
    2. EAS service (paid): Skills centered around paid Expo Application Services (EAS). These focus on production builds, hosting, CI/CD workflows, observability, and remote simulators.

    Skills are discovered by agents via a SKILL.md file located exactly one level deep in the skills/ directory (e.g., skills/<skill-name>/SKILL.md).

  5. Migrate a web React app to native with expo-web-to-native

    main

    The expo-web-to-native skill provides a framework for migrating an existing web React app (Next.js, Vite, CRA, etc.) to a native iOS/Android app using Expo.

    Key Principles:

    • Migrate, don't rewrite: Use a 'strangler fig' approach, standing up a native shell and replacing web screens with native ones incrementally.
    • Ship on day one: Use the expo-dom skill to run the entire web UI inside a native shell immediately.
    • Strangle by value: Nativize high-value/hot screens first; leave less critical screens in a webview to save on runtime overhead.
    • Nativize means redesign: Do not just reskin web layouts. Use @expo/ui to render real SwiftUI/Compose components so the app feels native to the OS.
    • Verify by running: A successful build does not guarantee a working UI. Always verify content and behavior by running the app on a device/simulator.
  6. Use the expo-data-fetching skill

    main

    The expo-data-fetching skill is a framework for implementing or debugging any networking work, including API requests, data fetching, caching, or network debugging. Use this skill when implementing API requests, setting up data fetching libraries (React Query, SWR), using Expo Router data loaders, debugging network failures, implementing caching, handling offline scenarios, managing authentication, or configuring API URLs via environment variables.

    Preference: Avoid axios; prefer the standard fetch API.

  7. Understand the EAS Workflows Skill

    main

    The eas-workflows skill is designed to help developers write, edit, and validate EAS CI/CD workflow YAML files for Expo projects.

    Important Note: EAS is a paid service. Each workflow job consumes build/compute minutes according to your Expo plan. Jobs that build or submit applications also require paid Apple Developer and Google Play accounts. Review expo.dev/pricing before triggering runs.

  8. Use Expo Examples for library integrations

    main

    The expo/examples repository contains approximately 70 official integration examples (e.g., with-stripe, with-clerk, with-supabase). These are managed projects designed to show the canonical integration pattern for a specific library or service, including the correct dependency set, app.json config plugins, and minimal wiring for the current Expo SDK.

    Key Characteristics:

    • Managed Projects: They do not contain ios/ or android/ directories; native setup is handled via config plugins.
    • Minimal Scope: Most examples are single-screen implementations (~100–200 lines).
    • Purpose: Use them to find the correct integration pattern to adapt into your existing app, rather than for application architecture.

    Usage Modes:

    1. Inspiration / Adapt: Use an existing project as a reference to manually apply patterns to your own code.
    2. Scaffold: Start a brand new project directly from an example.
  9. Use EAS Simulator for remote iOS/Android sessions

    main

    EAS Simulator is a paid service that runs remote iOS simulators or Android emulators on Expo Application Services (EAS) cloud infrastructure. It is designed for environments that cannot run simulators locally (e.g., Linux, CI, or cloud-based AI agents like Cursor Cloud) or when a user needs to test a specific iOS version they lack on a Mac.

    Important Constraints:

    • Not for local simulators: Do not use this for expo run:ios, Xcode, or Android Studio.
    • Not for EAS Build/Update: This is for running/interacting with a simulator, not for building binaries or deploying updates.
    • Cost: This is a paid service. Sessions use your plan's compute allowance.
    • Experimental: The simulator:* commands are experimental. Always use npx --yes eas-cli@latest to ensure you have the required version (≥ 20.3.0).
  10. What is the Expo MCP Server?

    main

    While Skills provide the knowledge (how to do things), the Expo MCP (Model Context Protocol) server provides the capability (actually doing the work).

    The MCP server allows an agent to:

    • Read the latest Expo documentation on demand.
    • Install compatible dependencies using npx expo install.
    • Trigger and monitor EAS builds and workflows.
    • Pull crash data from TestFlight.
    • Screenshot a running app in the simulator.

    If you use the Claude Code or Codex plugins, the MCP configuration is bundled and wired up automatically. For other agents, you must follow the Expo MCP setup guide.

  11. Understand the Brownfield: Isolated Approach

    main

    The Isolated Approach allows you to build React Native + Expo code as prebuilt native libraries: an AAR for Android and XCFrameworks (or a Swift Package) for iOS. These artifacts can be consumed by an existing native app as standard dependencies.

    When to use this approach

    • Native and React Native teams are separate or have different release cadences.
    • The native team should not be required to install Node.js, Yarn, or React Native tooling.
    • The React Native code resides in a separate repository or a monorepo.
    • You want to minimize the impact on the existing native build pipeline.

    Produced Artifacts

    PlatformArtifactDefault Location
    Android{group}:{libraryName}:{version} AARLocal Maven (~/.m2) by default; remote Maven also supported
    iOSSet of .xcframeworks or a single Swift Package (via --package)./artifacts

    Note: In release builds, the JavaScript bundle is embedded inside the artifact, so the native app does not require Metro at runtime in production.