📱 Mobile Developer Agent Specification¶

🧠 Purpose¶

The Mobile Developer Agent is a modular, platform-aware engineering agent within the ConnectSoft AI Software Factory. Its mission is to autonomously generate production-ready mobile apps and modules across the following target stacks:

.NET MAUI – for C#/.NET-native mobile apps
Flutter – for Dart-based mobile/web/desktop hybrid apps
React Native – for JavaScript/TypeScript cross-platform apps

It acts as a multi-platform mobile compiler, orchestrated by UX, backend, and edition agents, producing apps that are:

🧱 Cleanly layered
⚙️ Service-integrated
🎨 Branded per tenant/edition
🔍 Observable by default

🧭 Position in the Agent System¶

The Mobile Developer Agent sits in the Engineering Cluster, collaborating with:

🧩 Backend Developer Agent – to generate service bindings
🎨 UX Designer Agent – for layout, routing, component specs
🖥️ Frontend Developer Agent – for design consistency and web-to-mobile continuity
🧪 QA Agent – for test plan and UI test stubs
📲 DevOps + CI Agent – for signing, packaging, and store-ready builds

It is orchestrated by the Mobile App Orchestrator or the Engineering Execution Flow.

🧩 Position Diagram (Simplified)¶

flowchart LR
  UX[🎨 UX Designer Agent]
  BE[🔧 Backend Developer Agent]
  FE[🖥️ Frontend Developer Agent]
  QA[🧪 QA Agent]
  CI[🚀 CI/CD Agent]

  UX --> MDA
  BE --> MDA
  FE --> MDA
  MDA --> QA
  MDA --> CI

  subgraph MDA[📱 Mobile Developer Agent]
    direction TB
    FlutterStack[Flutter Target]
    ReactNativeStack[React Native Target]
    MAUIStack[.NET MAUI Target]
  end

Hold "Alt" / "Option" to enable pan & zoom

🎯 Goals¶

Goal	Description
Multi-platform UI generation	Generate consistent, brand-aware mobile UIs across MAUI, Flutter, and React Native.
Service binding	Autogenerate mobile HTTP bindings from OpenAPI, GraphQL, or REST contract definitions.
State management scaffolding	Inject MVVM (MAUI), Riverpod/BLoC (Flutter), or Redux/Context (React Native).
Routing and flow control	Define and scaffold full screen-to-screen navigation trees.
Modular delivery	Support partial feature generation (e.g., just "booking module" or "onboarding flow").
Test hooks + metrics	Include OTEL, crash reporting, UI trace annotations, and UI test stubs.
Edition-aware branding	Handle tenant themes, icons, login screens, and overlays.

🔧 Key Use Cases¶

Generate a fully themed white-label app for a B2B tenant on iOS/Android in .NET MAUI
Scaffold a Flutter-based MVP from UX wireframes + backend APIs
Create a React Native mobile front for an existing web SaaS
Add a "Notifications" screen and logic to an already existing modular mobile app
Retest, refactor, or regenerate only the routing + viewmodel layer after backend change

🏗️ Clean Architecture Compliance¶

The agent always respects ConnectSoft’s core principles:

Modular DDD features (per screen or use case)
MVVM or equivalent pattern enforcement
Separation of UI, logic, and services
Observable UI and API tracing
Multi-tenant + Edition support

✅ Summary¶

The Mobile Developer Agent is a multi-platform mobile app generator and feature compiler
It works with .NET MAUI, Flutter, and React Native
It sits in the Engineering Cluster, consuming designs and contracts, and emitting traceable app modules
It is modular, clean, edition-aware, observable, and fully automatable

📋 Core Responsibilities¶

The Mobile Developer Agent is responsible for end-to-end generation, adaptation, and integration of mobile application features, tailored for target platforms: .NET MAUI, Flutter, and React Native.

It is designed to build apps that are:

🧱 Modular
🧠 AI-generated but human-auditable
📦 Multi-tenant and brand-aware
📲 Native-feeling across iOS and Android

🧭 Responsibility Overview¶

Area	Responsibility
🧱 UI Layer Generation	Generates pages/screens, navigation graphs, themed components, layout code.
⚙️ Service Integration	Binds OpenAPI/GraphQL endpoints into mobile services using platform-specific SDKs or HTTP clients.
🔄 State Management	Injects MVVM (MAUI), Riverpod/BLoC (Flutter), Redux or Context (React Native).
🧭 Routing + Navigation	Generates `routes.ts`, `app_routes.dart`, `AppShell.xaml.cs`, etc., based on UX flow.
🎨 Theming + Branding	Compiles tenant-specific assets (logos, colors, fonts) into branded app shell.
🧪 UI Test Hook Generation	Emits screen test IDs, testing harnesses, BDD-friendly test entries per screen.
🔒 Authentication UX Wiring	Implements mobile login, multi-tenant switching, auth callbacks, biometric wiring.
🌐 Offline + Caching Support	Adds platform-safe caching, retry queues, or local persistence logic.
🧠 Telemetry + Tracing	Embeds OpenTelemetry spans, crash reporting hooks, trace-aware user actions.
🧱 Build System Support	Structures project for GitHub Actions, Azure Pipelines, and signing pipelines.

🔁 Modular Feature Responsibilities¶

The Mobile Developer Agent can be instructed to create:

A complete mobile app repository
A single feature module (Onboarding, Notifications, Appointments)
A screen bundle (e.g., LoginScreen + AuthFlow + ForgotPassword)
A shared component library (e.g., form fields, modal overlays)
A native bridge or plugin wrapper (e.g., Flutter plugin for QR scanning)

🎨 Branding & Edition Logic¶

Layer	Branding Applied
Logo/Icon	From `edition-assets/branding.json`
Theme colors, fonts	From `edition-styles.json`
Feature visibility	From `edition-config.yaml`
Store name/package ID	From `edition-app-metadata.yaml`

📱 Platform-Specific Responsibilities¶

Platform	Specialized Tasks
.NET MAUI	Create `AppShell`, `.xaml` pages, `ViewModel.cs` files, dependency injection wiring
Flutter	Scaffold Dart classes, `lib/screens/`, navigation using `GoRouter` or `AutoRoute`, inject `Riverpod`
React Native	Structure JSX/TSX pages, Redux store, navigation stack via `@react-navigation/native`, async thunk wiring

🔂 Continuous Responsibility in Iterative Scenarios¶

When the agent is invoked incrementally (e.g., to add a screen or update an API contract), it:

Preserves generated layout and state scaffolding
Applies only delta updates (e.g., add screen, refactor service, adjust navigation)
Updates test metadata and route graphs accordingly

🧑‍💻 Human-Aware Responsibility Handoff¶

The agent includes:

README.md describing generated output structure
human-review.md summarizing decisions requiring dev feedback (e.g., ambiguous field type, custom animation)

✅ Summary¶

The Mobile Developer Agent is responsible for:

Full mobile app generation
Feature/module screen injection
API and auth wiring
Theming and edition logic
Routing, testing, observability
Supporting .NET MAUI, Flutter, and React Native targets

It supports clean, testable, modular, and multi-tenant mobile codebases — 100% agent-generated, CI/CD ready.

📥 Accepted Inputs¶

The Mobile Developer Agent consumes a rich set of structured, semantically scoped inputs from multiple upstream agents. These inputs provide everything the agent needs to generate native/hybrid mobile modules for .NET MAUI, Flutter, and React Native platforms — including layouts, bindings, tenant theming, routing graphs, and backend contracts.

📂 Core Input Categories¶

Input Type	Source Agent	Description
UI Flow Specs	UX Designer Agent	YAML/JSON screen definitions, navigation graph, component hierarchy, control bindings
OpenAPI/GraphQL Contracts	Backend Developer Agent	Service specifications to bind data models, DTOs, and API methods
Edition Branding Assets	Product Manager Agent or Edition Coordinator	Icons, theme palettes, fonts, localized strings, splash screens
Domain Models	Backend Developer Agent	Entity and DTO definitions, enum sets, business rules
Routing Definitions	UX Designer Agent or Frontend Developer Agent	Describes transitions, stacked flows, and nested navigation structures
Authentication Flow	Auth/Identity Agent	OAuth/OpenID Connect callback structure, login screen behavior, biometric support toggle
Consent + Feature Flags	LegalOps Agent + Feature Toggle Agent	Which screens require consent, tenant- or region-specific feature activation
Screen Test Metadata	QA Agent	Screen test IDs, expected behaviors, BDD tag associations
Tenant Profile	Orchestration or Edition Agent	Regional settings, app ID overrides, white-label flags, onboarding variants

📘 Example: `ui-flow.yaml`¶

app:
  name: BookingApp
  root: SplashScreen
  screens:
    - id: SplashScreen
      type: screen
      transition: fade
      next: LoginScreen
    - id: LoginScreen
      inputs: [email, password]
      buttons:
        - text: Login
          action: submit
      next: Dashboard
    - id: Dashboard
      tabs:
        - Book
        - History
        - Profile

📘 Example: `api-spec.openapi.json`¶

paths:
  /appointments:
    get:
      summary: Get all appointments
      responses:
        200:
          content:
            application/json:
              schema:
                $ref: "#/components/schemas/AppointmentList"
  /login:
    post:
      requestBody:
        content:
          application/json:
            schema:
              $ref: "#/components/schemas/LoginRequest"

📘 Example: `edition-config.yaml`¶

tenant: vetclinic-premium
theme:
  primaryColor: "#123456"
  font: "Nunito"
assets:
  icon: "vetclinic/icon.png"
  splash: "vetclinic/splash.png"
features:
  enableQRScan: false
  enableAppointments: true

🔀 Input Format Flexibility¶

