Communitygithub.com

expo/expo-overview

Punto de entrada y enrutador para cualquier tarea con Expo o EAS. Carga esta habilidad primero — antes de escribir código y de elegir otra habilidad expo-* / eas-* — cuando la solicitud, el PRD o la especificación mencione Expo, EAS, Expo Go o un paquete expo-*, o el proyecto tenga una dependencia `expo` en `package.json`.

¿Qué es expo-overview?

Esta habilidad actúa como el enrutador central y las reglas compartidas para todo el trabajo relacionado con Expo y EAS en agentes de IA. Su propósito principal es recibir la solicitud del usuario, clasificarla según un mapa de habilidades detallado y luego delegar la tarea concreta a la habilidad especializada adecuada (por ejemplo, expo-router, eas-app-stores, expo-ui). La habilidad expo-overview establece reglas de configuración compartidas esenciales, como iniciar nuevas apps con `npx create-expo-app@latest`, detectar la versión del SDK, instalar paquetes con `npx expo install`, manejar la autenticación de EAS y diferenciar entre proyectos administrados y bare/prebuild. Además, proporciona un mapa de habilidades que traduce frases vagas del usuario ('haz que se vea nativo', 'publícala', 'soy nuevo') en tareas específicas, asegurando que el agente no adivine la habilidad incorrecta y ofrezca la orientación más precisa posible para plataformas como Claude Code, Cursor y Codex.

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

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

expo-overview — enrutador y reglas compartidas para Expo / EAS

Comienza aquí — lee antes de hacer cualquier cosa

No adivines la habilidad solo a partir de los archivos del proyecto. Muchos objetivos de Expo se ven similares desde el sistema de archivos pero requieren habilidades diferentes.

  1. Confirma que esto es trabajo de Expo o EAS — la solicitud menciona Expo o EAS, o package.json tiene una dependencia expo. De lo contrario, esta habilidad no aplica. Una app nativa que usa EAS para distribución califica sin un runtime de Expo.
  2. Lee el objetivo del usuario — ¿qué resultado quieren, en términos simples?
  3. Clasifícalo usando el Mapa de Habilidades a continuación, traduciendo frases casuales a un objetivo.
  4. Confirma la intención si es ambigua ("Parece que quieres publicar en las tiendas — eso es eas-app-stores. ¿Correcto?"), luego carga el SKILL.md de esa habilidad y síguelo.
  5. Confía en la hoja de la habilidad — tiene su propia lógica de detección y pasos. No improvises.

Mapa de Habilidades (por objetivo)

Empareja el objetivo con una categoría, luego la habilidad, luego carga el SKILL.md de esa hoja.

Construir la app

  • expo-project-structure — estructura de carpetas para un nuevo proyecto Expo Router: dónde viven pantallas, componentes y configuración (nunca reestructurar una app existente para que coincida)
  • expo-native-ui — pantallas, estilos, colores semánticos, controles nativos, SF Symbols, medios, diseño
  • expo-router — navegación: rutas basadas en archivos, tabs / stacks / modales / hojas, enlaces, encabezados
  • expo-animation — movimiento y gestos: worklets de Reanimated, Gesture Handler, transiciones de pantalla, retroalimentación de hojas y pulsaciones, hápticos y corrección de animaciones que tartamudean en el dispositivo
  • expo-ui — componentes de interfaz de usuario nativos a través de @expo/ui: BottomSheet, Picker, Slider, Switch, Menu, Button, FieldGroup (secciones de formulario agrupadas), List / ListItem y más — SwiftUI real en iOS, Jetpack Compose en Android. La capa universal requiere SDK 56+ y funciona en Expo Go; las sustituciones directas (@gorhom/bottom-sheet, datetimepicker, …) y las capas específicas de plataforma también existen en SDK 55.
  • expo-design-system — una única fuente visual de verdad: tokens de diseño (color, espaciado, tipografía, radio, sombra, movimiento), convenciones de componentes reutilizables y auditorías para derivas (colores codificados, espaciados, fuentes)
  • expo-tailwind-setup — estilos con Tailwind / NativeWind
  • expo-data-fetching — solicitudes de red, React Query / SWR, caché, offline, cargadores de rutas
  • expo-dom — ejecutar código web o reutilizar una librería web dentro de nativo
  • expo-web-to-native — migrar una app web / React existente a una app nativa de iOS / Android

Regla de selección de componentes: siempre que necesites un componente de interfaz de usuario (filas de lista, hojas inferiores, selectores, sliders, menús, botones, controles segmentados, interruptores), consulta primero expo-ui para verificar si @expo/ui tiene un equivalente nativo antes de recurrir a un componente integrado de React Native o a una librería de la comunidad. Los componentes nativos @expo/ui brindan el mejor ajuste a la plataforma, y en SDK 56+ los universales se ejecutan en Expo Go sin compilación personalizada. Carga expo-ui junto con expo-native-ui para cualquier app que renderice listas, hojas de detalle o controles de formulario. Una excepción: la List de @expo/ui renderiza filas agrupadas nativas (una pantalla de Configuración de iOS), no una lista virtualizada — usa FlatList / FlashList para conjuntos de datos grandes.

