visualize-uitk-uxml

Stars1

Forks0

UpdatedJuly 8, 2026 at 01:07

Builds ASCII UI trees, phase visibility tables, and cross-UIDocument maps for Unity UI Toolkit UXML. Use when the user asks to visualize, diagram, or explain a UXML hierarchy (e.g. CommandRail, HubHud, PartyMenu), trace name hooks to C#, or compare rail vs overlay documents.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Source

miramocha

miramocha/griddungeon-design-docs

View GitHub Repository View Creator Repositories

Download

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

File Explorer

3 files

SKILL.md

readonly

name	visualize-uitk-uxml
description	Builds ASCII UI trees, phase visibility tables, and cross-UIDocument maps for Unity UI Toolkit UXML. Use when the user asks to visualize, diagram, or explain a UXML hierarchy (e.g. CommandRail, HubHud, PartyMenu), trace name hooks to C#, or compare rail vs overlay documents.

Visualize UITK UXML

When to use

User asks for a tree, diagram, map, or where is X in UXML
Planning refactors across CommandRail, HUD shells, overlays, pickers
Explaining phase / Tab / context visibility (hub vs exploration vs combat)
Handoff docs after touching Assets/UI/Screens/**/*.uxml

Complements unity-ui-toolkit.mdc (BEM + name hooks). This skill owns output format and research steps.

Output format (required sections)

Deliver in this order unless the user asks for tree only:

1. ASCII tree