Format	Description
YAML	Preferred for UI/UX trees, config-like edition logic
JSON	Used for OpenAPI, GraphQL, DTOs, test metadata
Asset Bundles	Directory paths or URLs to logos, icons, splash screens, localized text sets
Prompt Envelopes	Semantic Kernel-style structured prompts describing mobile module tasks in high-level language

🔐 Input Context Tags¶

All inputs are tagged with:

traceId, sessionId
platformTargets (maui, flutter, react-native)
scanScope: full-app, screen-only, auth-only, branding-only
buildType: debug, release, white-label-preview
locale: for region-aware generation (e.g., 🇪🇺 🇺🇸 🇸🇦)

✅ Summary¶

The Mobile Developer Agent accepts:

📐 UX flows
🔌 API contracts
🎨 Theming
🔐 Auth flows
📱 Routing and screen specs
🧪 Testing metadata
🌍 Tenant, locale, edition overlays

All inputs are semantically tagged, orchestrated, and structured for reproducible mobile feature delivery — across .NET MAUI, Flutter, and React Native targets.

📤 Outputs¶

The Mobile Developer Agent produces a platform-specific, modular mobile application bundle, designed for extensibility, GitOps workflows, and integration into CI/CD pipelines. These outputs vary by target (.NET MAUI, Flutter, React Native) but share a consistent modular structure and metadata tagging for traceability.

📦 Output Categories¶

Category	Description
Codebase	Full mobile application source code (per platform) including pages, components, services, and models.
Routing & Navigation	Auto-generated navigation graphs, route constants, shell setup (`AppShell`, `routes.ts`, `app_router.dart`).
API Bindings	Service classes or SDK wrappers for backend integration, based on OpenAPI/GraphQL contracts.
State Management	ViewModels, BLoC/Provider modules, Redux stores (per platform standard).
Tenant Assets	Themed icons, splash screens, fonts, locale files, and login screen variations.
Testing Hooks	UI test IDs, BDD scenarios, snapshot templates, and platform-compatible test runner wiring.
Telemetry Wrappers	OTEL spans, error tracking interceptors, and API request observability wrappers.
Documentation	README, `mobile-overview.md`, generated structure docs (`tree.json`, `flow.yaml`).
CI/CD Metadata	Output tags, platform build targets, version info, and signing readiness notes.

📁 Output Directory Structure (Per Platform)¶

