View the WPF element hierarchy in JSON to debug layout, find element names, and understand UI structure.
Install
mkdir -p .claude/skills/tree && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/14290" && unzip -o skill.zip -d .claude/skills/tree && rm skill.zipInstalls to .claude/skills/tree
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Get the visual tree structure of the running WPF application. Use this skill when asked to inspect, debug, or understand the element hierarchy, control structure, or layout of the WPF UI.Key capabilities
- →Inspect the structure of the WPF UI
- →Find element names for automation or testing
- →Debug layout or control hierarchy issues
- →Understand how controls are nested
- →Verify that elements exist in the visual tree
How it works
This skill retrieves the complete WPF visual tree as JSON, showing all UI elements, their types, names, and hierarchy from a running WPF application.
Inputs & outputs
When to use tree
- →Debug WPF layout
- →Find control names
- →Verify UI hierarchy
- →Inspect visual tree
About this skill
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
When not to use it
- →When the WPF application is not running
- →When the WPF application is not running with the VibeServer extension
Prerequisites
Limitations
- →Requires the WPF application to be running
- →Requires the VibeServer extension to be active
- →Output is a JSON representation
How it compares
This skill provides a structured JSON output of the WPF visual tree, enabling programmatic inspection, unlike manual UI inspection tools.
Compared to similar skills
tree side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| tree (this skill) | 0 | 7mo | No flags | Intermediate |
| performance-benchmark | 3 | 4mo | No flags | Intermediate |
| component-development | 1 | 4mo | Review | Intermediate |
| try-fix | 1 | 3mo | Review | Advanced |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by jonathanpeppers
View all by jonathanpeppers →You might also like
performance-benchmark
dotnet
Generate and run ad hoc performance benchmarks to validate code changes. Use this when asked to benchmark, profile, or validate the performance impact of a code change in dotnet/runtime.
component-development
FritzAndFriends
Guidance for creating Blazor components that emulate ASP.NET Web Forms controls. Use this when implementing new components or extending existing ones in the BlazorWebFormsComponents library.
try-fix
dotnet
Attempts ONE alternative fix for a bug, tests it empirically, and reports results. ALWAYS explores a DIFFERENT approach from existing PR fixes. Use when CI or an agent needs to try independent fix alternatives. Invoke with problem description, test command, target files, and optional hints.
avalonia-viewmodels-zafiro
davila7
Optimal ViewModel and Wizard creation patterns for Avalonia using Zafiro and ReactiveUI.
syncfusion-blazor-toolkit-calendars
syncfusion
Build and customize calendar-based components in Syncfusion Blazor Toolkit. Covers Calendar, DatePicker, DateTimePicker, and TimePicker. Use when implementing date/time selection features, handling date range restriction, formatting dates, managing calendar events, validating dates, or customizing c
syncfusion-blazor-toolkit-buttons
syncfusion
Implement interactive Blazor button components with Syncfusion Toolkit. Covers SfButton, SfButtonGroup with styling and accessibility.