Kappaemme-git/codex-phone-lab

Codex Phone Lab

Usa este skill para convertir un prompt de producto en una app React Native/Expo que el usuario pueda abrir en un teléfono físico con Expo Go. Optimiza para un ciclo rápido "prompt → app → teléfono" antes de considerar simulador, compilaciones nativas, TestFlight o distribución en tiendas.

Modelo de operación

Prefiere esta ruta a menos que el usuario necesite explícitamente módulos nativos de iOS/Android:

1. Verifica los requisitos previos locales con scripts/doctor.sh.
2. Si no existe un proyecto móvil, crea una app Expo con scripts/new-expo-app.sh <nombre-app>. Esto usa por defecto expo-template-default@sdk-54 para que se abra en la versión actual de Expo Go usada en este flujo de trabajo.
3. Construye rápidamente la primera pantalla utilizable; no crees una página de aterrizaje.
4. Inicia la vista previa en el teléfono con scripts/start-phone-preview.sh [lan|tunnel|local].
5. Mantén el servidor de desarrollo en ejecución mientras editas. Usa los registros de Metro/Expo para corregir errores en tiempo real.
6. Indica al usuario que instale Expo Go, escanee el código QR y mantenga el teléfono en la misma red para el modo LAN.
7. Itera con cambios visibles pequeños: edita, observa los registros, recarga, corrige.

Detección de proyectos

Antes de crear una nueva app, inspecciona el directorio actual:

• package.json con dependencia expo: trata como una app Expo existente.
• app.json, app.config.*, app/ o expo-router: trata como app Expo incluso si necesita instalar dependencias.
• ios/ y android/ sin Expo: pregunta solo si el usuario necesita migración a Expo; de lo contrario, mantén el stack existente.
• Directorio vacío: crea una nueva app Expo con la plantilla SDK 54.

Vista previa en el teléfono

Usa Expo Go para la primera demostración "wow" porque evita la fricción de App Store/TestFlight.

Usa SDK 54 por defecto. El Expo Go actual en este flujo de trabajo rechaza proyectos SDK 55 con "Project is incompatible with this version of Expo Go". Sobrescribe solo cuando se sabe que el Expo Go del usuario soporta un SDK más reciente:

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

Ejecuta:

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

Usa tunnel cuando el teléfono no esté en la misma red Wi-Fi o el modo LAN no pueda conectarse. El modo túnel puede pedir a Expo que instale una dependencia de tunelización.

El flujo de trabajo del usuario:

1. Instala Expo Go en el teléfono.
2. Ejecuta el comando de vista previa.
3. Escanea el código QR desde Expo Go o la cámara del teléfono.
4. Mantén la terminal abierta; las ediciones de la app se actualizan en vivo.

Guía de construcción de la app

Haz que la primera pantalla se sienta como una app real:

• Usa safe areas y layouts con tamaño móvil.
• Construye interacción real: formularios, listas, navegación, interruptores, temporizadores, datos simulados o estado.
• Incluye estados de carga, vacío y error cuando el flujo de trabajo lo implique.
• Mantén la tipografía lo suficientemente compacta para móvil.
• Evita patrones web de página de aterrizaje, secciones hero sobredimensionadas, tarjetas anidadas y texto explicativo dentro de la app.
• Prefiere Expo Router para apps con múltiples pantallas cuando la plantilla ya lo incluya.

Decisión de distribución

Elige la ruta más ligera que coincida con el objetivo del usuario:

• Prototipo rápido en el teléfono del usuario: código QR de Expo Go.
• App con módulos nativos personalizados: compilación de desarrollo Expo.
• Usuarios beta en iPhone: TestFlight mediante cuenta de desarrollador EAS/Apple.
• Lanzamiento público: envío a App Store / Play Store.

No sugieras que Expo Go es distribución de producción. Es una vista previa de desarrollo en vivo.

Referencias

Lee references/expo-phone-workflow.md al decidir entre Expo Go, compilaciones de desarrollo, TestFlight y lanzamiento en tienda.