maui-ai-debugging

What problem does it solve?

This Skill provides an end-to-end workflow for building, deploying, inspecting, and debugging .NET MAUI and MAUI Blazor Hybrid apps from the terminal, enabling an AI agent to manage the full dev loop.

Core Features & Use Cases

• Automates the MAUI build, deploy, inspect, and fix cycle for native MAUI and Blazor Hybrid apps.
• Supports visual-tree inspection, element interaction, DOM/CDP debugging for Blazor WebView, and live property editing without frequent rebuilds.
• Use cases include AI-assisted setup, rapid iteration on UI layouts, and automated verification of app behavior across iOS simulators, Android emulators, and Mac Catalyst.

Quick Start

1. Install the CLI tool and ensure it is up to date: dotnet tool install --global Redth.MauiDevFlow.CLI || dotnet tool update --global Redth.MauiDevFlow.CLI
2. Add required NuGet packages to your MAUI project: Redth.MauiDevFlow.Agent (and Redth.MauiDevFlow.Blazor for Blazor Hybrid)
3. In MauiProgram.cs, register the agent inside the DEBUG block: builder.AddMauiDevFlowAgent(); and (for Blazor) builder.AddMauiBlazorDevFlowTools()
4. Create a .mauidevflow config in your project directory to specify a port (random 9223-9899) or use an existing one
5. For Blazor Hybrid, ensure the wwwroot/index.html includes the chobitsu script tag: <script src="chobitsu.js"></script> (inserted by the package)
6. Mac Catalyst needs network entitlements (network.server) if you enable port binding
7. Android requires port forwarding with adb reverse to expose the agent/CDP port
8. Verify setup with maui-devflow MAUI status and maui-devflow cdp status