Use ASCII branches from script (+--, `--, | indent) or Unicode box-drawing in chat markdown
Each line: UXML name (primary) + short role in brackets
Include control text="..." for Button / Label when static in UXML
Mark code-built hosts: ← Populate() / RailMenuFocus.CreateButton
Mark hidden by default: --hidden, display: none hosts

2. Phase / state table (when HUD is phase-driven)

3. Separate UIDocuments (when more than one `UIDocument`)

List each document, sortingOrder if known, and what is not in CommandRail.

4. Optional mermaid

Use only for multi-document or sequence flows (open Shop, Tab party menu). Follow plan-mode mermaid rules (no spaces in node IDs).

Workflow

Task Progress:
- [ ] 1. Identify root UXML path(s) under Assets/UI/
- [ ] 2. Run uxml_tree.py (or Read UXML if script unavailable)
- [ ] 3. Grep C# for name hooks and presenters
- [ ] 4. Read USS for --hidden / context BEM modifiers
- [ ] 5. Emit tree + tables; link file paths

1. Find roots

Ask	Start here
Global left rail	`Assets/UI/Screens/Shared/CommandRail.uxml`
Hub overlay / shop picker	`Assets/UI/Screens/Hub/HubHud.uxml`
Party Tab shell	`Assets/UI/Screens/Shared/PartyMenu.uxml`
Exploration	C# map hosts (`MapGridHostBuilder` + `MapView.uss`), `PartyFormationFloater.uxml`, `PartyMenu.uxml`
Combat	`Assets/UI/Screens/Combat/CombatHud.uxml`
Empty rail template	`Assets/UI/Screens/Shared/RailMenuVertical.uxml`

2. Generate tree (griddungeon-game root)

python .cursor/skills/visualize-uitk-uxml/scripts/uxml_tree.py Assets/UI/Screens/Shared/CommandRail.uxml

Multiple files:

python .cursor/skills/visualize-uitk-uxml/scripts/uxml_tree.py `
  Assets/UI/Screens/Shared/CommandRail.uxml `
  Assets/UI/Screens/Hub/HubHud.uxml `
  Assets/UI/Screens/Shared/PartyMenu.uxml

Script prints name, class, text, Style src, Instance template. It does not expand UXML templates — note <ui:Instance> as template="...".

3. Wire C# and presenters

Grep patterns:

rg 'Q<.*>\("[^"]+"\)' Assets/Scripts/UI --glob "*.cs"
rg 'CommandRail\.|UIDocument|sortingOrder' Assets/Scripts/UI
rg 'CloneTree|VisualTreeAsset' Assets/Scripts/UI

For each name="foo" queried in code, annotate tree node foo ← HubHudView.

Presenter → document map (extend as needed):

Presenter	UXML / mount
`CommandRailPresenter`	`CommandRail.uxml`
`HubHudView`	`HubHud.uxml` + clones pickers into `hub-hud`
`PartyMenuOverlayView`	`PartyMenu.uxml`; section rail = `CommandRail.PartySectionRailRoot`
`ExplorationMapCoordinator`	`ExplorationMap` GO — `MinimapPanelPresenter` + `ExpandedMapOverlayPresenter`
`CombatHudView`	`CombatHud.uxml` + cloned pickers

4. USS visibility

Read paired .uss for:

display: none + --hidden modifiers
Context selectors (e.g. command-rail--context-hub)
transition-property on rail enter (see CommandRailEnterTransition)

Annotate tree leaves with instant hide vs animated when relevant.

Rules

Separate rail from overlay — CommandRail is one UIDocument; party backdrop and shop pickers are others unless user scopes one file.
Same rail instance — Hub Tab and Exploration Tab share party-menu-nav on CommandRailPresenter.
Do not invent nodes — only UXML, cloned templates, or documented Populate() builders.
Cite paths — use repo paths like Assets/UI/Screens/Shared/CommandRail.uxml.
Proportion — small screen = tree only; architecture questions = tree + table + UIDocuments.

Canonical example

Full CommandRail walkthrough: examples.md.

Code-driven rail refactor plan: .cursor/plans/ or issue context
audit-uitk-uss-class-toggles — USS class usage, not hierarchy
Design reference: shared-menu-picker-ui.md

More from this repository

same repository

class-naming-grid-dungeon

miramocha/griddungeon-design-docs

Pick C# type suffix and assembly before creating or renaming classes. Read class-naming-patterns.md via review-config.json. Use when adding new C# types, choosing View vs Presenter vs Coordinator, splitting god classes, or renaming type suffixes in griddungeon-game.

2026-07-221

test-plan-grid-dungeon

miramocha/griddungeon-design-docs

Writes Grid Dungeon GitHub/PR test plans with consistent structure (automated Edit Mode paths, DevBootstrap manual tables, sign-off, N/A deferrals). Use when creating or updating test plans for issues, PRs, handoff, or ticket close-out.

2026-07-221

create-uitk-design-mirror

miramocha/griddungeon-design-docs

Creates or refreshes UITK design-mirror assets under Assets/UI/Editor/DesignMirror/ from production shells + placeholder fixtures. Use when the user asks to create a mock/mirror, bootstrap design mirror, add a new mirrored component, or regenerate placeholder UXML/USS for UX visual editing.

2026-07-111

sync-uitk-design-mirror

miramocha/griddungeon-design-docs

Promotes UITK design-mirror layout and USS from Assets/UI/Editor/DesignMirror/ into production bindable shells under Assets/UI/Screens/. Use when the user asks to sync design mirror, promote mirror to production, or apply UX UITK changes.

2026-07-111

pull-next-backlog-ticket

miramocha/griddungeon-design-docs

Selects the next highest-priority open item from a GitHub Project backlog (Ready then Backlog, P0→P1→P2), claims it, and starts implementation. Use when the user asks to pull the next ticket, pick up backlog work, start the top priority issue, or work from a GitHub Project board (e.g. users/OWNER/projects/N).

2026-07-111

audit-centralized-ui-services

miramocha/griddungeon-design-docs

Audits Grid Dungeon UI presenters, facades, and phase HUD wiring against centralized-ui-services.md and ICentralizedUiSurface. Auto-enables caveman mode (full) for audit output. Use when auditing a component for centralized UI service compliance, migration readiness, CloneTree embed smells, facade lifecycle vocabulary, presentation bus shells/projectors, or before/after extracting a picker/overlay to GameState.

2026-07-081

name	visualize-uitk-uxml
description	Builds ASCII UI trees, phase visibility tables, and cross-UIDocument maps for Unity UI Toolkit UXML. Use when the user asks to visualize, diagram, or explain a UXML hierarchy (e.g. CommandRail, HubHud, PartyMenu), trace name hooks to C#, or compare rail vs overlay documents.

Visualize UITK UXML

When to use

User asks for a tree, diagram, map, or where is X in UXML
Planning refactors across CommandRail, HUD shells, overlays, pickers
Explaining phase / Tab / context visibility (hub vs exploration vs combat)
Handoff docs after touching Assets/UI/Screens/**/*.uxml

Complements unity-ui-toolkit.mdc (BEM + name hooks). This skill owns output format and research steps.

Output format (required sections)

Deliver in this order unless the user asks for tree only:

1. ASCII tree

Use ASCII branches from script (+--, `--, | indent) or Unicode box-drawing in chat markdown
Each line: UXML name (primary) + short role in brackets
Include control text="..." for Button / Label when static in UXML
Mark code-built hosts: ← Populate() / RailMenuFocus.CreateButton
Mark hidden by default: --hidden, display: none hosts

2. Phase / state table (when HUD is phase-driven)

3. Separate UIDocuments (when more than one `UIDocument`)

List each document, sortingOrder if known, and what is not in CommandRail.

4. Optional mermaid

Use only for multi-document or sequence flows (open Shop, Tab party menu). Follow plan-mode mermaid rules (no spaces in node IDs).

Workflow

Task Progress:
- [ ] 1. Identify root UXML path(s) under Assets/UI/
- [ ] 2. Run uxml_tree.py (or Read UXML if script unavailable)
- [ ] 3. Grep C# for name hooks and presenters
- [ ] 4. Read USS for --hidden / context BEM modifiers
- [ ] 5. Emit tree + tables; link file paths

1. Find roots

Ask	Start here
Global left rail	`Assets/UI/Screens/Shared/CommandRail.uxml`
Hub overlay / shop picker	`Assets/UI/Screens/Hub/HubHud.uxml`
Party Tab shell	`Assets/UI/Screens/Shared/PartyMenu.uxml`
Exploration	C# map hosts (`MapGridHostBuilder` + `MapView.uss`), `PartyFormationFloater.uxml`, `PartyMenu.uxml`
Combat	`Assets/UI/Screens/Combat/CombatHud.uxml`
Empty rail template	`Assets/UI/Screens/Shared/RailMenuVertical.uxml`

2. Generate tree (griddungeon-game root)

python .cursor/skills/visualize-uitk-uxml/scripts/uxml_tree.py Assets/UI/Screens/Shared/CommandRail.uxml

Multiple files:

python .cursor/skills/visualize-uitk-uxml/scripts/uxml_tree.py `
  Assets/UI/Screens/Shared/CommandRail.uxml `
  Assets/UI/Screens/Hub/HubHud.uxml `
  Assets/UI/Screens/Shared/PartyMenu.uxml

Script prints name, class, text, Style src, Instance template. It does not expand UXML templates — note <ui:Instance> as template="...".

3. Wire C# and presenters

Grep patterns:

rg 'Q<.*>\("[^"]+"\)' Assets/Scripts/UI --glob "*.cs"
rg 'CommandRail\.|UIDocument|sortingOrder' Assets/Scripts/UI
rg 'CloneTree|VisualTreeAsset' Assets/Scripts/UI

For each name="foo" queried in code, annotate tree node foo ← HubHudView.

Presenter → document map (extend as needed):

Presenter	UXML / mount
`CommandRailPresenter`	`CommandRail.uxml`
`HubHudView`	`HubHud.uxml` + clones pickers into `hub-hud`
`PartyMenuOverlayView`	`PartyMenu.uxml`; section rail = `CommandRail.PartySectionRailRoot`
`ExplorationMapCoordinator`	`ExplorationMap` GO — `MinimapPanelPresenter` + `ExpandedMapOverlayPresenter`
`CombatHudView`	`CombatHud.uxml` + cloned pickers

4. USS visibility

Read paired .uss for:

display: none + --hidden modifiers
Context selectors (e.g. command-rail--context-hub)
transition-property on rail enter (see CommandRailEnterTransition)

Annotate tree leaves with instant hide vs animated when relevant.

Rules

Separate rail from overlay — CommandRail is one UIDocument; party backdrop and shop pickers are others unless user scopes one file.
Same rail instance — Hub Tab and Exploration Tab share party-menu-nav on CommandRailPresenter.
Do not invent nodes — only UXML, cloned templates, or documented Populate() builders.
Cite paths — use repo paths like Assets/UI/Screens/Shared/CommandRail.uxml.
Proportion — small screen = tree only; architecture questions = tree + table + UIDocuments.

Canonical example

Full CommandRail walkthrough: examples.md.

Code-driven rail refactor plan: .cursor/plans/ or issue context
audit-uitk-uss-class-toggles — USS class usage, not hierarchy
Design reference: shared-menu-picker-ui.md

visualize-uitk-uxml

Visualize UITK UXML

When to use

Output format (required sections)

1. ASCII tree

2. Phase / state table (when HUD is phase-driven)

3. Separate UIDocuments (when more than one UIDocument)

4. Optional mermaid

Workflow

1. Find roots

2. Generate tree (griddungeon-game root)

3. Wire C# and presenters

4. USS visibility

Rules

Canonical example

Related

More from this repository

More from this repository

Visualize UITK UXML

When to use

Output format (required sections)

1. ASCII tree

2. Phase / state table (when HUD is phase-driven)

3. Separate UIDocuments (when more than one UIDocument)

4. Optional mermaid

Workflow

1. Find roots

2. Generate tree (griddungeon-game root)

3. Wire C# and presenters

4. USS visibility

Rules

Canonical example

Related

3. Separate UIDocuments (when more than one `UIDocument`)

3. Separate UIDocuments (when more than one `UIDocument`)