Publicar y operar

  • eas-app-stores — compilar y enviar aplicaciones iOS/Android (proyectos Expo y otros proyectos React Native, además de apps nativas existentes), TestFlight, versiones y metadatos de la tienda
  • eas-hosting — desplegar el paquete web en EAS Hosting; también crear rutas de API de Expo Router (manejadores +api.ts) y sus entornos / dominios
  • eas-workflows — YAML de EAS Workflow y pipelines CI/CD
  • eas-simulator — ejecutar y manejar la app en un simulador iOS / Android remoto en la nube de EAS
  • expo-dev-client — compilaciones de desarrollo personalizadas
  • eas-update — configurar, publicar, probar y depurar actualizaciones over-the-air compatibles
  • eas-update-insights — salud de las actualizaciones OTA: tasa de fallos, adopción, tamaño del payload
  • eas-observe — rendimiento de inicio / lanzamiento / TTI con EAS Observe

Extender de forma nativa

  • expo-module — módulos y vistas nativos (Swift / Kotlin) con la API de Módulos Expo
  • expo-brownfield — incrustar pantallas de Expo / React Native en apps nativas de SwiftUI/UIKit o Android; artefactos aislados y compilaciones integradas
  • expo-app-clip — destino de App Clip de iOS (AASA, banner de app inteligente)

Mantener y aprender

  • expo-upgrade — actualizar el SDK de Expo y solucionar conflictos de dependencias
  • expo-examples — ejemplos de integración canónicos y con versión coincidente (Stripe, Clerk, Supabase, …)
  • expo-skill-feedback — enviar comentarios sobre una habilidad de Expo o sobre Expo mismo; habilitar / deshabilitar la telemetría anónima de uso

Traduciendo solicitudes vagas

Algunas frases cotidianas no se asignan obviamente a un nombre de habilidad — traduce antes de enrutar:

  • "Haz que se vea nativo" → controles agrupados / formularios de configuración = expo-ui; pantallas, estilos = expo-native-ui; movimiento = expo-animation; navegación = expo-router.
  • "Haz que las pantallas sean consistentes" / "limpia los estilos" / "configura un tema o tokens de diseño" → expo-design-system.
  • "Parece generado por IA" / "demasiado genérico, no nativo" → expo-design-system (errores típicos de nativos nombrados + auditoría), con expo-native-ui para los modismos de la plataforma.
  • "Publícala" / "obtén un .ipa o .apk" / "lanza a las tiendas" / "pon mi app Swift en TestFlight" → eas-app-stores (compilar + enviar, TestFlight, versiones, metadatos de la tienda).
  • "Soy nuevo / por dónde empiezo" → andamio primero (ver reglas de configuración compartidas), luego enrutar por objetivo.

Reglas de configuración compartidas

Aplica las reglas que coincidan con el proyecto y la tarea solicitada.

  • ¿App nativa que usa EAS para distribución? Enrutar a eas-app-stores; su references/native-ios.md cubre SwiftUI/UIKit en iOS. Mantén el proyecto nativo existente. Aplica la autenticación/enlace de EAS a continuación; las reglas de andamiaje de Expo, SDK e instalación de paquetes no aplican en esta ruta.
  • ¿Iniciando una nueva app Expo? Inicia una de la manera estándar antes de enrutar a una habilidad de funcionalidad: npx create-expo-app@latest, organizando las carpetas según expo-project-structure. Luego clasifica el objetivo del usuario y enruta.
  • Detecta la versión del SDK antes de dar consejos específicos de versión: lee la versión de expo en package.json (y app.json / app.config.{js,ts}). Muchas API y valores predeterminados difieren según el SDK.
  • Lee la documentación para ese SDK, no latest. Usa la URL con versión fija, ej. https://docs.expo.dev/versions/v56.0.0/sdk/ui/ en SDK 56 en lugar de https://docs.expo.dev/versions/latest/sdk/ui/ — las páginas latest siguen el SDK más nuevo y pueden documentar APIs que el proyecto aún no tiene.
  • Migrar a un SDK más nuevo es su propia tarea — carga expo-upgrade en lugar de aumentar versiones manualmente.
  • Administrado vs. bare/prebuild: la presencia de directorios ios/ y android/ confirmados significa que existen proyectos nativos (prebuild o bare). Los pasos de config-plugin y configuración nativa difieren — nota en cuál está el proyecto.
  • Instala paquetes con npx expo install <pkg>, no con npm/yarn/pnpm add sin formato, para que las versiones sigan siendo compatibles con el SDK del proyecto.
  • Autenticación y enlace de EAS (solo necesario para build/submit/update/observe/workflows): verifica el inicio de sesión con eas whoami, inicia sesión con eas login. Un proyecto está vinculado cuando extra.eas.projectId existe en la configuración de la app; créalo con eas init si falta.

Cuándo saltarse el salto del enrutador

  • Solo cuando el usuario nombró explícitamente una habilidad expo-* / eas-* específica → carga esa habilidad directamente.
  • Una tarea completamente especificada (versión del SDK fijada, diseño de archivos dado, librerías nombradas) no es razón para saltarse: las reglas compartidas anteriores aún aplican — verifícalas, luego enruta a la habilidad hoja correspondiente.

Enviar comentarios

Si encuentras errores, información engañosa o desactualizada en esta habilidad, repórtalo para que Expo pueda mejorar:

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

Solo envía cuando tengas algo específico y procesable que reportar. Incluye todo el contexto relevante posible. Si un agente de IA falló repetidamente o el usuario tuvo que tomar el control de una tarea de Expo, carga la habilidad expo-skill-feedback y sigue su flujo de evaluación de candidatos en lugar de reutilizar el comando anterior.

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.

Skills relacionados