Biblioteca de prompts de Claude Code: prepara tu app web para App Store y Google Play

Audita esta app web para usarla dentro de una app nativa de iOS y Android con WebView y corrige lo que encuentres. Comprueba: etiqueta meta viewport; sin desbordamiento horizontal de 320 px a 1024 px; áreas de toque de al menos 44 x 44 px; cabeceras, pies y navegación inferior fijos con relleno env(safe-area-inset-top) y env(safe-area-inset-bottom) para que nada quede oculto tras el notch o el indicador de inicio; sin menús que solo funcionen con hover; tamaños de fuente de al menos 16 px en los campos de entrada para que iOS no haga zoom; sin barras laterales exclusivas de escritorio; ningún elemento que dependa de un ratón. Además, haz que el primer renderizado sea rápido: carga diferida de los componentes pesados y un skeleton en lugar de una pantalla en blanco. Informa de cada archivo que cambiaste y de todo lo que no pudiste corregir automáticamente.

Crea las páginas /privacy y /terms para esta app. Primero inspecciona el código y enumera cada categoría de datos personales que realmente recopilamos o procesamos: proveedor de autenticación y lo que almacena, tablas de la base de datos con datos de usuarios, SDK de analítica o de seguimiento de errores, proveedores de pago, servicios de notificaciones push, API de terceros que reciben contenido de los usuarios. Redacta la política de privacidad a partir de esa lista en un lenguaje claro, con secciones sobre datos recopilados, finalidad, terceros, conservación, derechos de los usuarios, eliminación de cuenta (enlace a /delete-account), correo de contacto y una nota de que las apps de iOS y Android cargan este mismo servicio. No inventes prácticas que no tenemos. Enlaza ambas páginas desde el pie de página y desde la pantalla de ajustes, haz que se lean bien en una pantalla de 320 px y marca con TODO cualquier afirmación de la que no estés seguro para que yo pueda confirmarla.

La directriz 5.1.1 de Apple y Google Play exigen que los usuarios que pueden crear una cuenta también puedan eliminarla dentro de la app. Impleméntalo: un botón Eliminar cuenta en los ajustes con un diálogo de confirmación que explique las consecuencias; una función del lado del servidor (edge function, ruta de API o cloud function que use las credenciales de administrador o service-role solo en el servidor) que borre todas las filas que pertenecen al usuario autenticado y después el propio usuario de autenticación; tras completarse, cierra la sesión del usuario y muestra una pantalla de confirmación; una página pública /delete-account que explique los pasos a los usuarios que ya no tienen la app instalada y ofrezca un correo de contacto. Si hay suscripciones, explica en el diálogo que la suscripción de la tienda debe cancelarse por separado en los ajustes de App Store o Google Play. Añade tests para la función del servidor si el proyecto tiene tests configurados.

Los revisores rechazan apps que muestran pantallas en blanco o errores sin procesar (Apple 2.1, funcionalidad defectuosa en Google Play). Recorre cada carga de datos y cada ruta de esta app y asegúrate de que todas tengan: un estado de carga (skeleton o spinner), un estado vacío con una frase útil y una acción principal, y un estado de error con un mensaje legible y un botón Reintentar. Añade un error boundary global con un fallback amigable. Gestiona los fallos de red de forma explícita: cuando fetch falle porque el dispositivo está sin conexión, muestra un mensaje que lo diga en lugar de un error genérico. Elimina los errores de consola y los rechazos de promesas no gestionados. Enumera las rutas que tocaste.

Nuestras apps nativas de iOS y Android cargan esta app web con un user agent personalizado que contiene el token WebViewGoldApp. Añade una pequeña utilidad isNativeApp() que busque ese token en navigator.userAgent, y un atributo data o una clase en el elemento html (por ejemplo data-native-app) que el CSS pueda usar como selector. Después, solo cuando se ejecute dentro de la app nativa: oculta el banner de cookies si no es legalmente obligatorio para los usuarios de la app, oculta cualquier promoción de Descarga nuestra app o Abrir en la app, oculta la cabecera superior del sitio web y los enlaces del pie a páginas de marketing, oculta los enlaces externos a redes sociales o ábrelos con target=_blank para que el envoltorio los dirija al navegador del sistema, y muestra la navegación inferior por pestañas en lugar del menú de escritorio. Mantén sin cambios el comportamiento normal del sitio web en los navegadores.

Esta app ofrece inicio de sesión con Google (y posiblemente otros inicios de sesión de terceros). La directriz 4.8 de Apple exige una opción equivalente centrada en la privacidad, y Sign in with Apple es la respuesta estándar. Añádelo usando el proveedor de Apple de nuestra librería de autenticación (Supabase Auth, Firebase Auth, Auth.js o Clerk: detecta cuál usamos y sigue su configuración documentada del proveedor de Apple). Coloca el botón de Apple con el mismo tamaño y la misma prominencia que el botón de Google, siguiendo las directrices de botones de Apple. Gestiona el caso en que Apple solo devuelve el nombre en el primer inicio de sesión guardándolo en ese primer acceso. Anota como checklist en SETUP-APPLE-LOGIN.md los pasos que debo completar en el portal de Apple Developer (Services ID, clave, URL de retorno). Nota: dentro de la app nativa, el envoltorio WebViewGold detecta appleid.apple.com automáticamente y gestiona la ventana emergente, así que el propio flujo no necesita código específico de la app.

Dentro de las apps de iOS y Android, los productos digitales y las suscripciones deben venderse mediante compras dentro de la app (Apple 3.1.1, facturación de Google Play), no mediante nuestro checkout de Stripe. El envoltorio WebViewGold integra RevenueCat e inicia una compra cuando la página navega a revenuecat://purchase?external_id=USER_ID&product=PRODUCT_ID (el ID de producto tal como aparece en la consola de RevenueCat; external_id es nuestro ID de usuario, para que RevenueCat pueda atribuir la compra). Implementa: cuando isNativeApp() sea true, los botones para mejorar el plan y para comprar asignan a window.location.href ese esquema con el ID del usuario actual y el producto correspondiente; en los navegadores se mantiene Stripe. Añade un endpoint de servidor que reciba los webhooks de RevenueCat, verifique la cabecera de autorización y actualice el entitlement del usuario en nuestra base de datos para que la app web pueda desbloquear funciones en la siguiente carga. Añade un enlace Restaurar compras y un enlace Gestionar suscripción que explique que las suscripciones se gestionan en los ajustes de App Store o Google Play. No muestres precios de Stripe ni enlaces de pago externos dentro de la app nativa.

Las apps nativas admiten notificaciones push a través de WebViewGold. El aviso de permiso del sistema se activa cuando la página navega a registerpush://, y el estado actual se puede leer navegando a checkNativePushPermissions://, que un momento después inyecta una variable de JavaScript nativePushEnabled (true o false). Crea una pantalla de opt-in que aparezca una sola vez tras el onboarding o el primer inicio de sesión, solo cuando isNativeApp() sea true: explica en una frase qué vamos a enviar (por ejemplo, actualizaciones de pedidos y respuestas), con un botón Activar notificaciones que navegue a registerpush:// y un enlace Ahora no que recuerde la elección en localStorage durante 30 días. En los ajustes, añade una fila Notificaciones que compruebe nativePushEnabled y, si las notificaciones están desactivadas, muestre un enlace que navegue a settingsapp:// para abrir los ajustes del sistema. No actives nunca registerpush:// en la primera pantalla de la app.