expo-overview — routeur et règles partagées pour Expo / EAS

Commencez ici — à lire avant de faire quoi que ce soit

Ne devinez pas la skill à partir des seuls fichiers du projet. De nombreux objectifs Expo se ressemblent dans le système de fichiers mais nécessitent des skills différentes.

1. Confirmez qu'il s'agit de travail Expo — la demande mentionne Expo, ou package.json a une dépendance expo. Si aucun des deux ne s'applique, arrêtez : cette skill ne s'applique pas. Un projet React Native brut sans dépendance expo n'est pas du travail Expo.
2. Lisez l'objectif de l'utilisateur — quel résultat veut-il, en termes simples ?
3. Classifiez-le en utilisant la Skill Map ci-dessous, en traduisant le langage courant en un objectif.
4. Confirmez l'intention si ambiguë (« On dirait que vous voulez publier sur les stores — c'est eas-app-stores. C'est ça ? »), puis chargez la SKILL.md de cette skill et suivez-la.
5. Faites confiance à la skill feuille — elle a sa propre logique de détection et ses étapes. N'improvisez pas.

Skill Map (par objectif)

Associez l'objectif à une catégorie, puis à la skill, puis chargez la SKILL.md de cette feuille.

Construire l'app

• expo-project-structure — organisation des dossiers pour un nouveau projet Expo Router : où vivent les écrans, composants et configuration (ne restructurez jamais une app existante pour correspondre)
• expo-native-ui — écrans, styles, couleurs sémantiques, contrôles natifs, SF Symbols, médias, animations, mise en page
• expo-router — navigation : routes basées sur les fichiers, onglets / piles / modales / feuilles, liens, en-têtes
• expo-animation — mouvement et gestes : worklets Reanimated, Gesture Handler, transitions d'écran, feedback de feuille et appui, haptics, correction des animations saccadées sur appareil
• expo-ui — composants d'interface utilisateur natifs via @expo/ui : BottomSheet, Picker, Slider, Switch, Menu, Button, FieldGroup (sections de formulaire groupées), List / ListItem, et plus — vrai SwiftUI sur iOS, Jetpack Compose sur Android. La couche universelle nécessite SDK 56+ et s'exécute dans Expo Go ; les remplaçants directs (@gorhom/bottom-sheet, datetimepicker, …) et les couches spécifiques à la plateforme existent aussi sur SDK 55.
• expo-design-system — une source visuelle unique de vérité : design tokens (couleur, espacement, typographie, rayon, ombre, mouvement), conventions de composants réutilisables et audits de dérive (couleurs codées en dur, espacement, polices)
• expo-tailwind-setup — stylisation Tailwind / NativeWind
• expo-data-fetching — requêtes réseau, React Query / SWR, cache, hors ligne, chargeurs de routes
• expo-dom — exécuter du code web ou réutiliser une bibliothèque web à l'intérieur du natif
• expo-web-to-native — migrer une app web / React existante vers une app native iOS / Android

Règle de sélection des composants : chaque fois que vous avez besoin d'un composant d'interface utilisateur (lignes de liste, feuilles inférieures, sélecteurs, curseurs, menus, boutons, contrôles segmentés, bascules), consultez d'abord expo-ui pour vérifier si @expo/ui a un équivalent natif avant d'utiliser un élément intégré React Native ou une bibliothèque communautaire. Les composants @expo/ui natifs offrent le meilleur ajustement à la plateforme, et sur SDK 56+ les universels s'exécutent dans Expo Go sans build personnalisé. Chargez expo-ui aux côtés de expo-native-ui pour toute app qui affiche des listes, des feuilles de détails ou des contrôles de formulaire. Une exception : List de @expo/ui affiche des lignes groupées natives (un écran Paramètres iOS), pas une liste virtualisée — utilisez FlatList / FlashList pour de grands ensembles de données.

Publier et exploiter

• eas-app-stores — construire et soumettre à l'App Store / Play Store / TestFlight, versions et métadonnées du store
• eas-hosting — déployer le bundle web sur EAS Hosting ; créer aussi les routes API Expo Router (gestionnaires +api.ts) et leurs environnements / domaines
• eas-workflows — YAML Workflow EAS et pipelines CI/CD
• eas-simulator — exécuter et piloter l'app sur un simulateur iOS / Android distant dans le cloud EAS
• expo-dev-client — builds de développement personnalisés
• eas-update-insights — santé des mises à jour OTA : taux de crash, adoption, taille du payload
• eas-observe — performance de démarrage / lancement / TTI avec EAS Observe

