tomevault-io 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
Converted and distributed by TomeVault — claim your Tome and manage your conversions.