ai-flow-dev 2.1.3 → 2.1.5

package/prompts/mobile/flow-build-phase-3.md

@@ -3,9 +3,7 @@
 **Duration:** 20-25 minutes
 **Questions:** ~13 questions
 **Output:** docs/state-management.md, docs/offline-strategy.md, parts of ai-instructions.md
-
----
-
+---
 ## 🎯 Objective
 
 Define how your mobile app will manage state and handle data:
@@ -14,9 +12,7 @@ Define how your mobile app will manage state and handle data:
 2. How will you fetch server data?
 3. What offline strategy will you use?
 4. How will you synchronize data?
-
----
-
+---
 ## 📋 Questions
 
 ### Question 3.1: App State Management
@@ -24,6 +20,7 @@ Define how your mobile app will manage state and handle data:
 **How will you manage global app state?**
 
 **If React Native:**
+
 - A) ⭐ **Redux Toolkit** (Recommended)
   - Predictable state management
   - DevTools support
@@ -49,6 +46,7 @@ Define how your mobile app will manage state and handle data:
   - Best for: Fine-grained reactivity
 
 **If Flutter:**
+
 - A) ⭐ **Provider** (Recommended)
   - Simple, official recommendation
   - Best for: Most apps
@@ -66,18 +64,18 @@ Define how your mobile app will manage state and handle data:
   - Best for: Rapid development
 
 **If Native:**
+
 - **MVVM Pattern** with ViewModels
 - **Observable Pattern** (RxSwift/RxJava)
 
 **Your answer:**
-
----
-
+---
 ### Question 3.2: HTTP Client Library
 
 **What HTTP client library will you use to fetch data from your backend?**
 
 **If React Native:**
+
 - A) ⭐ **Axios** (Recommended)
   - Promise-based HTTP client
   - Interceptors, automatic JSON parsing
@@ -94,6 +92,7 @@ Define how your mobile app will manage state and handle data:
   - Best for: Complex data needs
 
 **If Flutter:**
+
 - A) ⭐ **Dio** (Recommended)
   - Powerful HTTP client
   - Interceptors, form data
@@ -105,11 +104,13 @@ Define how your mobile app will manage state and handle data:
   - Best for: Simple apps
 
 **If Native iOS:**
+
 - A) ⭐ **URLSession** (Built-in)
 - B) **Alamofire**
   - Popular third-party library
 
 **If Native Android:**
+
 - A) ⭐ **OkHttp** (Recommended)
 - B) **Retrofit**
   - Type-safe HTTP client
@@ -117,48 +118,50 @@ Define how your mobile app will manage state and handle data:
 **Your answer:**
 
 **If using REST API, ask:**
+
 - What API base URL structure?
   - Single base URL
   - Multiple endpoints
   - Environment-based URLs (dev/staging/prod)
 
 **If using GraphQL, ask:**
+
 - What GraphQL client?
   - React Native: Apollo Client, urql
   - Flutter: graphql_flutter, ferry
   - What GraphQL endpoint URL?
-
----
-
+---
 ### Question 3.3: Offline Strategy
 
 **How will your app work offline?**
 
 A) ⭐ **Read-Only Offline** (Recommended)
-   - Cache data for reading
-   - Show cached data when offline
-   - Queue writes for when online
-   - Best for: Most apps
+
+- Cache data for reading
+- Show cached data when offline
+- Queue writes for when online
+- Best for: Most apps
 
 B) **Full Offline Support**
-   - Complete CRUD offline
-   - Sync when online
-   - Best for: Productivity apps, note-taking
 
-C) **No Offline Support**
-   - Require internet connection
-   - Show error when offline
-   - Best for: Real-time apps, streaming
+- Complete CRUD offline
+- Sync when online
+- Best for: Productivity apps, note-taking
 
-**Your answer:**
+C) **No Offline Support**
 
----
+- Require internet connection
+- Show error when offline
+- Best for: Real-time apps, streaming
 
+**Your answer:**
+---
 ### Question 3.4: Local Storage Solution
 
 **What will you use for local data storage?**
 
 **If React Native:**
+
 - A) ⭐ **AsyncStorage** (Recommended)
   - Simple key-value storage
   - Best for: Small data, settings
@@ -176,109 +179,117 @@ C) **No Offline Support**
   - Best for: Complex data models
 
 **If Flutter:**
+
 - A) ⭐ **SharedPreferences** (Simple data)
 - B) **Hive** (Fast, NoSQL)
 - C) **Isar** (Fast, NoSQL)
 - D) **SQLite (sqflite)** (Relational data)
 
 **If Native iOS:**
+
 - A) **UserDefaults** (Simple data)
 - B) **Core Data** (Complex relational data)
 - C) **Realm** (Object database)
 
 **If Native Android:**
+
 - A) **SharedPreferences** (Simple data)
 - B) **Room** (SQLite abstraction)
 - C) **DataStore** (Modern, type-safe)
 
 **Your answer:**
