visualize-uitk-uxml

Étoiles1

Forks0

Mis à jour8 juillet 2026 à 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

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Source

miramocha

miramocha/griddungeon-design-docs

Ouvrir le dépôt GitHub Voir les dépôts du créateur

Téléchargement

Métiers associésSOC

Basé sur la classification professionnelle SOC

Développeurs de logicielsProfessions informatiques et mathématiques·SOC 15-1252

Explorateur de fichiers

3 fichiers

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

Plus depuis ce dépôt

même dépôt

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

Plus depuis ce dépôt

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

Plus depuis ce dépôt

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

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