| name | create-uitk-design-mirror |
| description | 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. |
Create UITK design mirror
When to use
- User asks to create mock, create mirror, design mirror for X
- Bootstrap mirror, add mirrored component, regenerate placeholder UI
- Production shell changed — re-expand mirror hosts from fixture (refresh; do not wipe UX layout outside
stripHosts unless user says regenerate from scratch)
Not this skill: promoting mirror → production — use sync-uitk-design-mirror.
| Ask | Skill |
|---|
| New mirror / refresh placeholders from prod | create-uitk-design-mirror |
| UX finished editing → promote to production | sync-uitk-design-mirror |
Authority
Workflow
Task Progress:
- [ ] 1. Resolve component id from user arg or `mirror-manifest.yaml` — stop if manifest `components` is empty and no id was given
- [ ] 2. Resolve production paths — existing entry from manifest; **new** component from user arg + [template.md](../create-uitk-design-mirror/template.md) / [examples.md](../create-uitk-design-mirror/examples.md) (read `shellUxml`, `shellBindableNames`, `stripHosts`)
- [ ] 3. Grep C# for code-built hosts (*Builder, RailMenuFocus) — annotate static mirror needs
- [ ] 4. Read or create fixture YAML per state (primary `mirror.fixture` + each `states[]` entry — template.md schema)
- [ ] 5. Ensure Assets/UI/Editor/DesignMirror/ exists; write DesignMirror.uxml for primary + each state
- [ ] 6. Seed DesignMirror.uss from production ussTargets (copy selectors UX may edit)
- [ ] 7. Wire Style src — HudOverlay read-only + mirror USS last
- [ ] 8. Append manifest entry if new component
- [ ] 9. Prettier on new .uxml / .uss (prettier-uitk-format)
- [ ] 10. Hand off paths; UX opens mirror UXML in Unity UI Builder — never edit production Screens/
Run from griddungeon-game root.
Manifest
Assets/UI/Editor/DesignMirror/mirror-manifest.yaml — see template.md.
Fixture
Primary: mirror.fixture in manifest. Additional visual states: states[].fixture — see template.md.
Row shapes
Static placeholder rows must match rowTemplate.source in manifest — references/row-shapes.md.
Create rules
- Never write to
Assets/UI/Screens/ during create — mirror paths only.
- Preserve every
shellBindableNames name from production shell on the same nodes in mirror.
- Expand only
stripHosts with static children — tabs, row slots (windowed-list__slot × 8, each wrapping one item-row when present), sample buttons.
- Placeholder copy from fixture YAML — realistic labels (Stim Draft, 50c, Buy/Sell). Empty state —
rows: [], eight empty slots, blank detail; no menu-item--focused row.
- Visible steady state — mirror drops
--hidden on root; add pop-in--expanded on panels with pop-in (Builder shows scale: 0 1 otherwise); populated state includes one menu-item--focused row.
- States — when manifest lists
states[], emit one *.DesignMirror.uxml per state; share the component mirror.uss. Only primary mirror.uxml (or states with syncToProduction: true) promote to production shell.
- USS — one editable
*.DesignMirror.uss per component; UX never opens production USS.
- Refresh mode — merge new bindable names from prod; re-expand hosts from fixture; preserve UX edits outside
stripHosts.
.meta — Unity Editor generates; run validate-unity-meta before commit.- Wording — no
phase, MVP, mvp, or PoC in any Assets/** file.
Output deliverables
| Item | Path |
|---|
| Mirror UXML (primary) | Assets/UI/Editor/DesignMirror/.../{Name}.DesignMirror.uxml |
| Mirror UXML (states) | .../{Name}.{State}.DesignMirror.uxml per states[] |
| Mirror USS | Assets/UI/Editor/DesignMirror/.../{Name}.DesignMirror.uss (shared) |
| Fixture (primary) | Assets/UI/Editor/DesignMirror/Fixtures/{id}.fixture.yaml |
| Fixture (states) | Assets/UI/Editor/DesignMirror/Fixtures/{id}-{state}.fixture.yaml |
| Manifest row | mirror-manifest.yaml components[] |
| UX next step | Open {Name}.DesignMirror.uxml in Unity UI Builder |
Canonical example
examples.md — ItemListPicker first mirror.
Related
- sync-uitk-design-mirror — promote to production
- prettier-uitk-format — format changed UXML/USS
- visualize-uitk-uxml — ASCII tree of production shell
