jonathanpeppers Vibe Visual Tree Skill
This skill retrieves the complete WPF visual tree as JSON, showing all UI elements, their types, names, and hierarchy.
When to Use
Use this skill when:
- Inspecting the structure of the WPF UI
- Finding element names for automation or testing
- Debugging layout or control hierarchy issues
- Understanding how controls are nested
- Verifying that elements exist in the visual tree
Prerequisites
The WPF application must be running with the VibeServer extension. Start it with:
cd MyWpfApp
dotnet watch run
Usage
Run the script from the repository root:
.\.github\skills\vibe-tree\get-tree.ps1
Output
Returns a JSON representation of the visual tree with:
- Element type (e.g.,
Button,TextBlock,Grid) - Element name (x:Name attribute)
- Child elements (nested hierarchy)
Example output:
{
"Type": "MainWindow",
"Name": "mainWindow",
"Children": [
{
"Type": "Grid",
"Name": "rootGrid",
"Children": [...]
}
]
}
Workflow Integration
Use this skill alongside vibe-screenshot to:
- Capture a screenshot to see the visual appearance
- Get the tree to understand the element structure
- Make targeted XAML changes based on element names