mobile-app_skill

Overview

This skill is a practical guide for building cross-platform mobile apps using React Native (Expo and CLI) and Flutter. It focuses on developer workflows, folder structure, navigation, state management, API integration, and production builds. Use it to plan, start, and ship iOS and Android apps while leveraging web experience and AI tooling.

How this skill works

The skill inspects project goals and recommends an appropriate framework tier: Expo (React Native) for rapid starts, React Native CLI for advanced native needs, and Flutter for high-performance multi-platform targets. It provides concrete patterns: project creation commands, recommended folder layouts, navigation and styling examples, API hooks, auth patterns, and build/deploy steps (EAS and Flutter). It also includes a PDCA checklist for mobile-specific concerns like offline sync, security, and app store readiness.

When to use it

• Starting a new cross-platform mobile app from web or API-first code
• Converting a web app to a mobile-native UX while reusing business logic
• Prototyping quickly with Expo and TypeScript and AI assistance
• Needing consistent UI/UX across iOS and Android with shared code
• Building multi-platform targets (desktop/embedded) where Flutter’s advantages matter

Best practices

• Prefer Expo + TypeScript for fast iteration and strong AI tool support; eject only when native modules are required
• Structure projects by feature and keep reusable components, hooks, and services separate
• Use secure storage (SecureStore) for sensitive tokens and follow certificate pinning where needed
• Implement stack + tab navigation patterns and handle safe area, keyboard, and gesture UX
• Adopt environment variables and CI/EAS build pipelines for reproducible builds and store submissions
• Plan offline-first data and sync strategies; define conflict resolution in schema phase

Example use cases

• Create a new Expo app with 3-tab navigation (Home, Search, Profile) and TypeScript templates
• Build an API-connected feed screen with pull-to-refresh, loading states, and error handling using a useApi hook
• Migrate business logic from a web app into a mobile project while rewriting UI for native UX patterns
• Choose Flutter for a multi-platform product needing consistent, high-performance UI across six OS targets
• Set up EAS builds and automated store submission for iOS and Android