-
----
-
+---
 ### Question 3.5: Data Synchronization
 
 **How will you sync data between local and server?**
 
 A) ⭐ **Optimistic Updates + Background Sync** (Recommended)
-   - Update UI immediately
-   - Sync in background
-   - Handle conflicts gracefully
-   - Best for: Most apps
+
+- Update UI immediately
+- Sync in background
+- Handle conflicts gracefully
+- Best for: Most apps
 
 B) **Pessimistic Updates**
-   - Wait for server confirmation
-   - Show loading states
-   - Best for: Critical data (payments, etc.)
+
+- Wait for server confirmation
+- Show loading states
+- Best for: Critical data (payments, etc.)
 
 C) **Manual Sync**
-   - User-triggered sync
-   - Pull-to-refresh pattern
-   - Best for: Simple apps
 
-D) **Real-time Sync**
-   - WebSockets or Server-Sent Events
-   - Instant updates
-   - Best for: Collaborative apps, chat
+- User-triggered sync
+- Pull-to-refresh pattern
+- Best for: Simple apps
 
-**Your answer:**
+D) **Real-time Sync**
 
----
+- WebSockets or Server-Sent Events
+- Instant updates
+- Best for: Collaborative apps, chat
 
+**Your answer:**
+---
 ### Question 3.6: Conflict Resolution
 
 **How will you handle data conflicts when syncing?**
 
 A) ⭐ **Last Write Wins** (Recommended)
-   - Simple, most recent update wins
-   - Best for: Most apps
+
+- Simple, most recent update wins
+- Best for: Most apps
 
 B) **Server Wins**
-   - Always use server version
-   - Best for: Authoritative server data
+
+- Always use server version
+- Best for: Authoritative server data
 
 C) **Merge Strategy**
-   - Intelligent merging
-   - Best for: Collaborative editing
 
-D) **User Resolution**
-   - Ask user to choose
-   - Best for: Critical conflicts
+- Intelligent merging
+- Best for: Collaborative editing
 
-**Your answer:**
+D) **User Resolution**
 
----
+- Ask user to choose
+- Best for: Critical conflicts
 
+**Your answer:**
+---
 ### Question 3.7: Caching Strategy
 
 **How will you cache API responses?**
 
 A) ⭐ **Time-based Cache** (Recommended)
-   - Cache for X minutes/hours
-   - Refresh after expiry
-   - Best for: Most data
+
+- Cache for X minutes/hours
+- Refresh after expiry
+- Best for: Most data
 
 B) **Stale-While-Revalidate**
-   - Show cached data immediately
-   - Fetch fresh data in background
-   - Best for: Good UX
+
+- Show cached data immediately
+- Fetch fresh data in background
+- Best for: Good UX
 
 C) **Cache Forever**
-   - Cache until app update
-   - Best for: Static data
 
-D) **No Caching**
-   - Always fetch fresh
-   - Best for: Real-time data
+- Cache until app update
+- Best for: Static data
 
-**Your answer:**
+D) **No Caching**
 
----
+- Always fetch fresh
+- Best for: Real-time data
 
+**Your answer:**
+---
 ### Question 3.8: Form State Management
 
 **How will you handle form state?**
 
 **If React Native:**
+
 - A) ⭐ **React Hook Form** (Recommended)
   - Minimal re-renders
   - Good performance
@@ -287,36 +298,36 @@ D) **No Caching**
   - Popular, well-documented
 
 **If Flutter:**
+
 - A) ⭐ **FormBuilder** (Recommended)
 - B) **Built-in Form widgets**
 
 **Your answer:**
-
----
-
+---
 ### Question 3.9: Error Handling Strategy
 
 **How will you handle API errors?**
 
 A) ⭐ **Centralized Error Handler** (Recommended)
-   - Global error handling
-   - Consistent error messages
-   - Best for: Most apps
+
+- Global error handling
+- Consistent error messages
+- Best for: Most apps
 
 B) **Per-Request Handling**
-   - Handle errors in components
-   - More granular control
-   - Best for: Complex error scenarios
 
-C) **Error Boundary Pattern**
-   - Catch errors at component level
-   - Show fallback UI
-   - Best for: React Native
+- Handle errors in components
+- More granular control
+- Best for: Complex error scenarios
 
-**Your answer:**
+C) **Error Boundary Pattern**
 
----
+- Catch errors at component level
+- Show fallback UI
+- Best for: React Native
 
+**Your answer:**
+---
 ### Question 3.10: Network Error Handling (Mobile-Specific)
 
 **How will you handle mobile-specific network errors?**
@@ -351,85 +362,85 @@ C) **Error Boundary Pattern**
 **Your answer:**
 
 **If retry logic selected, ask:**
+
 - What retry strategy?
   - Exponential backoff
   - Fixed interval
   - User-triggered retry
-
----
-
+---
 ### Question 3.11: Loading States
 
 **How will you handle loading states?**
 
 A) ⭐ **Skeleton Screens** (Recommended)