Étendre nativement

• expo-module — modules natifs et vues (Swift / Kotlin) avec l'API Expo Modules
• expo-brownfield — intégrer Expo / React Native dans une app native existante
• expo-app-clip — cible iOS App Clip (AASA, smart app banner)

Maintenir et apprendre

• expo-upgrade — mettre à niveau le SDK Expo et résoudre les conflits de dépendances
• expo-examples — exemples d'intégration canoniques et appairés en version (Stripe, Clerk, Supabase, …)
• expo-skill-feedback — envoyer des commentaires sur une skill Expo ou sur Expo lui-même ; activer / désactiver la télémétrie d'utilisation anonyme

Traduire les demandes vagues

Certaines formulations courantes ne correspondent pas clairement à un nom de skill — traduisez avant de router :

• « Rendre ça natif » → contrôles groupés / formulaires de paramètres = expo-ui ; écrans, styles, animations = expo-native-ui ; navigation = expo-router.
• « Rendre les écrans cohérents » / « nettoyer la stylisation » / « mettre en place un thème ou des design tokens » → expo-design-system.
• « Le publier » / « obtenir un .ipa ou .apk » / « sortir sur les stores » → eas-app-stores (build + soumettre, TestFlight, versions, métadonnées du store).
• « Je suis nouveau / par où commencer » → d'abord échafauder (voir Règles de configuration partagées), puis router par objectif.

Règles de configuration partagées

Elles s'appliquent à chaque skill Expo, gérez-les une fois ici au lieu de les répéter dans chaque feuille.

• Pas encore de projet Expo ? Lancez-en un de la manière standard avant de router vers une skill de fonctionnalité : npx create-expo-app@latest, en organisant les dossiers selon expo-project-structure. Puis classifiez l'objectif de l'utilisateur et faites le routing.
• Détectez la version du SDK avant de donner des conseils spécifiques à la version : lisez la version expo dans package.json (et app.json / app.config.{js,ts}). De nombreuses API et valeurs par défaut diffèrent selon le SDK.
• Lisez la documentation pour ce SDK, pas latest. Utilisez l'URL épinglée à la version, par ex. https://docs.expo.dev/versions/v56.0.0/sdk/ui/ sur SDK 56 au lieu de https://docs.expo.dev/versions/latest/sdk/ui/ — les pages latest suivent le SDK le plus récent et peuvent documenter des API que le projet n'a pas encore.
• Passer à un SDK plus récent est sa propre tâche — chargez expo-upgrade au lieu de bumper les versions à la main.
• Managed vs. bare/prebuild : la présence de répertoires ios/ et android/ validés signifie que des projets natifs existent (prebuild ou bare). Les étapes config-plugin et setup natif diffèrent — notez dans lequel le projet se trouve.
• Installez les packages avec npx expo install <pkg>, pas avec raw npm/yarn/pnpm add, pour que les versions restent compatibles avec le SDK du projet.
• Auth & linking EAS (uniquement nécessaires pour build/submit/update/observe/workflows) : vérifiez la connexion avec eas whoami, connectez-vous avec eas login. Un projet est lié quand extra.eas.projectId existe dans la configuration de l'app ; créez-le avec eas init s'il manque.

Quand ignorer l'hop du routeur

• Seulement quand l'utilisateur a explicitement nommé une skill expo-* / eas-* spécifique → charger cette skill directement.
• Une tâche entièrement spécifiée (version du SDK épinglée, organisation des fichiers donnée, bibliothèques nommées) n'est pas une raison d'ignorer : les règles partagées ci-dessus s'appliquent toujours — vérifiez-les, puis faites le routing vers la skill feuille correspondante.

Soumettre des commentaires

Si vous rencontrez des erreurs, des informations trompeuses ou obsolètes dans cette skill, signalez-les pour qu'Expo puisse s'améliorer :

npx --yes submit-expo-feedback@latest --category skills --subject "expo-overview" "<commentaires actionnables>"

Ne soumettez que si vous avez quelque chose de spécifique et actionnable à signaler. Incluez autant de contexte pertinent que possible. Si un agent IA a échoué à plusieurs reprises ou si l'utilisateur a dû reprendre une tâche Expo, chargez la skill expo-skill-feedback et suivez son flux eval-candidate au lieu de réutiliser la commande ci-dessus.