đŸ’» DĂ©veloppement

dev-mobile-app-architect

Architecture d'applications mobiles (native, cross-platform, hybrid).

⚡ Installation & lancement en 1 commande

Copiez-collez dans votre terminal : le skill s'installe dans ~/.claude/skills et Claude Code se lance directement dessus.

macOS / Linux
curl -fsSL https://raw.githubusercontent.com/khalilbenaz/claude-skills-collection/main/install.sh | sh -s -- dev-mobile-app-architect --launch
Windows (PowerShell)
iex "& { $(iwr -useb https://raw.githubusercontent.com/khalilbenaz/claude-skills-collection/main/install.ps1) } dev-mobile-app-architect -Launch"

🚀 DĂ©jĂ  installĂ© ?

claude "/dev-mobile-app-architect"

Ou tapez /dev-mobile-app-architect dans une session Claude Code, ou dĂ©crivez simplement votre besoin — le skill se dĂ©clenche automatiquement via le skill-router.

🔑 DĂ©clencheurs automatiques

Le skill s'active automatiquement quand votre demande contient :

architecture mobileapp mobilenative vs cross-platformFlutter vs React NativeMVVMClean Architecture mobileoffline first

📩 Installation manuelle

git clone https://github.com/khalilbenaz/claude-skills-collection.git cp -r claude-skills-collection/skills/dev-mobile-app-architect ~/.claude/skills/

Payload du plugin : skills/dev-mobile-app-architect · source éditable : dev-skills/mobile-app-architect

📖 Manuel

Mobile App Architect

Workflow

1. Qualifier le besoin avant de choisir un framework

Poser ces questions avant toute décision :

CritĂšreImpact
Plateformes ciblesiOS seul → Swift/SwiftUI ; Android seul → Kotlin/Compose ; les deux → cross-platform
Animations custom & jeuxNatif ou Flutter (Impeller) ; React Native acceptable avec Skia
AccÚs hardware spécifique (BLE, NFC, ARKit)Natif de préférence ; sinon plugin Flutter/RN à vérifier avant de committer
Taille Ă©quipe / compĂ©tencesÉquipe JS → React Native ; Ă©quipe C# → MAUI ; Ă©quipe polyvalente → Flutter
Time-to-marketCross-platform réduit ~30-40 % du temps pour les apps "standard"
Performance critique (<16 ms frames)Flutter (Dart AOT) ou natif ; React Native avec JSI+Fabric acceptable

2. Choisir la stack technologique

Matrice de décision rapide (2026) :

Native iOS   → Swift 6 + SwiftUI 5 + Combine/Swift Concurrency
Native Android → Kotlin 2 + Jetpack Compose 1.7 + Coroutines + Flow
Flutter      → Dart 3 + Flutter 3.22+ + Riverpod 2 + Impeller (default)
React Native → RN 0.75+ + Expo SDK 52 + New Architecture (Fabric+JSI) activĂ©e
KMP          → Kotlin Multiplatform + Compose Multiplatform (UI partagĂ©e si besoin)
MAUI         → .NET 9 + MAUI pour Ă©quipes C# existantes

RĂšgle empirique :


3. Architecturer les couches (Clean Architecture mobile)

Structure recommandée (indépendante du framework) :

presentation/
  screens/         ← UI pure, aucune logique mĂ©tier
  viewmodels/      ← expose des Ă©tats immuables Ă  la vue
domain/
  usecases/        ← une classe = une action mĂ©tier
  entities/        ← modùles purs sans annotations framework
  repositories/    ← interfaces uniquement
data/
  repositories/    ← implĂ©mentations concrĂštes
  datasources/
    remote/        ← API REST/GraphQL/gRPC
    local/         ← Room, sqflite, Core Data, SQLDelight
  models/          ← DTOs + mappers vers entities

Pattern par framework :

FrameworkPattern recommandéAlternative
FlutterBLoC 8+ ou Riverpod 2Provider (legacy)
React NativeZustand + React QueryRedux Toolkit
SwiftUIMVVM + @Observable (iOS 17)TCA (The Composable Architecture)
Jetpack ComposeMVVM + ViewModel + StateFlowMVI avec Orbit/MoleculeFlow