🔷 .NET MAUI (C# / XAML)¶

/maui-app/
  AppShell.xaml
  App.xaml.cs
  Pages/
    LoginPage.xaml
    DashboardPage.xaml
  ViewModels/
    LoginViewModel.cs
    DashboardViewModel.cs
  Services/
    AppointmentService.cs
  Themes/
    Styles.xaml
  Assets/
    splashscreen.png
    icon.png
  Tests/
    UITests/
  README.md
  mobile-overview.md

🔷 Flutter (Dart)¶

/flutter-app/
  lib/
    main.dart
    screens/
      login.dart
      dashboard.dart
    services/
      appointment_service.dart
    state/
      auth_state.dart
    theme/
      app_theme.dart
  assets/
    images/
    fonts/
  test/
    widgets/
  README.md
  flow.yaml

🔷 React Native (TypeScript/JS)¶

/react-native-app/
  src/
    screens/
      LoginScreen.tsx
      DashboardScreen.tsx
    navigation/
      routes.ts
    services/
      appointmentService.ts
    store/
      authSlice.ts
    theme/
      colors.ts
  assets/
    icons/
    splash/
  e2e/
    tests/
  README.md
  structure.md

📘 Example: `mobile-overview.md` (Auto-Generated)¶

# BookingApp — Mobile Module

**Generated For:** vetclinic-premium  
**Platform:** React Native  
**Modules Included:** Login, Dashboard, Appointments  
**Theme:** Brand Blue  
**Navigation:** React Navigation Stack  
**Auth:** OAuth with biometric fallback  
**APIs:** login, appointments, notifications

🔁 Multi-Target Emission Support¶

If multiple platforms are requested (flutter, maui, react-native), agent emits multiple sibling directories, each scoped and tagged with:

platform: flutter | maui | react-native
tenantId
editionId
generatedAt

🧪 Output Artifacts Used By¶

Artifact	Used By
`/tests/`, `UITests/`	QA Agent, CI
`/AppShell`, `routes.ts`	Frontend Architect Agent, Studio UI
`/ViewModels`, `/state/`	Engineer reviewing async logic
`flow.yaml`	Studio visualizer, app previewer
`README.md`, `mobile-overview.md`	DevOps Agent, HumanOps Agent

✅ Summary¶

The Mobile Developer Agent emits:

📱 Full mobile application codebases per platform
🔀 Routing, API bindings, and state scaffolding
🎨 Edition-aware themes and screens
🧪 Test-ready apps with observability hooks
🧾 Fully documented, GitOps-compatible mobile outputs

Each emission is cleanly structured, traceable, and ready for human review or automated release.

🎯 Platform Targeting Strategy¶

The Mobile Developer Agent is capable of multi-platform emission, dynamically selecting and adapting generation logic based on project scope, platform targets, tenant requirements, and orchestration flags.

This cycle defines when and how the agent decides to generate for:

✅ .NET MAUI
✅ Flutter
✅ React Native

🧭 Target Selection Modes¶

Mode	Description
Explicit Target	Orchestrator or input prompt specifies platform(s): `platformTargets: [flutter]`.
Edition Preference	If `edition-config.yaml` includes platform preference, that overrides.
Tenant Compatibility	Some tenants may require native-only (e.g., MAUI), or Flutter for hybrid rollout.
Fallback Strategy	If primary generation fails or unsupported, agent may fall back to alternate platform (e.g., MAUI → Flutter).

📘 Input Prompt Example¶

platformTargets:
  - flutter
  - react-native
scanScope: full
tenantId: vetclinic-premium
buildType: release

→ Agent generates both platforms side-by-side with consistent structure and shared logic when possible.

🧠 Platform Selection Decision Tree¶

flowchart TD
    A[Input: platformTargets]
    B{Defined?}
    C[Use specified targets]
    D[Check edition defaults]
    E{Edition or Tenant says Flutter?}
    F[Use Flutter generator]
    G[Fallback to default]
    A --> B
    B -- Yes --> C
    B -- No --> D
    D --> E
    E -- Yes --> F
    E -- No --> G

Hold "Alt" / "Option" to enable pan & zoom

⚙️ Generator Strategy by Platform¶

Platform	Strategy
.NET MAUI	Full MVVM scaffolding, XAML + C#, AppShell routing, DI setup.
Flutter	Dart-based structure with modular `lib/screens`, `riverpod` or `BLoC` state injection, GoRouter navigation.
React Native	TypeScript-first layout with `@react-navigation/native`, Redux or Context API wiring, async API slices.

🔁 Cross-Platform Common Code Handling¶

If multiple targets are selected:

Shared logic (DTOs, API paths, field rules) is extracted from OpenAPI
Navigation flow (flow.yaml) drives generation on all stacks
Localized strings and theming assets are normalized and adapted to each platform
State management follows idiomatic pattern per platform, but aligned conceptually (e.g., MAUI ViewModel = Flutter StateNotifier = RN Redux slice)

📱 Default Platform by Use Case (if not specified)¶

Use Case	Default
Enterprise + existing .NET backend	✅ .NET MAUI
Startups, consumer UX first	✅ Flutter
Web-first teams with TS/JS stack	✅ React Native
Multi-tenant with edition branding	Flutter or React Native (faster overlay adaptation)
Single-platform (iOS only)	Any, but may steer toward React Native for rapid iteration

📋 Per-Tenant Platform Example¶

tenants:
  vetclinic-premium:
    platform: maui
  petcare-lite:
    platform: flutter
  wellness360:
    platform: react-native

→ Handled at generation time by tenant context injector.

✅ Summary¶

The Mobile Developer Agent:

🧠 Selects the right platform(s) based on prompt, edition, and tenant rules
🛠️ Uses idiomatic generation logic per stack
🔁 Supports fallback and multi-target scenarios
📦 Outputs aligned modules across .NET MAUI, Flutter, and React Native when requested

🔄 Execution Flow¶

This cycle details the full internal execution flow of the Mobile Developer Agent, from agent activation through multi-platform output delivery.

The agent operates as a skill-based pipeline, interpreting mobile design and backend specs into concrete screen modules, state scaffolds, and platform-specific codebases.

🔁 High-Level Workflow¶

flowchart TD
    START[🚀 Trigger: StartAgentSession(MobileDeveloperAgent)]
    PARSE[📥 Parse Inputs & Platform Targets]
    PLAN[🧠 Create Generation Plan]
    SCREENGEN[🧱 Generate Screens + Layouts]
    ROUTE[🧭 Generate Routing & Navigation]
    STATE[🔄 Wire State Management Layer]
    API[🔌 Bind API Contracts (OpenAPI / GraphQL)]
    THEMING[🎨 Apply Tenant Theming & Branding]
    TEST[🧪 Inject Test IDs + UI Test Stubs]
    OBS[📈 Add Telemetry + Tracing]
    PACKAGE[📦 Emit Codebase + Metadata]
    END[✅ Done]

    START --> PARSE --> PLAN --> SCREENGEN --> ROUTE --> STATE --> API --> THEMING --> TEST --> OBS --> PACKAGE --> END

Hold "Alt" / "Option" to enable pan & zoom

🪜 Step-by-Step Breakdown¶

Step	Description
1. Parse Inputs	Load `ui-flow.yaml`, `api-spec.json`, `edition-config.yaml`, and `platformTargets`.
2. Create Plan	Determine what modules, screens, and assets to generate per platform.
3. Generate Screens	Build layout code: JSX/XAML/Dart, including form fields, buttons, labels, containers.
4. Build Navigation	Generate route maps, router configs, `AppShell`, and nested navigation trees.
5. Wire State Logic	Inject ViewModel/BLoC/Redux/Context files per platform.
6. Bind APIs	Build service wrappers, auth injectors, and DTOs from backend contracts.
7. Apply Theming	Inject fonts, splash screens, logos, primary color sets, and edition overlays.
8. Add Tests	Insert test hooks (testID/testKey), generate UI spec runners, and default screen checks.
9. Add Observability	Decorate screens and service calls with OpenTelemetry spans, error capture, session tracing.
10. Emit Output	Write full platform project(s) into `/flutter-app/`, `/maui-app/`, or `/react-native-app/`, with metadata and README.

🧠 Agent-Initiated Events During Flow¶

Event	Trigger
`MobileScreenGenerated`	After each screen is scaffolded
`MobilePlatformReady`	When all files for one platform are complete
`MobileGenerationError`	On invalid layout, missing schema, or navigation conflict
`MobileComplianceWarning`	If app lacks erasure endpoint, tenant switch, or auth safety
`MobileTelemetryAttached`	When observability hooks added to layout/API layers

🧑‍💻 Developer-Aware Step¶

If humanReviewMode: true or agent encounters ambiguity:

Agent emits human-review.md file with notes like:
"Unclear where to route after SignupSuccessScreen."
"API /verify-email is missing expected response schema."
Flags step with ManualReviewRequired for Studio or DevOps agent.

🧪 Reproducibility Guarantees¶

Each run is:

✅ Deterministic (given same input)
📁 Output-traceable (each file tied to traceId, platform, module)
📝 Documented with mobile-overview.md + changelog per run

✅ Summary¶

The Mobile Developer Agent executes a 10-stage flow:

🧠 Plans
🧱 Generates layouts
🧭 Routes
🔌 Binds APIs
🎨 Themes
🧪 Tests
📈 Observes
📦 Emits builds

It ensures modular, clean, platform-native mobile application output that’s traceable and CI/CD ready.

🧩 Skills and Kernel Functions¶

The Mobile Developer Agent is powered by a modular set of Semantic Kernel skills that orchestrate layout generation, service integration, theming, and routing per mobile platform.

Each skill is responsible for a focused task and can be reused across .NET MAUI, Flutter, and React Native generation pipelines with trace-scoped logic.

🧠 Core Kernel Skills¶

Skill Name	Purpose
`GenerateScreenLayoutSkill`	Builds UI layout for a single screen: form fields, buttons, containers, etc.
`BuildNavigationGraphSkill`	Constructs full navigation stack or tab routing based on flow inputs.
`GenerateStateLayerSkill`	Creates ViewModel (MAUI), Riverpod/Bloc (Flutter), or Redux slice/Context (RN).
`BindApiServiceSkill`	Generates service wrappers for OpenAPI/GraphQL: DTOs, methods, error handling.
`InjectThemeAndAssetsSkill`	Applies edition-specific assets, splash screens, icons, fonts, and styles.
`GenerateTestHooksSkill`	Adds `testId`, screen IDs, and simple UI tests for each module or screen.
`DecorateWithTelemetrySkill`	Wraps user actions and API calls with OpenTelemetry spans + error tracking.
`EmitMobileProjectSkill`	Final output writer for each platform — writes files, folders, and metadata.
`ValidateScreenStructureSkill`	Checks UI layout consistency, required fields, and accessibility constraints.
`ReviewPromptPlannerSkill`	Decides which areas need human intervention or UX decision review.

→ GenerateScreenLayoutSkill
→ GenerateStateLayerSkill
→ BindApiServiceSkill
→ BuildNavigationGraphSkill
→ GenerateTestHooksSkill
→ DecorateWithTelemetrySkill
→ EmitMobileProjectSkill

📘 Example Skill Invocation: `GenerateScreenLayoutSkill`¶

{
  "screenId": "LoginScreen",
  "platform": "react-native",
  "layoutType": "form",
  "fields": ["email", "password"],
  "actions": ["login", "forgotPassword"],
  "theme": "vetclinic-premium",
  "traceId": "proj-811-v2"
}

→ Outputs LoginScreen.tsx and layout metadata.

🧠 Contextual Memory Use in Skills¶

GenerateScreenLayoutSkill may reuse patterns (e.g., reusable TextFieldWithIcon) from past sessions.
GenerateStateLayerSkill uses known response model bindings from similar endpoints.
InjectThemeAndAssetsSkill adapts based on prior edition overlays (colors, typography, onboarding variants).

🧪 Validation and Retry Hooks in Skills¶

Each skill can return:
success: true
warnings: [ ... ]
retryRecommended: true
Skills support self-correction, e.g., fallback layout if invalid screen type detected.

📘 Example Skill Output (Test Hook Generator)¶

{
  "screen": "Dashboard",
  "testIds": {
    "welcomeText": "dashboard_welcome_text",
    "appointmentList": "dashboard_appointments"
  },
  "testRunner": "jest + detox"
}

🛠️ Platform-Specific Skill Behavior¶

Skill	Adaptations
`GenerateScreenLayoutSkill`	Emits `.xaml` (MAUI), `.dart` (Flutter), `.tsx` (RN)
`GenerateStateLayerSkill`	Generates ViewModel.cs (MAUI), BLoC or Provider (Flutter), Redux slice or Context (RN)
`EmitMobileProjectSkill`	Uses file writers and folder conventions per platform

✅ Summary¶

Skills form the foundation of mobile feature generation
They are:
🧠 Modular
📦 Reusable
⚙️ Platform-aware
🧾 Trace-linked
Skills compose cleanly into screen, app, and full-project pipelines across .NET MAUI, Flutter, and React Native

🧰 Technology Stack and SDK Matrix¶

This cycle outlines the full mobile technology stack supported by the Mobile Developer Agent, detailing frameworks, SDKs, language tools, state managers, and build systems per platform.

It ensures that generated apps are aligned with industry standards, clean architecture principles, and ConnectSoft’s multi-tenant, modular platform vision.

📱 Platform Stack Comparison¶

Platform	Language	Framework	State Manager	Routing	Build Tool
.NET MAUI	C#	MAUI/XAML	MVVM (CommunityToolkit.Mvvm)	Shell + Route URIs	MSBuild + CLI
Flutter	Dart	Flutter SDK	Riverpod / BLoC	GoRouter / AutoRoute	`flutter build`
React Native	TS/JS	React Native	Redux / Context API	`@react-navigation`	Metro + Expo CLI

🔌 SDK & Library Support Matrix¶

Category	MAUI	Flutter	React Native
UI Components	`Microsoft.Maui.Controls`, `XAML`	`Material`, `Cupertino`, `FlutterFlow`	`react-native-paper`, `native-base`
State Mgmt	`MVVM Toolkit`, `ObservableProperty`	`Riverpod`, `BLoC`, `Provider`	`Redux Toolkit`, `useReducer`, `Context`
HTTP Client	`HttpClient`, `Refit`, `Polly`	`http`, `dio`, `graphql_flutter`	`axios`, `fetch`, `apollo-client`
Auth/OAuth	`MSAL`, `OpenIddict`, `WebAuthenticator`	`flutter_appauth`, `firebase_auth`	`expo-auth-session`, `react-native-app-auth`
Navigation	`Shell`, `Routing.RegisterRoute`	`GoRouter`, `AutoRoute`, `Navigator`	`@react-navigation/native-stack`, `Drawer`
Theming	`Styles.xaml`, `ResourceDictionary`	`ThemeData`, `FlexColorScheme`	`ThemeProvider`, `StyleSheet`
Testing	`xUnit`, `MAUI.UITest`, `MSTest`	`flutter_test`, `golden_toolkit`, `integration_test`	`jest`, `detox`, `react-native-testing-library`
Observability	`OpenTelemetry.Instrumentation.Http`, `Serilog`	`sentry_flutter`, `otel_dart`	`@opentelemetry/api`, `Sentry`, `Expo Analytics`
CI/CD Support	Azure Pipelines, GitHub Actions	GitHub Actions, Codemagic, Bitrise	Expo EAS, Fastlane, GitHub Actions

📦 Artifact Format & Packaging¶

Platform	Output Type(s)	Description
MAUI	`.apk`, `.aab`, `.ipa`, `.msi`	Native binaries; can emit `.nupkg` for SDK-style sharing
Flutter	`.apk`, `.aab`, `.ipa`, `.web`, `.linux`	Multi-platform app builds, including PWA
React Native	`.apk`, `.aab`, `.ipa`, `.bundle`	Web-compatible or native store-ready bundles via Expo or CLI

🔐 Identity & Security Modules¶

Area	Stack-Specific Tools
Biometrics	MAUI Essentials, `LocalAuthentication` (Flutter), `expo-local-authentication`
JWT Handling	`System.IdentityModel`, `jwt_decoder` (Flutter), `jsonwebtoken` (RN)
Secure Storage	`SecureStorage` (.NET), `flutter_secure_storage`, `react-native-encrypted-storage`
App Transport Security (ATS)	Enabled via platform default templates and security profiles

🌐 Internationalization (i18n)¶

Platform	Toolchain
MAUI	`resx` resources, `CultureInfo.CurrentCulture`
Flutter	`flutter_localizations`, `.arb` files, `intl`
React Native	`i18next`, `react-intl`, `react-native-localize`

🧪 Automated Testing Toolchain¶

Test Type	MAUI	Flutter	React Native
Unit Tests	`xUnit`, `MSTest`	`flutter_test`, `test`	`jest`, `mocha`
Widget/Screen UI	`MAUI.UITest`	`golden_toolkit`	`react-native-testing-library`
Integration	`SpecFlow + Appium`	`integration_test`	`detox`, `Appium`
E2E Snapshots	`Playwright`	`FlutterDriver` (legacy)	`Storybook`, `jest-image-snapshot`

✅ Summary¶

The Mobile Developer Agent is equipped to generate mobile apps using:

📦 Modern SDKs across MAUI, Flutter, and React Native
⚙️ Native state management and routing tools
🔐 Secure, compliant identity flows
🧪 Fully testable codebases, ready for CI/CD
📊 Observable outputs (OpenTelemetry, Sentry, etc.)

All stacks are modular, idiomatic, and GitOps-integrated — empowering the agent to generate production-grade mobile systems across all delivery channels.

🧾 Prompt Input Template¶

The Prompt Input Template defines how the Mobile Developer Agent receives structured instructions to generate full or partial mobile applications. This prompt may originate from the Orchestrator, Product Owner Agent, or as a refinement from another engineering agent.

The input supports generation for .NET MAUI, Flutter, and React Native, and includes configuration for edition branding, navigation, test stubs, and multi-tenant logic.

📥 Input Format: YAML / JSON¶

traceId: proj-811-v2
sessionId: mobilegen-sess-428
platformTargets:
  - flutter
  - react-native
scanScope: full
generate:
  appName: BookingApp
  modules:
    - Login
    - Dashboard
    - Appointments
  theme: vetclinic-premium
  authFlow:
    type: oauth2
    enableBiometrics: true
  localization:
    enabled: true
    defaultLocale: en-US
  tenantId: vetclinic-premium
  editionId: vetclinic-blue
inputs:
  uiFlow: ./ui/ui-flow.yaml
  apiSpec: ./api/openapi.yaml
  brandingAssets: ./branding/edition-config.yaml
  testMetadata: ./qa/ui-tests.json
buildType: release

🔍 Field Definitions¶

Field	Description
`traceId`, `sessionId`	For observability and auditability
`platformTargets[]`	One or more of `maui`, `flutter`, `react-native`
`scanScope`	`full`, `screenOnly`, `featureOnly`, `brandingOnly`
`generate.appName`	Human-friendly app name
`generate.modules[]`	High-level feature list (screens or flows)
`theme`	Refers to tenant or edition-specific styling and assets
`authFlow`	Defines authentication mode, biometric enablement
`localization`	Language support toggle and default locale
`inputs.*`	External paths (relative, URL, or blob ref) to required configuration
`buildType`	`debug`, `release`, `white-label-preview`

📘 UI Flow Reference (`ui/ui-flow.yaml`)¶

screens:
  - id: LoginScreen
    fields: [email, password]
    actions: [login]
    next: DashboardScreen
  - id: DashboardScreen
    tabs: [Appointments, Profile]

🧪 Test Metadata Example (`ui-tests.json`)¶

{
  "LoginScreen": {
    "testId": "login_screen_root",
    "actions": ["fill_email", "fill_password", "tap_login"],
    "expectedNext": "DashboardScreen"
  }
}

🔁 Prompt Modes¶

Mode	Description
Screen-only	Only generate new screen (e.g., `Generate LoginScreen for React Native`)
Branding-only	Update theming, icons, splash screen across platforms
Partial-module	Regenerate or augment existing module (`Appointments`)
Multi-platform full-app	End-to-end app generation for multiple targets

📎 Orchestration Options (Advanced)¶

orchestration:
  retryOnFailure: true
  manualReviewEnabled: false
  observabilityLevel: full
  postGenerateHook:
    - validateStructure
    - notifyStudio

✅ Summary¶

The Mobile Developer Agent accepts rich prompt input to:

📱 Generate platform-specific apps and modules
🎨 Apply tenant edition branding and feature flags
🧭 Scaffold navigation and routing
🔐 Integrate authentication flows and localization
🧪 Prepare test hooks and observability metadata

The prompt is modular, extensible, and traceable — allowing precise control of mobile output generation.

📦 Output Format and Layout¶

This cycle defines the output structure generated by the Mobile Developer Agent for each supported platform: .NET MAUI, Flutter, and React Native.

All outputs are:

📁 Modular – structured by feature, screen, or service
🧾 Traceable – tagged with traceId, platform, editionId, and tenantId
🧪 Testable – includes test artifacts, screen IDs, and sample specs
📤 Ready for CI/CD – with README.md, mobile-overview.md, and metadata for pipelines

📁 Directory Structure Overview¶

Each generated platform will be output to a dedicated root:

/mobile-output/
  /flutter-app/
  /maui-app/
  /react-native-app/

📘 .NET MAUI Output Layout¶

/maui-app/
  App.xaml
  AppShell.xaml
  Pages/
    LoginPage.xaml
    DashboardPage.xaml
  ViewModels/
    LoginViewModel.cs
    DashboardViewModel.cs
  Services/
    AuthService.cs
    AppointmentService.cs
  Resources/
    Styles.xaml
    Fonts/
    Images/
  Tests/
    UITests/
  README.md
  mobile-overview.md

📘 Flutter Output Layout¶

/flutter-app/
  lib/
    main.dart
    screens/
      login.dart
      dashboard.dart
    services/
      auth_service.dart
    state/
      login_state.dart
    theme/
      app_theme.dart
    routing/
      app_router.dart
  assets/
    fonts/
    images/
  test/
    widgets/
  README.md
  flow.yaml

📘 React Native Output Layout¶

/react-native-app/
  src/
    screens/
      LoginScreen.tsx
      DashboardScreen.tsx
    services/
      authService.ts
    store/
      loginSlice.ts
    navigation/
      routes.ts
    theme/
      colors.ts
  assets/
    images/
    fonts/
  tests/
    e2e/
  README.md
  structure.md

📦 Shared Metadata Files (Per Output)¶

File	Description
`README.md`	Explains structure, purpose, build/run commands
`mobile-overview.md`	Summary: platform, modules, theme, auth method, version
`flow.yaml` / `structure.md`	Auto-generated layout and navigation mapping
`mobile-trace.json`	Contains trace info: `traceId`, `tenantId`, `editionId`, `timestamp`

📑 Per-Screen Output Artifacts¶

Each screen results in:

Layout file (LoginPage.xaml, login.dart, LoginScreen.tsx)
State file (LoginViewModel.cs, login_state.dart, loginSlice.ts)
Routing entry (e.g., AppShell.RegisterRoute, routes.ts, GoRouter() config)
Test metadata (testId map, UI test template)

🧪 Test Output Examples¶

Platform	Test Artifacts
MAUI	`LoginScreenTest.cs` using `MAUI.UITest`
Flutter	`login_test.dart` using `flutter_test`
React Native	`LoginScreen.test.tsx` using `jest` + `@testing-library/react-native`

📘 mobile-overview.md Example¶

# Mobile Module Overview

**Generated For:** vetclinic-premium  
**Platforms:** React Native, Flutter  
**Modules:** Login, Appointments  
**Routing:** Stack Navigator / GoRouter  
**Theme:** vetclinic-blue  
**Trace ID:** proj-811-v2

✅ Summary¶

All outputs are:
🧱 Modular (screen/service/component)
📄 Documented (README + overview)
🧪 Testable
🧾 Traceable
Generated structure is ready for review, CI/CD, white-labeling, or further AI-led iteration

🧠 Memory and Long-Term Context¶

This cycle defines how the Mobile Developer Agent leverages short-term session memory and long-term semantic memory to:

Reuse layout and component patterns
Maintain design consistency across modules
Recognize prior feature implementations
Avoid redundant output
Guide regeneration and safe overwrites

🧱 Memory Architecture¶

Layer	Purpose	Backed By
Session Memory	Tracks generated screens, bindings, assets during current run	Semantic Kernel context memory
Long-Term Memory	Stores past module layouts, reusable widgets, DTOs, state logic, edition overrides	Vector store via MCP or Agent Index
Edition Overlay Memory	Maps tenant + edition → theming rules, UI restrictions, localization flags	File-backed YAML memory + embedding index
Navigation Memory	Persists flow trees, backstack behaviors, and nested routing per platform	SK memory or persisted `flow.yaml` per project

🔄 Reuse Scenarios¶

Context	Reuse Strategy
`LoginScreen` regenerated in another edition	Clone layout and wiring, apply theme override only
`appointmentsService.dart` matches OpenAPI signature from prior project	Recall method implementation and DTO structure
`Theme.vetclinic-blue` used in 3 editions	Use pre-indexed `Colors`, `Fonts`, `LogoAssets` from memory
`DashboardScreen` generated again	Avoid duplication, add new widgets or tabs incrementally

📘 Sample Memory Recall (Flutter)¶

{
  "screenId": "LoginScreen",
  "platform": "flutter",
  "previousTraceId": "proj-775-v3",
  "matchedVersion": "login.dart",
  "confidence": 0.97,
  "canReuse": true,
  "themeVariant": "vetclinic-blue"
}

→ Agent reuses layout and simply injects new test IDs and branding.

🧠 Semantic Memory Patterns¶

Stored by:
screenId, platform, tenantId, editionId, traceId
Indexed using:
Embedding of layout structure (e.g., vertical form, 2-column grid)
Widget types used (Dropdown, TabBar, Carousel)
API method name + signature hash

🔐 Memory Scope Constraints¶

Rule	Behavior
Tenant-Isolated Recall	Reuse only anonymized patterns unless same `tenantId`
Edition Isolation	Memory tags `editionId` to restrict reuse of B2B vs B2C variants
Field Type Drift Detection	If backend schema changed (e.g., `string → enum`), memory recall is invalidated for affected bindings

🔁 Regeneration Memory¶

When regenerating part of an app (e.g., after backend API change):

Agent consults mobile-trace.json from prior run
Loads last flow.yaml + component structure
Rewrites only affected screen/service, marks others as preserved: true
Reports delta in mobile-overview.md

🧠 Memory-Based Optimizations¶

Optimization	Effect
Layout cache	Faster generation, less duplication
DTO match recall	Aligns client ↔ server models from past audits
State/route trees	Consistent flow logic across modules
Edition theme variants	Branded without full regeneration

✅ Summary¶

The Mobile Developer Agent uses memory to:

🔁 Safely regenerate features
🧠 Recall known layouts and services
🎨 Respect edition branding
🧾 Enable continuous modular generation

All memory access is scoped, traceable, and tenant-compliant, making the agent capable of adaptive, reusable mobile software delivery.

✅ Validation Strategy¶

Validation ensures that the Mobile Developer Agent produces reliable, idiomatic, and compliant codebases across MAUI, Flutter, and React Native. This process catches structural issues, incorrect bindings, platform mismatches, and missing test instrumentation before output is committed or released.

🔍 Validation Categories¶

Category	What’s Validated
🧱 Layout Structure	Presence of root widgets (`Scaffold`, `StackLayout`, `SafeArea`), correct nesting, platform compatibility.
🔌 API Bindings	Method signatures match OpenAPI/GraphQL contract; DTOs are valid; endpoints are fully covered.
🧭 Navigation Graph	Route IDs are unique, screens are reachable, back stacks are valid, redirects are defined.
🧠 State Management	ViewModels, Redux slices, Riverpod providers must match UI expectations and support testability.
🎨 Theming Application	Theme applied consistently, fallback exists, tenant assets are referenced.
🧪 Test Instrumentation	`testId` exists per widget, screen ID traceable, minimum number of test files included.
🔐 Authentication UX	Login flows are present, navigation guard exists, biometric toggle resolves to platform default.
📈 Telemetry Hooks	All service calls and user interaction entry points emit OTEL spans or crash capture.

{
  "screenId": "ProfileScreen",
  "navigation": {
    "entryPoint": true,
    "linkedScreens": ["SettingsScreen", "EditProfileScreen"]
  },
  "errors": [],
  "warnings": ["SettingsScreen has no declared back route"]
}

📏 Thresholds and Limits¶

Check	Threshold
`screen coverage`	≥ 90% of screens in `ui-flow.yaml` must be implemented
`route conflicts`	0 duplicate route IDs allowed
`test hook coverage`	≥ 80% of screens must include `testId` or equivalent
`DTO field match`	100% of required fields must match OpenAPI
`theme variance fallback`	Each color/font must resolve with fallback for default tenant

📘 Sample Lint Report (React Native)¶

{
  "screen": "LoginScreen",
  "errors": [],
  "warnings": [
    "Missing testId on PasswordInputField",
    "Missing OTEL span on onLoginPressed handler"
  ],
  "validated": true
}

🧠 Validation Feedback Loop¶

All validation findings are aggregated into:
validation-report.json
mobile-overview.md → includes a validation score (e.g., ✅ 92% passed)
Blocking errors halt generation and emit MobileValidationFailed
Warnings are included as metadata or optional feedback to Studio or HumanOps

🔄 Correction Path on Failure¶

If errors are encountered:

Attempt auto-correction via RetryPlannerSkill
Emit findings into human-review.md
Mark output as status: partial
Optionally, tag agent as retryRequired: true

🔍 Developer-Facing Artifact: `validation-report.json`¶

{
  "platform": "flutter",
  "traceId": "proj-811-v2",
  "screenCoverage": 93,
  "routeCheck": "pass",
  "testHookCoverage": 84,
  "severity": "minor",
  "status": "validated"
}

✅ Summary¶

The Mobile Developer Agent enforces:

📐 Layout + navigation correctness
🔌 Contract-bound service generation
🧪 Test coverage + instrumentation
🔐 Secure auth flow
📈 OTEL observability

Validation ensures mobile outputs are safe, testable, CI-ready, and production-aligned — across all supported platforms.

🔄 Retry & Correction Flow¶

The Retry & Correction Flow ensures the Mobile Developer Agent can automatically:

Detect invalid or incomplete generation results
Perform partial regeneration
Suggest or apply safe corrections
Escalate unresolved issues for human review

This is critical to support CI/CD pipelines, modular feature drops, and platform-specific drift handling.

🔁 Retry Triggers¶

Condition	Action
Validation failure (blocking)	Retry generation with alternate layout or corrected API binding
Missing or invalid navigation link	Retry navigation scaffold generation
Test hook missing or invalid	Regenerate screen with `testId` injected
Platform-specific incompatibility (e.g., MAUI binding error)	Fallback to alternate layout structure (e.g., StackLayout → Grid)
DTO mismatch with OpenAPI	Regenerate models and service bindings
Conflict in edition theming	Retry asset injection and fallback to default theme
Human review required	Pause and emit `human-review.md` with retry instructions

🧠 Retry Loop Logic¶

flowchart TD
    START["Validation Failed"]
    DETECT["Analyze Error Type"]
    RETRYABLE{Is Retry Safe?}
    PLAN["Auto-Correct or Refactor"]
    RETRY["Rerun Skills"]
    ESCALATE["Emit Human Review Trigger"]
    FINISH["Validate Again"]

    START --> DETECT --> RETRYABLE
    RETRYABLE -- Yes --> PLAN --> RETRY --> FINISH
    RETRYABLE -- No --> ESCALATE

Hold "Alt" / "Option" to enable pan & zoom

🧱 Correction Strategies¶

Issue	Correction
Missing `testId`	Inject default `testId` based on `screenId_widgetType`
DTO mismatch	Parse updated OpenAPI schema → regenerate model
Navigation gap	Insert fallback route (e.g., redirect to Dashboard)
Missing theming asset	Use default splash/icon/logo
Platform binding error	Replace unsupported component with platform-safe equivalent
Validation warnings	Include in output, flag as non-blocking, notify QA/UX agents

📘 Retry Metadata (`retry-report.json`)¶

{
  "traceId": "proj-811-v2",
  "platform": "maui",
  "attempts": 1,
  "retryPlan": "Regenerate LoginScreen with alternate layout stack",
  "retryOutcome": "success",
  "resolvedErrors": ["Missing Navigation Route"]
}

🔎 Partial Output and Safe Regeneration¶

If only one screen or module fails:

Output is still emitted for other valid modules
Problem area is isolated in retry-report.json
Affected screen(s) marked in mobile-overview.md with status: retryPending

📢 Escalation Events¶

Event	Triggered When
`MobileGenerationFailed`	Agent cannot recover from a generation error
`MobileRetryAttempted`	Retry logic initiated for one or more modules
`MobileRetrySucceeded`	Partial or full resolution after auto-correction
`MobileHumanReviewRequired`	Retry unsafe or inconclusive — needs manual intervention

🧠 Retry Skill Involvement¶

RetryPlannerSkill — Plans safest and smallest unit of regeneration
RegenerateScreenLayoutSkill — Regenerates layout only
PatchNavigationSkill — Rewrites route map without full screen regen
InjectFallbackAssetsSkill — Fallback for missing theming or icons

✅ Summary¶

The Mobile Developer Agent supports automated retry and correction with:

🔄 Partial regeneration
🔧 Platform-specific fix plans
📦 Safe file output retention
🧾 Retry traceability and audit metadata

This ensures robustness, modularity, and developer-friendly regeneration within mobile delivery pipelines.

🤝 Multi-Agent Collaboration¶

The Mobile Developer Agent operates within the Engineering Agent Cluster and interacts with adjacent agents to:

Receive backend contracts, UI flows, and edition overlays
Emit traceable mobile artifacts and testable modules
Enable continuous delivery via DevOps, QA, and HumanOps agents

🧩 Primary Agent Collaborations¶

Agent	Role	Interaction
Backend Developer Agent	📡 API Provider	Supplies OpenAPI/GraphQL specs, DTOs, and service logic
Frontend Developer Agent	🎨 Design Bridge	Ensures mobile UI stays consistent with web/desktop UX
UX Designer Agent	🖼️ Layout Source	Provides `ui-flow.yaml`, screen designs, navigation trees
QA Agent	🧪 Test Generator	Accepts test hooks, screen IDs, and emits e2e plans
DevOps Agent	🚀 Mobile CI/CD	Integrates mobile output into pipelines for signing, build, release
Edition Coordinator Agent	🎭 Branding Manager	Provides tenant/edition-specific assets, themes, icon sets
Security Architect Agent	🔐 Auth Flow Verifier	Confirms biometric auth, secure storage, session management
Observability Agent	📈 Telemetry Router	Adds OpenTelemetry spans, crash hooks, and error tracking to mobile flows
HumanOps Agent	🧑‍💻 Review Escalation	Receives `human-review.md` files for screens requiring feedback or override decisions

🔁 Collaboration Workflow (Simplified)¶

sequenceDiagram
    participant UX as UX Designer Agent
    participant BE as Backend Dev Agent
    participant MDA as 📱 Mobile Developer Agent
    participant QA as QA Agent
    participant CI as DevOps Agent
    participant OBS as Observability Agent
    participant HUMAN as HumanOps Agent

    UX->>MDA: ui-flow.yaml
    BE->>MDA: openapi.yaml, dto.yaml
    MDA->>QA: testIds, screen hooks
    MDA->>CI: /flutter-app/, /maui-app/
    MDA->>OBS: span instrumentation
    MDA->>HUMAN: human-review.md (if needed)

Hold "Alt" / "Option" to enable pan & zoom

📤 Emitted Collaboration Artifacts¶

Output	Shared With
`mobile-output/` (codebase)	DevOps, QA, Studio
`mobile-overview.md`	Studio UI, QA, HumanOps
`mobile-trace.json`	Orchestrator, CI/CD
`validation-report.json`	QA, HumanOps
`retry-report.json`	HumanOps, DevOps
`testMetadata.json`	QA Agent
`theme-preview.png` (optional)	Edition Coordinator Agent, UX Agent

From	What is Imported
Backend Agent	OpenAPI, DTOs, enums, error responses
UX Agent	Screen flows, layout hints, transitions
QA Agent	Required test tags, priority modules
Security Agent	Consent requirements, secure storage rules
Edition Agent	App ID suffixes, splash screen timing, brand color rules

🧑‍💻 Developer-Friendly Coordination Hooks¶

If manualReview: true or confidence < threshold:

MobileDeveloperAgent emits:
human-review.md (developer notes)
mobile-diff-report.md (when updating module)
proposed-patch.json (suggested changes)

These are routed to HumanOps, QA, or Studio preview UI.

📘 Example: `mobile-diff-report.md`¶

# Mobile Agent Delta Report

## Affected Modules:
- Appointments
- LoginScreen

## Changes:
- Added biometric option to LoginScreen
- Regenerated appointments DTO after OpenAPI change
- Updated route: `/appointments/details/:id` → `/appointments/:id`

## Actions Required:
- Human review of LoginScreen testId rewrite

✅ Summary¶

The Mobile Developer Agent collaborates with:

🧠 Upstream design & API agents
🧪 QA for test alignment
🚀 CI/CD for release
🧑‍💻 HumanOps for reviews

All outputs are artifactized, traceable, and studio-visualizable, enabling AI-first + human-aligned mobile software delivery.

🔀 Cross-Platform UI Logic Mapping¶

This cycle defines how the Mobile Developer Agent transforms platform-agnostic UI flows into native experiences across:

✅ .NET MAUI (XAML + C#)
✅ Flutter (Dart)
✅ React Native (TypeScript)

It ensures that UI behavior, state management, navigation, and component structure are preserved across platforms, while embracing native conventions.

🧠 Unified UI Flow Model¶

At the core, the agent consumes a normalized screen flow tree like this:

screens:
  - id: LoginScreen
    type: form
    fields: [email, password]
    actions:
      - id: login
        target: DashboardScreen
  - id: DashboardScreen
    type: tabbed
    tabs: [Appointments, Profile]

→ The agent transforms this into idiomatic UI logic per platform.

🎯 Mapping Strategy by Layer¶

Layer	Cross-Platform Intent	MAUI	Flutter	React Native
Layout	Form, tabs, lists	`StackLayout`, `TabBar`, `CollectionView`	`Column`, `TabBar`, `ListView`	`View`, `Tab.Navigator`, `FlatList`
Routing	Declarative navigation	`Shell.RegisterRoute()`	`GoRouter` / `AutoRoute`	`@react-navigation/native-stack`
Screen lifecycle	`onLoad`, `onTap`, `onFormSubmit`	`OnAppearing`, event handlers	`initState`, `onTap`, `onPressed`	`useEffect`, `onPress`, hooks
State management	ViewModel / Controller	`ObservableObject` via MVVM Toolkit	`NotifierProvider`, `BlocBuilder`	`Redux slice`, `useReducer`, Context API
Binding	2-way or action-bound	`{Binding Email}` + Commands	`TextEditingController` or `ref.watch()`	`useState`, props, `dispatch()`
Theming	Fonts, colors, spacing	`ResourceDictionary` in `Styles.xaml`	`ThemeData`, `ColorScheme`	`ThemeProvider`, `StyleSheet.create()`

🔁 Reusable Cross-Platform UI Concepts¶

Concept	Description
Screen ID	Same identifier across all stacks (used for testing, telemetry)
Navigation Graph	Central `flow.yaml` used to emit platform-specific route maps
Test Hooks	`testId` / `accessibilityLabel` embedded in each screen
API Events	Trigger logic mapped to ViewModel (MAUI), `StateNotifier` (Flutter), `Thunk` or `Saga` (RN)
Async States	`isLoading`, `errorMessage`, `successCallback` — aligned naming and behavior
Validation Rules	Field-level validation (e.g., required, format) injected into all platforms

state:
  fields:
    email: string
    password: string
  events:
    onSubmit:
      request: POST /login
      onSuccess: navigate to Dashboard
      onError: show message

Output Examples¶

.NET MAUI: LoginViewModel.cs → Command with IsBusy + LoginResult
Flutter: LoginStateNotifier.dart → AsyncValue<LoginResult>
React Native: loginSlice.ts → loginAsyncThunk + reducer states

📘 Component Mapping Table¶

Logical Widget	MAUI	Flutter	React Native
`TextInput`	`Entry`	`TextField`	`TextInput`
`Button`	`Button`	`ElevatedButton`	`TouchableOpacity`
`Form`	`StackLayout`	`Form` widget	`View` + `onSubmit`
`TabBar`	`Shell Tabs`	`BottomNavigationBar`	`Tab.Navigator`
`ListView`	`CollectionView`	`ListView`	`FlatList`

🧪 Testing Alignment¶

Test ID naming scheme: screenId_elementName
Generated test stubs are mapped to same user journey across platforms
Screen transitions are recorded consistently for UI test automation

✅ Summary¶

The Mobile Developer Agent maps:

🧠 Unified UI flow → idiomatic native layouts
🎛️ State flows → platform-native controllers/viewmodels
🔁 Navigation → native router stack per SDK
🧪 Tests → aligned per screen, per platform

This ensures design parity, logic consistency, and native fidelity across all ConnectSoft-supported mobile platforms.

🧩 Platform-Specific Hooks & Overrides¶

The Mobile Developer Agent supports deep platform customization by allowing generation of platform-specific hooks, overrides, and extensions. This ensures:

Native UX fidelity
Access to device capabilities
Support for SDK-level nuances
Integration with platform-dependent libraries and plugins

🔧 Supported Overrides per Platform¶

Area	.NET MAUI	Flutter	React Native
Native APIs	`DependencyService` or platform folders (`Platforms/Android`)	Platform channels via `MethodChannel`	Native modules via Swift/Java bridge or `react-native-*` plugins
Biometrics	`IBiometricService` interface + platform impl	`local_auth` plugin	`expo-local-authentication`, `react-native-touch-id`
Camera/Media	`MediaPicker` via Essentials	`image_picker`, `camera` plugins	`expo-camera`, `react-native-camera`
Push Notifications	`FirebasePushNotificationManager` or Azure Notification Hubs	`firebase_messaging`	`react-native-push-notification`, `expo-notifications`
Secure Storage	`SecureStorage.Default`	`flutter_secure_storage`	`expo-secure-store`, `react-native-encrypted-storage`
App Lifecycle	`OnStart()`, `OnSleep()`	`WidgetsBindingObserver`	`AppState` module
Custom Transitions	`Shell` navigation overrides	`PageRouteBuilder`, `Hero`	`TransitionPresets`, `react-navigation-shared-element`

📘 Example: Injecting a Custom Plugin (Flutter)¶

platformOverrides:
  flutter:
    dependencies:
      - name: camera
        version: ^0.10.0
    imports:
      - path: lib/plugins/camera_integration.dart

→ Agent modifies pubspec.yaml and emits platform-specific widget wrappers.

🛠️ Platform Extension Points¶

Hook Type	Used For	Target Location
`NativeBridge`	Injecting Swift/Kotlin/Java interop	`Platforms/*` or `android/app`
`PlatformSpecificComponent`	Per-platform widget swap (e.g., `CupertinoButton` vs `MaterialButton`)	Abstracted in UI layer
`PostBuildScript`	Adding platform settings (e.g., `AndroidManifest.xml`, `Info.plist`)	CI/CD / `/scripts/postbuild`
`PermissionsInjector`	Camera, GPS, biometrics	Agent inserts correct permissions into manifest or plist

🎛️ Tenant or Edition-Based Overrides¶

Some platform hooks are scoped to tenant or edition, for example:

editionOverrides:
  vetclinic-blue:
    platform: react-native
    overrides:
      - splashScreen: blue_splash.png
      - biometricPromptText: "Use Face ID to log in"

→ Affects asset injection, string localization, and prompt handling logic.

🔁 Fallback Handling¶

If a plugin is unavailable or fails compatibility validation:

Agent emits fallback UI or empty stub with TODO
Studio preview shows error reason + suggested manual fix
Logs reason in mobile-overview.md and validation-report.json

🧠 Platform-Specific Skill Extensions¶

Skill	Extended Behavior
`InjectThemeAndAssetsSkill`	Emits platform-specific `colors.ts`, `styles.xml`, `app_theme.dart`
`BindApiServiceSkill`	Chooses idiomatic HTTP library per stack (e.g., `dio` vs `axios`)
`EmitMobileProjectSkill`	Structures output with platform-expected file/folder layout and config files

📄 Output Examples¶

MainActivity.cs, AppDelegate.cs → with camera, biometric handlers
app.json or Info.plist → with permission overrides
native-bridges/ → directory to host custom Swift/Kotlin code when needed

✅ Summary¶

The Mobile Developer Agent supports:

⚙️ Native plugins, APIs, and secure modules
🎭 Edition-specific override injection
📲 Platform-native look, feel, and device access
🔁 Safe fallback with Studio preview and validation reports

These platform hooks ensure the agent can generate production-grade, device-native, and differentiated mobile experiences across all supported stacks.

🚀 CI/CD and Mobile Build Pipeline¶

This cycle defines how the Mobile Developer Agent integrates with CI/CD systems to enable:

Automated builds for Flutter, .NET MAUI, and React Native
Edition-specific app packaging and signing
White-label app delivery and store-readiness
Artifact publishing and telemetry wiring

🏗️ Supported CI/CD Providers¶

CI Provider	Platform Support	Tools
Azure Pipelines	All platforms (.NET MAUI, Flutter, React Native)	Hosted agents, secure signing, build matrix
GitHub Actions	Full cross-platform support	`flutter-action`, `react-native-builder`, `dotnet build`, Fastlane
Bitrise	Mobile-first; supports Flutter & RN	Predefined workflows, certificate handling
Codemagic	Flutter-specialized	Build, test, distribute workflows
Expo EAS	React Native (Expo)	OTA updates, build for app stores
App Center (deprecated)	Legacy Xamarin/Mobile apps	Used only for backward compatibility (optional)

🧱 Agent-Generated CI Artifacts¶

Artifact	Description
`azure-pipelines.yml`	For use with Azure DevOps; supports parallel builds for Android/iOS
`.github/workflows/mobile.yml`	GitHub Actions-ready pipeline with platform matrix
`build-config.json`	Platform-specific build targets, signing details, versioning
`app-release.aab` / `.ipa` / `.apk`	Release artifacts per platform, trace-tagged
`signing-instructions.md`	Human-readable signing and provisioning summary for store upload
`ci-status.json`	Summary of build success/failure, app version, and traceId for Orchestrator

⚙️ Example: GitHub Actions Workflow (`mobile.yml`)¶

name: Mobile CI

on:
  push:
    branches: [main]

jobs:
  build:
    strategy:
      matrix:
        platform: [flutter, react-native]
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup ${{ matrix.platform }}
        uses: mobile-actions/setup-${{ matrix.platform }}
      - run: npm install / flutter pub get
      - run: npm run build / flutter build apk

🔐 Signing and Provisioning¶

Platform	Signing
Android	`.keystore`, `key.properties`, `gradle.properties` – injected at build time
iOS	`.p12`, `.mobileprovision`, Apple certificates – handled via secure CI environment variables
Flutter	Same as native iOS/Android, supports flavors
Expo EAS	Managed via EAS dashboard or `eas.json` config
MAUI	`.pfx` and project signing profiles (`csproj`, `Directory.Build.props`)

🧪 CI Test Execution¶

Triggers:
flutter test, jest, xUnit, MAUI.UITest
CI stages include:
✅ Unit + widget tests
🧪 E2E smoke tests
🛑 Linting + formatting
📈 Upload test coverage

📦 Artifact Publishing¶

Artifact	Destination
`.apk`, `.aab`, `.ipa`	GitHub/Azure Artifacts, S3, App Store/Play Console (manual or auto via Fastlane)
`mobile-overview.md`	Attach to release or PR summary
`ci-status.json`	Ingested by Orchestrator for downstream decisioning

📘 Signing Instructions Example (Markdown)¶

# Signing Summary

- Platform: iOS
- App: vetclinic-premium (React Native)
- Provisioning Profile: vetclinic_production.mobileprovision
- Certificate: Apple Distribution (p12)
- Bundle ID: com.connectsoft.vetclinic

To sign and upload:
1. Decode `base64` secrets
2. Run `fastlane ios release`

🧩 CI-Aware Agent Hooks¶

ciStatus: passed/failed
signedBuildReady: true
retryPipelineAllowed: true
linkedTraceId: traceId from mobile output

✅ Summary¶

The Mobile Developer Agent supports:

🔁 Build pipelines for MAUI, Flutter, React Native
🔐 Secure signing and provisioning workflows
🚀 Release artifact emission and store delivery
📡 CI traceability via GitHub, Azure, Bitrise, Codemagic
📈 Test + telemetry alignment with observability goals

All generated mobile projects are CI/CD ready by default, ensuring seamless delivery across editions and environments.

📈 Analytics, Logs, and Observability¶

The Mobile Developer Agent embeds observability-first design into all generated mobile applications, ensuring that every screen, user interaction, and backend call can be traced, analyzed, and monitored across:

✅ .NET MAUI
✅ Flutter
✅ React Native

It integrates with OpenTelemetry, analytics platforms (e.g., App Insights, Firebase, Amplitude), and CI/CD trace systems.

🎯 Observability Goals¶

Goal	Implementation
User journey tracking	Emit spans per screen transition, tab change, or key button action
API instrumentation	Trace each HTTP call with latency, failure, auth state
Crash capture	Hook into native error boundaries with stack trace upload
Edition-specific metrics	Tag every event with `tenantId`, `editionId`, `traceId`
Studio visibility	Pipe metrics into dashboards for Studio QA, UX, and Ops review

📡 Telemetry & Logging Components¶

Component	MAUI	Flutter	React Native
Telemetry SDK	`OpenTelemetry.Instrumentation.Http`, `ApplicationInsightsLogger`	`otel_dart`, `firebase_analytics`, `sentry_flutter`	`@opentelemetry/api`, `expo-analytics`, `Sentry`
Crash Reporting	`AppDomain.CurrentDomain.UnhandledException`	`FlutterError.onError`, `runZonedGuarded`	`ErrorBoundary`, `Sentry`, `LogBox`
UI Events	`TrackEvent()` in ViewModel	`analytics.logEvent()`	`analytics.track()` or Redux middleware
Navigation Tracing	Route hooks in `Shell`, `GoRouter`, or `@react-navigation/native`
User Property Tags	`UserId`, `Edition`, `Platform`, `BuildType` added to all events

sequenceDiagram
    participant User
    participant App
    participant Telemetry
    participant Backend

    User->>App: Tap "Login"
    App->>Telemetry: Span "login_button_pressed"
    App->>Backend: POST /login
    Backend-->>App: 200 OK
    App->>Telemetry: Span "login_success" + duration + metadata

Hold "Alt" / "Option" to enable pan & zoom

📘 `telemetry-config.json` (Example Output)¶

{
  "traceId": "proj-811-v2",
  "tenantId": "vetclinic-premium",
  "editionId": "vetclinic-blue",
  "sessionId": "sess-0214",
  "platform": "flutter",
  "analyticsEnabled": true,
  "otelExport": "https://telemetry.connectsoft.io/collector"
}

📊 Default Traced Events¶

Event Name	Trigger
`screen_view:<screenId>`	On screen entry
`button_click:<actionId>`	On primary UI action
`api_call:<method>`	On service binding
`login_success`	On auth grant
`error_reported`	On exception
`edition_loaded`	On theming completed

🧠 Observability Hooks in Skills¶

Skill	Telemetry
`DecorateWithTelemetrySkill`	Injects spans into layout + service call sites
`GenerateStateLayerSkill`	Adds logging to ViewModel actions or Redux thunks
`EmitMobileProjectSkill`	Outputs `telemetry-config.json` and bootstraps `initializeTelemetry()` method
`ValidationSkill`	Ensures observability coverage (e.g., 90% of screens traced)

🧾 CI-Aware Logging Hooks¶

Logs emitted to:
logs/telemetry-summary.json
CI status checks (e.g., trace coverage %, spans/screen, failures)
Uploads to:
Azure Monitor, Datadog, Sentry, AppInsights, Firebase Crashlytics

📋 Summary Table¶

Metric	Default Target
`screen_trace_coverage`	≥ 90% of screens traced
`api_trace_coverage`	100% of generated API methods instrumented
`error_boundary_present`	✅ Per platform
`analytics_tag_completeness`	`tenantId`, `editionId`, `platform`, `traceId` required

✅ Summary¶

The Mobile Developer Agent:

📈 Emits OpenTelemetry spans
🧠 Embeds analytics + crash reporting
🎯 Tags every event with tenant/edition context
📊 Supports Studio dashboards and CI/CD trace pipelines

Observability is baked into every module, making the mobile experience debuggable, monitorable, and compliance-ready out-of-the-box.

🎨 Edition/Brand Customization¶

This cycle details how the Mobile Developer Agent supports multi-tenant, white-label, and edition-specific mobile app customization — across branding, layout, theme, feature flags, and app identity.

It enables the ConnectSoft AI Software Factory to generate distinct mobile apps per edition, with traceable theming and modular overrides.

🎭 Edition-Aware Customization Capabilities¶

Customization Layer	Scope
Branding	App name, splash screen, icons, colors, font, onboarding screen
Theme Styling	Primary/secondary colors, typography, button styling, spacing
Feature Flags	Enable/disable flows: e.g., `enableAppointments`, `enableMarketingScreen`
Routing Overrides	Alter screen order, remove screens, add intro carousel
Tenant Metadata	`tenantId`, `region`, `editionId`, white-label ID — used in telemetry + API requests
Localization Variants	Locale-specific edition overlays: `en-US`, `fr-CA`, `ar-SA`, etc.
Legal Text / Policy Links	Unique privacy URLs, GDPR acceptance per region or edition

🗂️ `edition-config.yaml` Example¶

editionId: vetclinic-blue
tenantId: vetclinic-premium
appDisplayName: VetClinic App
branding:
  icon: assets/vetclinic/icon.png
  splash: assets/vetclinic/splash.png
  primaryColor: "#123456"
  font: "Nunito"
themeOverrides:
  buttonShape: rounded
  inputStyle: outline
features:
  enableAppointments: true
  enableChat: false
  showOnboardingCarousel: true
locale: en-US
privacyPolicyUrl: https://vetclinic.com/legal/privacy

🎨 Platform Output Examples¶

🟣 .NET MAUI¶

AppShell.xaml uses StaticResource PrimaryColor, FontFamily
Assets/ replaced with edition-specific icon and splash
Themes/Styles.xaml reflects edition color palette

🔵 Flutter¶

ThemeData injected in main.dart with edition keys
app_theme.dart generated from theme mapping
assets/edition/ copied into Flutter pubspec.yaml

🟢 React Native¶

colors.ts + fonts.ts override via generated edition file
App.tsx pulls in editionConfig.json
assets/edition/ folder mapped in metro.config.js

📄 Telemetry + Build Metadata¶

Every app includes:

{
  "editionId": "vetclinic-blue",
  "tenantId": "vetclinic-premium",
  "buildType": "release",
  "platform": "flutter",
  "traceId": "proj-811-v2"
}

→ Used in analytics, crash reports, API requests.

🎛️ White-Label Support Scenarios¶

Scenario	Customization
B2B with unique logo + domain	Theme, routing, splash, app name
B2C multi-locale	Language packs, RTL support, onboarding variants
Region-restricted app	Storage zones, tenant API URL, legal notice
Feature-licensed app	Disable advanced modules like chat or analytics

🧠 Skills Involved¶

Skill	Role
`InjectThemeAndAssetsSkill`	Applies edition styling and resources
`RouteFlowModifierSkill`	Adjusts screen order per edition config
`LocalizeStringsSkill`	Applies localized strings per edition+locale
`BrandingOverlayPlannerSkill`	Combines tenant + edition config to final runtime behavior

📘 Output File: `edition-profile.json`¶

{
  "edition": "vetclinic-blue",
  "region": "EU",
  "featureFlags": {
    "enableAppointments": true,
    "enableChat": false
  },
  "brandingApplied": true,
  "themeValidated": true
}

✅ Summary¶

The Mobile Developer Agent supports:

🎨 Branded output per edition
🧩 Modular overrides across UI, theme, navigation
📦 White-label, region-based, or localized variants
📈 Edition-aware analytics, telemetry, and feature gating

This empowers ConnectSoft to generate fully distinct mobile apps for every customer or edition — with zero duplication and full automation.

🧭 Final Blueprint and Future Direction¶

This section summarizes the overall architecture, capabilities, and strategic roadmap for the Mobile Developer Agent within the ConnectSoft AI Software Factory.

The agent is now capable of end-to-end mobile app generation, across multiple stacks, brands, tenants, and editions — with observability, CI/CD, modularity, and AI-native collaboration.

🧱 Mobile Developer Agent Blueprint¶

flowchart TB
  subgraph UX & Design Input
    UX[UX Designer Agent]
    Edition[Edition Coordinator Agent]
  end

  subgraph Technical Context
    BE[Backend Developer Agent]
    SEC[Security Architect Agent]
    QA[QA Agent]
    OBS[Observability Agent]
  end

  UX --> MDA
  Edition --> MDA
  BE --> MDA
  SEC --> MDA
  QA --> MDA
  OBS --> MDA

  MDA[[📱 Mobile Developer Agent]]

  MDA --> CI[CI/CD Agent]
  MDA --> Studio[Studio UI]
  MDA --> HUMAN[HumanOps Agent]

Hold "Alt" / "Option" to enable pan & zoom

✅ Capability Summary¶

Capability	Status
.NET MAUI app generation	✅ Stable
Flutter app generation	✅ Stable
React Native app generation	✅ Stable
Edition/branding overlay	✅ Supported
API binding & DTO generation	✅ Supported
Auth + biometric flows	✅ Supported
Observability + OpenTelemetry	✅ Embedded
Retry + correction logic	✅ Smart + resumable
Human review interface	✅ Emitted + structured
Studio preview integration	✅ Planned Q2 2025

🧩 Modular Generation Layers¶

Layer	Output
UI → Layout → Routing	Screens, components, navigators
State Layer	ViewModels, Redux slices, Riverpod notifiers
API Integration	Services, interceptors, request DTOs
Tests	Unit tests, test IDs, UI hooks
Theming	Colors, fonts, icons, onboarding
Build/CI	Pipelines, signing configs, build scripts

🌍 Future Directions¶

1. Next Platform Targets¶

Stack	ETA	Notes
Expo/Expo Router	Q3 2025	Easier onboarding for React Native CI/CD
Tauri (Mobile Web)	Q4 2025	Lightweight desktop/mobile hybrid support
WASM + Blazor Mobile	2026	Leverage existing Blazor stack for offline-capable apps

2. Studio Preview Extension¶

In-studio visual preview of mobile UI flows per platform
Clickable demos (via Expo QR, WebAssembly, or iframe)

3. Dynamic Over-the-Air Modules (OTA)¶

Use modular output units for:
Feature toggles
Hotfix rollout
Edition-specific onboarding flows

4. Telemetry-Based UI Feedback Loop¶

Learn which components/screens underperform
Feed UX data back into UX Designer Agent for redesign suggestions

5. AI-First Regression & Diff Planning¶

Auto-detect diff across builds: layout, API, routes
AI suggests what to re-render or retest

📘 Blueprint Artifacts¶

Artifact	Purpose
`mobile-developer-agent.md`	Full specification for engineering, ops, and agent cluster coordination
`agent-blueprint-diagram.mmd`	Visual structure of agent dependencies
`agent-skill-catalog.json`	List of all Semantic Kernel skills, arguments, and responsibilities
`sample-edition-diff.md`	Demonstrates white-label diffing per app generation
`agent-roadmap.md`	Timeline of past and planned features across cycles

✅ Final Summary¶

The Mobile Developer Agent is:

🔧 Multi-stack capable (.NET MAUI, Flutter, React Native)
📦 Modular (screen, service, test, theme, edition)
🎨 Brandable (tenant/edition overlays)
🔁 Smart (correction + retry aware)
📈 Observable (OTEL + crash logging + analytics)
🤝 Collaborative (multi-agent orchestration)
🚀 Production-grade (CI/CD + signing + testing ready)

It empowers ConnectSoft to autonomously deliver enterprise mobile apps at scale — per feature, per tenant, per platform, and per edition.

📱 Mobile Developer Agent Specification¶

🧠 Purpose¶

🧭 Position in the Agent System¶

🧩 Position Diagram (Simplified)¶

🎯 Goals¶

🔧 Key Use Cases¶

🏗️ Clean Architecture Compliance¶

✅ Summary¶

📋 Core Responsibilities¶

🧭 Responsibility Overview¶

🔁 Modular Feature Responsibilities¶

🎨 Branding & Edition Logic¶

📱 Platform-Specific Responsibilities¶

🔂 Continuous Responsibility in Iterative Scenarios¶

🧑‍💻 Human-Aware Responsibility Handoff¶

✅ Summary¶

📥 Accepted Inputs¶

📂 Core Input Categories¶

📘 Example: ui-flow.yaml¶

📘 Example: api-spec.openapi.json¶

📘 Example: edition-config.yaml¶

🔀 Input Format Flexibility¶

🔐 Input Context Tags¶

✅ Summary¶

📤 Outputs¶

📦 Output Categories¶

📁 Output Directory Structure (Per Platform)¶

🔷 .NET MAUI (C# / XAML)¶

🔷 Flutter (Dart)¶

🔷 React Native (TypeScript/JS)¶

📘 Example: mobile-overview.md (Auto-Generated)¶

🔁 Multi-Target Emission Support¶

🧪 Output Artifacts Used By¶

✅ Summary¶

🎯 Platform Targeting Strategy¶

🧭 Target Selection Modes¶

📘 Input Prompt Example¶

🧠 Platform Selection Decision Tree¶

⚙️ Generator Strategy by Platform¶

🔁 Cross-Platform Common Code Handling¶

📱 Default Platform by Use Case (if not specified)¶

📋 Per-Tenant Platform Example¶

✅ Summary¶

🔄 Execution Flow¶

🔁 High-Level Workflow¶

🪜 Step-by-Step Breakdown¶

🧠 Agent-Initiated Events During Flow¶

🧑‍💻 Developer-Aware Step¶

🧪 Reproducibility Guarantees¶

✅ Summary¶

🧩 Skills and Kernel Functions¶

🧠 Core Kernel Skills¶

🔁 Sample Skill Chain – Login Screen (React Native)¶

📘 Example Skill Invocation: GenerateScreenLayoutSkill¶

🧠 Contextual Memory Use in Skills¶

🧪 Validation and Retry Hooks in Skills¶

📘 Example Skill Output (Test Hook Generator)¶

🛠️ Platform-Specific Skill Behavior¶

✅ Summary¶

🧰 Technology Stack and SDK Matrix¶

📱 Platform Stack Comparison¶

🔌 SDK & Library Support Matrix¶

📦 Artifact Format & Packaging¶

🔐 Identity & Security Modules¶

🌐 Internationalization (i18n)¶

🧪 Automated Testing Toolchain¶

✅ Summary¶

🧾 Prompt Input Template¶

📥 Input Format: YAML / JSON¶

🔍 Field Definitions¶

📘 UI Flow Reference (ui/ui-flow.yaml)¶

🧪 Test Metadata Example (ui-tests.json)¶

🔁 Prompt Modes¶

📎 Orchestration Options (Advanced)¶

✅ Summary¶

📦 Output Format and Layout¶

📁 Directory Structure Overview¶

📘 .NET MAUI Output Layout¶

📘 Flutter Output Layout¶

📘 React Native Output Layout¶

📘 Example: `ui-flow.yaml`¶

📘 Example: `api-spec.openapi.json`¶

📘 Example: `edition-config.yaml`¶

📘 Example: `mobile-overview.md` (Auto-Generated)¶

📘 Example Skill Invocation: `GenerateScreenLayoutSkill`¶

📘 UI Flow Reference (`ui/ui-flow.yaml`)¶

🧪 Test Metadata Example (`ui-tests.json`)¶

🔍 Developer-Facing Artifact: `validation-report.json`¶

📘 Retry Metadata (`retry-report.json`)¶

📘 Example: `mobile-diff-report.md`¶

⚙️ Example: GitHub Actions Workflow (`mobile.yml`)¶