Habilidades react-native-architecture
📦

react-native-architecture

Seguro ⚙️ Comandos externos🌐 Acceso a red

Construye Aplicaciones React Native Listas para Producción

También disponible en: wshobson

Arquitectura aplicaciones React Native con Expo, patrones de navegación, módulos nativos y sincronización offline-first. Esta habilidad proporciona patrones listos para producción para construir aplicaciones móviles multiplataforma.

Soporta: Claude Codex Code(CC)
🥉 73 Bronce
1

Descargar el ZIP de la skill

2

Subir en Claude

Ve a Configuración → Capacidades → Skills → Subir skill

3

Activa y empieza a usar

Pruébalo

Usando "react-native-architecture". Crear un proveedor de auth con protección de rutas

Resultado esperado:

AuthContext usando SecureStore para token, hook useAuth, guards de rutas verificando segments, redirección a login cuando no está autenticado

Usando "react-native-architecture". Configurar React Query offline-first

Resultado esperado:

QueryProvider con persistencia en AsyncStorage, networkMode: offlineFirst, gcTime: 24 horas, staleTime: 5 minutos

Usando "react-native-architecture". Configurar build EAS para iOS

Resultado esperado:

eas.json con perfiles development, preview y production. Development usa simulador, preview usa distribución interna, production habilita autoIncrement

Auditoría de seguridad

Seguro
v1 • 2/24/2026

Security audit complete. Static findings are false positives triggered by documentation examples containing terminal commands (npx, eas), documentation URLs (official Expo/React Native sites), and example configuration paths. No actual code execution, network requests to external domains, or real credentials present. Skill is a legitimate React Native architecture guide with safe-to-use code patterns.

2
Archivos escaneados
707
Líneas analizadas
2
hallazgos
1
Auditorías totales

Factores de riesgo

⚙️ Comandos externos (2)
resources/implementation-playbook.md:50-58 resources/implementation-playbook.md:608-633
🌐 Acceso a red (1)
resources/implementation-playbook.md:667-670
Auditado por: claude

Puntuación de calidad

38
Arquitectura
100
Mantenibilidad
87
Contenido
33
Comunidad
100
Seguridad
100
Cumplimiento de la especificación

Lo que puedes crear

Iniciar un Nuevo Proyecto Móvil

Inicializa un nuevo proyecto Expo con arquitectura adecuada, TypeScript y configuración de navegación siguiendo las mejores prácticas de la industria.

Implementar Flujo de Autenticación

Agrega autenticación segura con guards de rutas, almacenamiento de tokens vía SecureStore y rutas de navegación protegidas.

Agregar Capa de Datos Offline-First

Implementa caché de datos persistente con React Query, sincronización con AsyncStorage y actualizaciones optimistas de UI.

Prueba estos prompts

Inicializar Proyecto Expo 
Crea un nuevo proyecto Expo con TypeScript. Configura la estructura de carpetas con directorios app/, components/, hooks/, services/, stores/, y types/. Incluye Expo Router con grupos auth y tabs.
Agregar Autenticación 
Implementa flujo de autenticación en la aplicación React Native usando SecureStore para almacenamiento de tokens. Crea contexto de autenticación con signIn, signOut y estado de usuario. Agrega guards de rutas para proteger pestañas de acceso no autenticado.
Configurar Sincronización Offline 
Configura React Query con persistencia en AsyncStorage para offline-first. Incluye detección de estado de red con NetInfo y configura tiempos de stale y lógica de reintentos para uso en producción.
Integrar Características Nativas 
Agrega autenticación biométrica usando expo-local-authentication, notificaciones push con expo-notifications y retroalimentación háptica con expo-haptics. Crea una abstracción de servicio limpia para cada uno.

Mejores prácticas

  • Usa enrutamiento basado en archivos de Expo Router con grupos para separación de auth y tabs
  • Memoiza componentes y usa FlashList para listas largas para mantener 60fps
  • Almacena tokens y datos sensibles en SecureStore, nunca en AsyncStorage

Evitar

  • Almacenar tokens o secretos en AsyncStorage plano en lugar de SecureStore
  • Estilos en línea en lugar de StyleSheet.create para rendimiento
  • Obtener datos directamente en el render del componente sin useEffect o React Query

Preguntas frecuentes

¿Cuál es la diferencia entre Expo y React Native Bare?
Expo proporciona flujos de trabajo gestionados con configuración más simple y actualizaciones OTA integradas. React Native bare da acceso directo al código nativo pero requiere configuración más compleja y enlazado nativo manual.
¿Puedo usar esta habilidad con React Native CLI?
Los patrones se enfocan en Expo Router y librerías de Expo. Algunos patrones como navegación y gestión de estado aplican a React Native bare, pero los ejemplos de módulos nativos usan paquetes de Expo.
¿Cómo manejo el modo offline en React Native?
Usa React Query con modo de red offlineFirst y persistencia en AsyncStorage. El queryClient devolverá datos en caché cuando esté offline y sincronizará mutaciones cuando vuelva a estar online.
¿Qué es Expo Router?
Expo Router es una solución de enrutamiento basada en archivos para aplicaciones React Native. Usa una estructura de carpetas en app/ para definir rutas, similar a las páginas de Next.js o App Directory.
¿Cómo almaceno tokens de auth de forma segura?
Usa expo-secure-store que almacena datos en el Keychain de iOS o Keystore de Android. Nunca uses AsyncStorage para datos sensibles ya que no está cifrado.
¿Qué es EAS?
EAS (Expo Application Services) proporciona builds en la nube, actualizaciones y envíos. EAS Build compila aplicaciones en la nube, EAS Update entrega actualizaciones de JS OTA, y EAS Submit maneja las cargas a tiendas de aplicaciones.

Detalles del desarrollador

Autor

sickn33

Licencia

MIT

Repositorio

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/react-native-architecture

Ref.

main

Estructura de archivos

📁 resources/

📄 implementation-playbook.md

📄 SKILL.md