Communitygithub.com

Kappaemme-git/codex-phone-lab

Créez et itérez des applications mobiles qui s'exécutent sur un vrai téléphone grâce à l'aperçu en direct Expo/React Native. Utilisez cette compétence lorsque Codex doit créer une application téléphone, prototyper une app iPhone ou Android, exécuter une app sur un téléphone physique, afficher un code QR pour Expo Go, mettre en place un workflow de développement mobile, ou transformer une demande en une application mobile fonctionnelle sans passer par Xcode/TestFlight/distribution sur l'App Store.

Qu'est-ce que codex-phone-lab ?

Cette compétence permet à un agent IA de transformer une demande en une application React Native/Expo fonctionnelle, exécutée directement sur un téléphone physique via Expo Go. Elle optimise le cycle « demande → application → téléphone » en évitant les étapes complexes comme les simulateurs, les builds natives ou les distributions via TestFlight. Le flux de travail commence par la vérification des prérequis, la création d'un projet Expo avec le SDK 54, la génération rapide d'un premier écran fonctionnel, puis le lancement d'un serveur de développement dont le QR code est scanné par l'utilisateur dans l'application Expo Go. L'agent peut itérer en modifiant le code, en observant les logs Metro/Expo et en rechargant l'application à chaud. La compétence est compatible avec les agents Codex, Claude Code et autres terminaux IA, et utilise des scripts shell dédiés pour automatiser les étapes. Elle propose plusieurs modes de connexion (LAN, tunnel, local) pour s'adapter au réseau de l'utilisateur, et fournit des conseils pour créer une véritable application mobile avec des écrans adaptés, des interactions réelles et des états de chargement, d'erreur et vides.

Compatible avec~Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/Kappaemme-git/codex-phone-lab/tree/HEAD/skill
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Codex Phone Lab

Utilisez cette compétence pour transformer une demande en une application React Native/Expo que l'utilisateur peut ouvrir sur un téléphone physique avec Expo Go. Optimisez pour un cycle rapide « demande → application → téléphone » avant d'envisager un simulateur, des builds natives, TestFlight ou une distribution sur l'App Store.

Modèle de fonctionnement

Privilégiez ce chemin sauf si l'utilisateur a explicitement besoin de modules natifs iOS/Android :

  1. Vérifiez les prérequis locaux avec scripts/doctor.sh.
  2. S'il n'existe aucun projet mobile, créez une application Expo avec scripts/new-expo-app.sh <nom-app>. Ce script utilise par défaut expo-template-default@sdk-54 pour garantir la compatibilité avec la version actuelle d'Expo Go utilisée par ce workflow.
  3. Construisez rapidement le premier écran utilisable ; ne créez pas de page d'accueil.
  4. Lancez l'aperçu téléphone avec scripts/start-phone-preview.sh [lan|tunnel|local].
  5. Gardez le serveur de développement en cours d'exécution pendant que vous modifiez le code. Utilisez les logs Metro/Expo pour corriger les erreurs d'exécution.
  6. Demandez à l'utilisateur d'installer Expo Go, de scanner le QR code et de garder le téléphone sur le même réseau en mode LAN.
  7. Itérez par petites modifications visibles : éditez, observez les logs, rechargez, corrigez.

Détection de projet

Avant de créer une nouvelle application, inspectez le répertoire courant :

  • package.json avec la dépendance expo : traitez comme une application Expo existante.
  • app.json, app.config.*, app/ ou expo-router : traitez comme une application Expo même si les dépendances doivent être installées.
  • ios/ et android/ sans Expo : demandez seulement si l'utilisateur a besoin d'une migration vers Expo ; sinon conservez la pile existante.
  • Répertoire vide : créez une nouvelle application Expo avec le modèle SDK 54.

Aperçu téléphone

Utilisez Expo Go pour la première démo « waouh » car cela évite les contraintes de l'App Store/TestFlight.

Utilisez le SDK 54 par défaut. La version actuelle d'Expo Go dans ce workflow rejette les projets SDK 55 avec le message « Project is incompatible with this version of Expo Go ». Remplacez uniquement si l'Expo Go de l'utilisateur prend en charge un SDK plus récent :

CODEX_PHONE_LAB_EXPO_TEMPLATE=expo-template-default@sdk-55 <skill-dir>/scripts/new-expo-app.sh mon-app

Exécutez :

<skill-dir>/scripts/start-phone-preview.sh lan

Utilisez le mode tunnel lorsque le téléphone n'est pas sur le même Wi-Fi ou que le mode LAN ne peut pas se connecter. Le mode tunnel peut demander à Expo d'installer une dépendance de tunneling.

Le workflow utilisateur :

  1. Installez Expo Go sur le téléphone.
  2. Exécutez la commande d'aperçu.
  3. Scannez le code QR depuis Expo Go ou l'appareil photo du téléphone.
  4. Laissez le terminal ouvert ; les modifications de l'application se rechargent en direct.

Conseils pour la création de l'application

Faites en sorte que le premier écran donne l'impression d'une véritable application :

  • Utilisez les zones de sécurité et les mises en page adaptées au mobile.
  • Créez une interaction réelle : formulaires, listes, navigation, boutons, minuteries, données fictives ou état.
  • Incluez les états de chargement, vides et d'erreur lorsque le workflow les implique.
  • Gardez une typographie suffisamment compacte pour le mobile.
  • Évitez les motifs de page d'accueil Web, les sections héros surdimensionnées, les cartes imbriquées et le texte explicatif dans l'application.
  • Préférez Expo Router pour les applications multi-écrans lorsque le modèle l'inclut déjà.

Décision de distribution

Choisissez la route la plus légère qui correspond à l'objectif de l'utilisateur :

  • Prototype rapide sur le téléphone de l'utilisateur : QR code Expo Go.
  • Application avec modules natifs personnalisés : build de développement Expo.
  • Bêta-testeurs sur iPhone : TestFlight via un compte EAS/Apple Developer.
  • Sortie publique : soumission à l'App Store / Play Store.

N'insinuez pas qu'Expo Go est une distribution de production. Il s'agit d'un aperçu de développement en direct.

Références

Consultez references/expo-phone-workflow.md pour décider entre Expo Go, les builds de développement, TestFlight et la sortie sur l'App Store.

Skills associés

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community