maui-devflow

name

maui-devflow

description

Use when working on a visual .NET MAUI change, layout bug, styling issue, screenshot comparison, simulator workflow, UI interaction flow, DevFlow setup, AutomationId wiring, or any request to give the agent eyes with a running MAUI app through the DevFlow MCP server. Use even if the user says visual MAUI feature, screenshot, Mac Catalyst, iOS simulator, tree inspection, tap the app, or MCP server.

MAUI DevFlow Skill

Use this skill whenever a task benefits from inspecting a running .NET MAUI UI instead of reasoning from XAML alone.

This repository already includes:

• Microsoft.Maui.DevFlow.Agent in src/SoundTouch.Maui/SoundTouchMaui.csproj
• a repo-local Microsoft.Maui.Cli tool manifest in dotnet-tools.json
• an .mcp.json entry named maui-devflow

Use this skill for

• Visual regressions, spacing/alignment issues, or theme/styling bugs
• Screenshot-based verification of a UI change
• Navigating, tapping, filling, or querying a running app
• Inspecting the visual tree before changing XAML or view-model code
• Adding or maintaining stable AutomationId values on interactive controls

Default workflow

1. Run dotnet tool restore.

2. Start the app in DEBUG. Prefer Mac Catalyst locally:

   dotnet build src/SoundTouch.Maui/SoundTouchMaui.csproj -f net10.0-maccatalyst /p:_RequireCodeSigning=false
   open src/SoundTouch.Maui/bin/Debug/net10.0-maccatalyst/maccatalyst-arm64/SoundTouchMaui.app
   

   Or use the iOS simulator:

   dotnet build src/SoundTouch.Maui/SoundTouchMaui.csproj -f net10.0-ios -p:RuntimeIdentifier=iossimulator-arm64
   xcrun simctl install booted src/SoundTouch.Maui/bin/Debug/net10.0-ios/iossimulator-arm64/SoundTouchMaui.app
   xcrun simctl launch booted com.stenbrinke.aftertouchmobile
   

3. Confirm the running agent is visible:

   dotnet maui devflow list
   

4. Start the DevFlow MCP server:

   dotnet maui devflow mcp
   

5. Use DevFlow tree, query, screenshot, and interaction tools before and after the change.

6. When adding a new interactive UI element, assign a stable AutomationId.

Key rules

• DevFlow is wired only in DEBUG builds via AddMauiDevFlowAgent().
• Prefer live inspection over guessing whenever a local app or simulator is available.
• For repeated list items, prefer CSS queries and tree inspection; use AutomationId for stable controls such as buttons, entries, sliders, and toolbar actions.
• If the environment cannot run a local MAUI app or simulator, fall back to static code analysis and clearly state that live DevFlow inspection is unavailable there.
• Start with the main app project at src/SoundTouch.Maui/SoundTouchMaui.csproj.