avalonia-extensions: Skill for Claude Code

Avalonia DevTools MCP

Use this skill when the task involves validating or debugging runtime UI behavior in a running Avalonia app, especially when visual inspection, tree traversal, property/style inspection, or screenshots are needed.

When to use

• "Show me the visual tree"
• "Find this control in the running app"
• "What styles/properties are applied at runtime?"
• "Take a screenshot of this panel/window"
• "Simulate click/text input and verify result"

Preconditions

1. DevTools MCP server configured in user MCP config (for VS Code in this environment):
   • ~/Library/Application Support/Code/User/mcp.json
2. Tool installed:
   • dotnet tool install --global AvaloniaUI.DeveloperTools
3. App instrumentation in target app:
   • AvaloniaUI.DiagnosticsSupport package
   • .WithDeveloperTools() or this.AttachDeveloperTools() at startup
   • Keep this instrumentation development-only (Debug), since MCP enables live inspection, mutation, and input simulation.

Standard workflow

1. attach-to-app with no id
2. If multiple/any clients returned, select one and call attach-to-app with that id
3. Inspect with:
   • tree (roots/subtree)
   • search (type/x:Name)
   • props, styles, resources
   • screenshot
4. Interact with:
   • input, action, set-prop, pseudo-class
5. detach when done

Multiple instances and parallel agents

Assume other developers or agents may be running the same Avalonia app from other worktrees. It is safe for separate agents to inspect separate instances, but each agent must select its client by process ID instead of attaching to whichever app happens to appear first.

1. When starting an app, record the new process ID and its worktree/output path. On Windows, Get-CimInstance Win32_Process can correlate a dotnet PID with its command line; the window title alone is not unique.
2. Call attach-to-app without an id only to enumerate availableClients.
3. Match the recorded PID to availableClients[].processId, then call attach-to-app with its request field id set to that exact processId value (for example, {"id": 24140}). Do not send a field named processId; that is a response field, not an attachment request field.
4. Verify the response's connectedClient.process.processId and appBaseDirectory. The latter should point into the expected worktree/output directory.
5. After attaching or switching clients, discard every cached node ID and reacquire the tree/search results. One MCP connection targets one client at a time, and a new attach invalidates nodes from the previous client.
6. If the app restarts, enumerate again: process IDs and node IDs are ephemeral.