Exemple Flutter (Riverpod + UseCase) :

// domain/usecases/get_transactions.dart
class GetTransactions {
  final TransactionRepository _repo;
  const GetTransactions(this._repo);
  Future<List<Transaction>> call(String accountId) => _repo.fetch(accountId);
}

// presentation/providers/transactions_provider.dart
@riverpod
Future<List<Transaction>> transactions(Ref ref, String accountId) {
  return ref.watch(getTransactionsProvider).call(accountId);
}

4. Navigation et deep linking

// Flutter — GoRouter 14+ (type-safe routes)
@TypedGoRoute<HomeRoute>(path: '/')
class HomeRoute extends GoRouteData {
  const HomeRoute();
  Widget build(BuildContext context, GoRouterState state) => const HomeScreen();
}

// Deep link universel : https://app.example.com/payment/42
// → GoRouter intercepte via flutter_branch_io ou firebase_dynamic_links
// SwiftUI — NavigationStack (iOS 16+)
NavigationStack(path: $path) {
    ContentView()
        .navigationDestination(for: Route.self) { route in
            switch route {
            case .payment(let id): PaymentDetailView(id: id)
            }
        }
}

5. Data layer : offline-first

Stratégie en 4 temps :

  1. Lecture → SQLite local en source de vĂ©ritĂ© ; rĂ©seau en refresh asynchrone (stale-while-revalidate)
  2. Écriture → file de mutations offline (Drift/Room + worker background)
  3. Sync → rĂ©solution de conflits : Last-Write-Wins par dĂ©faut, CRDT si collaboration temps rĂ©el
  4. ConnectivitĂ© → surveiller connectivity_plus (Flutter) / NetInfo (RN) pour dĂ©clencher la sync
// Android — Room + WorkManager (offline queue)
@Entity data class PendingOperation(
    @PrimaryKey val id: String = UUID.randomUUID().toString(),
    val payload: String,   // JSON sérialisé
    val retries: Int = 0,
    val createdAt: Long = System.currentTimeMillis()
)

6. SĂ©curitĂ© mobile — checklist actionnable


7. Performance — points de contrîle critiques

# Flutter — profiling
flutter run --profile
flutter pub run flutter_launcher_icons  # vérifier tailles
# DevTools → Timeline, Memory, CPU Profiler

# React Native — Hermes + Flipper
npx react-native start --experimental-debugger
# Activer Hermes dans android/app/build.gradle : hermesEnabled = true

Cibles 2026 :


8. CI/CD mobile

# GitHub Actions — Flutter
- uses: subosito/flutter-action@v2
  with: { flutter-version: '3.22.x', channel: 'stable' }
- run: flutter test --coverage
- run: flutter build appbundle --release --obfuscate --split-debug-info=./debug-symbols
- uses: r0adkll/upload-google-play@v1   # deploy Play Store
# Fastlane — iOS
lane :beta do
  match(type: "appstore")           # certificates via git repo chiffré
  build_ios_app(scheme: "MyApp")
  upload_to_testflight
  slack(message: "Beta #{lane_context[SharedValues::BUILD_NUMBER]} uploadé")
end

Versioning automatique :

# Incrémenter build number depuis le numéro de run CI
VERSION_CODE=$GITHUB_RUN_NUMBER
flutter build apk --build-number=$VERSION_CODE

Anti-patterns à éviter

Anti-patternPourquoi c'est un problĂšmeCorrection
Logique métier dans les Widgets/ViewsImpossible à tester, couplage fortExtraire dans ViewModel/UseCase
setState() global dans FlutterRe-renders inutiles, performanceRiverpod/BLoC scoped
Appels réseau sans retry/timeoutUX cassée sur réseau mobile instableDio interceptors + retry package
Tokens JWT en clair dans AsyncStorageVol trivial via backup ADBSecure Storage obligatoire
Gros monorepo sans lazy importsStartup time > 4 sCode splitting + deferred loading
Navigation par routes stringErreurs silencieuses à runtimeRoutes typées (GoRouter, TCA Router)
Tests uniquement sur simulateurNe détecte pas les régressions perf réellesFirebase Test Lab / AWS Device Farm

Bonnes pratiques 2026