-   - Show content structure while loading
-   - Better UX than spinners
-   - Best for: Most screens
+
+- Show content structure while loading
+- Better UX than spinners
+- Best for: Most screens
 
 B) **Loading Spinners**
-   - Simple, universal
-   - Best for: Quick loads
 
-C) **Progressive Loading**
-   - Load critical data first
-   - Load secondary data after
-   - Best for: Complex screens
+- Simple, universal
+- Best for: Quick loads
 
-**Your answer:**
+C) **Progressive Loading**
 
----
+- Load critical data first
+- Load secondary data after
+- Best for: Complex screens
 
+**Your answer:**
+---
 ### Question 3.12: Data Validation
 
 **How will you validate data?**
 
 A) ⭐ **Client-side Validation** (Required)
-   - Validate before sending to server
-   - Better UX, less server load
+
+- Validate before sending to server
+- Better UX, less server load
 
 B) **Schema Validation**
-   - Use Zod, Yup, or similar
-   - Type-safe validation
 
-C) **Server Validation Only**
-   - Validate on server
-   - Show errors after submission
-   - Not recommended (poor UX)
+- Use Zod, Yup, or similar
+- Type-safe validation
 
-**Your answer:**
+C) **Server Validation Only**
 
----
+- Validate on server
+- Show errors after submission
+- Not recommended (poor UX)
 
+**Your answer:**
+---
 ### Question 3.13: Background Data Refresh
 
 **How will you refresh data in the background?**
 
 A) ⭐ **Background Fetch** (Recommended)
-   - Refresh when app is backgrounded
-   - iOS: Background App Refresh
-   - Android: WorkManager
-   - Best for: Most apps
+
+- Refresh when app is backgrounded
+- iOS: Background App Refresh
+- Android: WorkManager
+- Best for: Most apps
 
 B) **Push Notifications**
-   - Server pushes updates
-   - App refreshes on notification
-   - Best for: Real-time updates
 
-C) **No Background Refresh**
-   - Refresh only when app opens
-   - Best for: Simple apps
+- Server pushes updates
+- App refreshes on notification
+- Best for: Real-time updates
 
-**Your answer:**
+C) **No Background Refresh**
 
----
+- Refresh only when app opens
+- Best for: Simple apps
 
+**Your answer:**
+---
 #### 🎨 MERMAID STATE MANAGEMENT DIAGRAM FORMATS - CRITICAL
 
 **Use these exact formats** for mobile state management diagrams:
-
----
-
+---
 ##### 1️⃣ Mobile State Architecture (Server + Client + Local)
 
 Use `graph LR` to show different state types:
@@ -465,9 +476,7 @@ graph LR
 ```
 
 **Use for:** Mobile apps with offline-first strategy
-
----
-
+---
 ##### 2️⃣ Data Flow with Offline Support
 
 Use `sequenceDiagram` to show complete data sync cycle:
@@ -518,9 +527,7 @@ sequenceDiagram
 ```
 
 **Use for:** Apps with offline support and data synchronization
-
----
-
+---
 ##### 3️⃣ State Decision Tree (Mobile-Specific)
 
 Use `graph TD` to help developers choose state strategy:
@@ -551,9 +558,7 @@ graph TD
 ```
 
 **Use for:** Decision-making guide for mobile state strategy
-
----
-
+---
 ##### 4️⃣ Redux Architecture (Mobile Pattern)
 
 Use `graph TB` to show Redux structure for mobile:
@@ -600,27 +605,23 @@ graph TB
 ```
 
 **Use for:** Redux-based mobile apps with persistence
-
----
-
+---
 **Diagram Guidelines:**
+
 - Show offline/online paths clearly
 - Include cache layers (AsyncStorage, MMKV, WatermelonDB)
 - Use sequence diagrams for sync flows
 - Color code: Server=blue, Client=orange, Local=green, Cache=purple
 - Include mobile-specific considerations (slow networks, offline-first)
-
----
-
+---
 ## ✅ Phase 3 Completion
 
 After answering all questions, summarize:
 
 ```
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+---
 ✅ Phase 3 Complete: State & Data Management
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
+---
 Selected Stack:
 - State Management: Redux Toolkit
 - HTTP Client: Axios
@@ -633,9 +634,7 @@ Selected Stack:
 
 Proceed to Phase 4 (Permissions & Native Features)? (Y/n)
 ```
-
----
-
+---
 ## 📝 Generated Documents
 
 After Phase 3, generate/update:
@@ -643,15 +642,11 @@ After Phase 3, generate/update:
 - `docs/state-management.md` - State management patterns and setup
 - `docs/offline-strategy.md` - Offline and sync strategy
 - `ai-instructions.md` - Add state management rules
-
----
-
+---
 **Next Phase:** Phase 4 - Permissions & Native Features
 
 Read: `.ai-flow/prompts/mobile/flow-build-phase-4-permissions.md`
-
----
-
+---
 **Last Updated:** 2025-01-XX
 
 **Version:** 1.4.0