visualize-uitk-uxml

Estrellas1

Forks0

Actualizado8 de julio de 2026 a las 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.

Instalación

Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.

Fuente

miramocha

miramocha/griddungeon-design-docs

Abrir repositorio de GitHub Ver repositorios del creador

Descarga

Ocupaciones relacionadasSOC

Basado en la clasificación ocupacional SOC

Desarrolladores de softwareOcupaciones informáticas y matemáticas·SOC 15-1252

Explorador de archivos

3 archivos

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

Más de este repositorio

mismo repositorio

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

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

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

Más de este repositorio

Más de este repositorio

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`)