Build Mobile App

Build Mobile App

Estimated time: 6-12 weeks

This workflow guides you through building and publishing a cross-platform mobile application. It covers requirements gathering, system architecture, API design, mobile development using Flutter or React Native, comprehensive mobile testing, and app store optimization for successful publishing on both iOS and Android.

A decision gate lets you choose between Flutter and React Native based on your team's skills and project requirements. The remaining steps adapt to your chosen framework.

By the end of this workflow you will have: documented requirements, a backend API, a cross-platform mobile app, a comprehensive test suite, and optimized app store listings ready for launch.

When to Use

• User wants to build mobile app
• User needs a structured, step-by-step process for build mobile app
• User wants to build a mobile app
• User wants to create an app
• build an iOS and Android app
• Do NOT use when: the request is outside the scope of build mobile app or requires professional advice beyond educational guidance
• Do NOT use for single-step tasks that one atomic skill can handle independently

Prerequisites

Before starting this workflow, ensure:

• A mobile app idea with defined core features
• Programming experience (Dart for Flutter or JavaScript/TypeScript for React Native)
• Apple Developer Account ($99/year) for iOS publishing
• Google Play Developer Account ($25 one-time) for Android publishing
• A Mac for iOS development and testing

Steps

Step 1: Analyze Requirements (uses: requirements-analyst)

define what the app needs to do. Focus on mobile-specific concerns:

• Input: app concept and target users, Platform requirements (iOS, Android, or both), Any existing wireframes, mockups, or competitor analysis
• Output: User stories with mobile-specific acceptance criteria, iOS and Android specific considerations, MVP feature set with clear boundaries
• Key focus: Use the Requirements Analyst skill to define what the app needs to do

Step 2: Design the System (uses: system-designer)

architect the backend and mobile system.

• Input: requirements-doc from Step 1 (features inform architecture), platform-requirements from Step 1 (mobile constraints), device-features from Step 1 (native integration needs)
• Output: Backend and mobile architecture with component interactions, Backend and mobile technology choices with rationale, Offline data synchronization approach
• Key focus: Backend architecture (API server, database, file storage, push notification service)

Step 3: Design the API (uses: api-designer)

create a mobile-optimized API.

• Input: system-architecture from Step 2 (component boundaries), requirements-doc from Step 1 (features define endpoints), sync-strategy from Step 2 (offline sync affects API design)
• Output: OpenAPI 3.x specification optimized for mobile consumption, Mobile-specific conventions (pagination, file upload, sync), Authentication and authorization endpoint specifications
• Key focus: REST resource design optimized for mobile (minimize round trips)

Step 4: Build the Mobile App (uses: flutter-architect)

Use the Flutter Architect skill (or React Native Builder if that path was chosen) to build the mobile application.

• Input: api-spec from Step 3 (the app consumes this API), system-architecture from Step 2 (mobile architecture decisions), tech-stack from Step 2 (framework and tooling choices)
• Output: Working cross-platform mobile application, Architecture documentation (state management, navigation, patterns), Platform-specific code and configuration
• Key focus: Project setup with proper folder structure and architecture pattern

Step 5: Test the Mobile App (uses: mobile-testing)

build a comprehensive mobile test suite.

• Input: mobile-app from Step 4 (the app to test), requirements-doc from Step 1 (acceptance criteria become test cases), api-spec from Step 3 (API contract for integration tests)
• Output: Unit, widget, integration, and accessibility tests, Device and OS version compatibility matrix, Launch time, memory, and battery benchmarks
• Key focus: Unit tests for business logic and state management

Step 6: Optimize App Store Listings (uses: app-store-optimizer)

maximize discoverability and conversions on both app stores.

• Input: mobile-app from Step 4 (the app being published), requirements-doc from Step 1 (target audience for positioning), test-matrix from Step 5 (supported devices for listing)
• Output: Keyword strategy, category selection, and listing optimization plan, Optimized titles, descriptions, and metadata for both stores, Screenshot content, ordering, and design specifications
• Key focus: Keyword research for both App Store and Google Play

Decision Points

• After Step 2: Which cross-platform framework will you use?
  • If Flutter (Dart): Step 4 uses Flutter Architect. Great for custom UI and animation-heavy apps.
  • If React Native (JavaScript/TypeScript): Step 4 uses React Native Builder instead. Great for teams with web/React experience.
  • If Native (Swift + Kotlin): Build separate native apps. Step 4 will need to be executed twice -- once per platform. Most expensive but best performance.
• After Step 5: How will you approach the app store launch?
  • If Soft launch (limited market): Launch in a small market first to validate. Full ASO for the broad launch later.
  • If Full launch (global): Optimize ASO for primary markets immediately. Higher stakes but faster growth.
  • If TestFlight/Beta only: Private beta before public launch. Step 6 focuses on beta feedback collection and iteration.

Failure Handling

• Ignoring platform differences: iOS and Android have different design languages. Respect both.
• Skipping offline mode: Mobile users lose connectivity frequently. Plan for it from the start.
• Neglecting performance: Mobile devices have limited resources. Profile and optimize early.
• Poor app store listings: Your listing is your storefront. Invest in screenshots and descriptions.
• Ignoring accessibility: 15-20% of users have accessibility needs. Test with screen readers.

Expected Outcome

When this workflow is complete, the user will have:

1. The mobile app runs on both iOS and Android without crashes
2. All MVP features are implemented and tested
3. The app handles offline mode and poor network conditions
4. App store listings are optimized for discoverability
5. The app is published on both the App Store and Google Play
6. Crash reporting and analytics are capturing data
7. Users can complete core flows without confusion

Output Format

BUILD MOBILE APP TRACKER
========================

[ ] Step 1: Analyze Requirements
    Status: [pending/in-progress/complete]
[ ] Step 2: Design the System
    Status: [pending/in-progress/complete]
[ ] Step 3: Design the API
    Status: [pending/in-progress/complete]
[ ] Step 4: Build the Mobile App
    Status: [pending/in-progress/complete]
[ ] Step 5: Test the Mobile App
    Status: [pending/in-progress/complete]
[ ] Step 6: Optimize App Store Listings
    Status: [pending/in-progress/complete]

Timeline: ______ weeks
Overall Status: [IN PROGRESS / COMPLETE]

Adaptation notes:

• Adjust timeline based on user's availability and prior experience
• Steps may be reordered if dependencies allow parallel execution
• Skip optional steps if time or budget is constrained

Edge Cases

• Ignoring platform differences: iOS and Android have different design languages. Respect both.
• Skipping offline mode: Mobile users lose connectivity frequently. Plan for it from the start.
• Neglecting performance: Mobile devices have limited resources. Profile and optimize early.
• Poor app store listings: Your listing is your storefront. Invest in screenshots and descriptions.

Example

Input: "I want to build mobile app and need a structured plan to follow step by step."

Output:

Step 1 (requirements-analyst): Analyze Requirements -- produces concrete deliverables for this phase.

Step 2 (system-designer): Design the System -- produces concrete deliverables for this phase.

Step 3 (api-designer): Design the API -- produces concrete deliverables for this phase.

Step 4 (flutter-architect): Build the Mobile App -- produces concrete deliverables for this phase.

Step 5 (mobile-testing): Test the Mobile App -- produces concrete deliverables for this phase.

Step 6 (app-store-optimizer): Optimize App Store Listings -- produces concrete deliverables for this phase.

Result: User has a complete build mobile app plan with all deliverables produced, validated, and ready for implementation.