t1k:designer:ux:ui-wireframe

Field	Value
Module	`ux`
Version	`1.7.2`
Effort	`high`
Tools	—

Keywords: mockup, prototyping, UI design, wireframe

How to invoke

/t1k:designer:ux:ui-wireframe

Game UI Wireframe

When This Skill Triggers

Planning a new game screen before Canvas implementation
Deciding screen layout zones (header, content, action bar, nav)
Mapping content priority for complex screens (shop, inventory, character select)
Designing screen-to-screen navigation flow
Choosing between layout templates (split-panel vs grid vs tab-based)
Handling portrait/landscape breakpoints or safe area constraints

Does NOT cover:

HUD during gameplay → game-ux-design
Visual styling, colors, typography → game-visual-design
Canvas RectTransform implementation → UI framework skills (engine layer)
Touch target sizes, mobile UX → game-ux-design

Layout Zones (Universal)

┌──────────────────────────────────┐
│  HEADER / TOOLBAR (title, back)  │  ← 60–80px; never scrolls
├──────────────────────────────────┤
│                                  │
│         CONTENT AREA             │  ← scrollable; max priority
│                                  │
├──────────────────────────────────┤
│   ACTION BAR (confirm/cancel)    │  ← 80–100px; fixed thumb zone
├──────────────────────────────────┤
│   NAV BAR (tab icons)            │  ← 56–72px; bottommost
└──────────────────────────────────┘

Safe area rules:

Top: add OS status bar height (44px portrait iOS, 24px Android)
Bottom: add gesture bar height (34px iOS, 0px Android with 3-button nav)
Use the engine’s safe area API; never hardcode offsets

Screen Layout Templates

→ See references/layout-templates.md for full ASCII wireframes + usage rules

Template	Use Case	Key Trait
Full-screen menu	Main menu, results, rewards	Single focal CTA; bg art fills screen
Split-panel	Inventory, equipment, skill tree	Left list + right detail; 40/60 split
Grid gallery	Shop, character select, card collection	Equal cells; sort/filter bar at top
Dialog/modal	Purchase confirm, alert, input prompt	Max 60% screen width; dark overlay
Tab-based	Settings, player profile, leaderboard	Tab bar below header; content swaps

Content Priority Mapping

Before placing any element, rank it:

Primary — player’s next action (equip button, buy button, start game)
Context — info needed to make that action (item stats, price, cooldown)
Secondary — supporting info (flavor text, set bonus, history)
Tertiary — discoverable (advanced filters, share, report)

Placement rule: Primary → bottom action bar. Context → center content. Secondary → below fold or collapsed. Tertiary → overflow menu.

Anchor Strategy for Responsive UI

Element	Anchor Preset	Notes
Header bar	Top + stretch-horizontal	Sticks to top edge
Action bar	Bottom + stretch-horizontal	Sticks to bottom safe area
Nav bar	Bottom + stretch-horizontal	Below action bar
Content scroll	Stretch all sides	Fills between header and action bar
Modal/dialog	Center + fixed size	320–480px wide; max 80% height
Floating button	Bottom-right	72px from safe area edges

Use ContentSizeFitter + VerticalLayoutGroup for dynamic content lists.

Screen Flow Patterns

→ See references/screen-flows.md for detailed flow diagrams

Core flows:

Main menu → Lobby → Game → Results → Rewards → (back to Lobby)
Shop: Category tabs → Item grid → Item detail sheet → Purchase confirm dialog
Inventory: Grid overview → Item detail panel → Equip/Use confirm
Character select: Roster grid → Character detail → Loadout → Confirm
Settings: Category list → Options panel → Apply/revert confirm

Flow rules:

Every screen has exactly one back path (Back button or gesture)
Modals/dialogs always return to the screen that spawned them
Deep links (notification taps) must resolve to a valid back stack
Never dead-end: result screens always show a next-step CTA

Portrait / Landscape Breakpoints

Portrait primary: design at 1080×1920; safe content within 1080×1700
Landscape alternate: reflow to side-by-side panels; move nav bar to left sidebar
Trigger reflow at aspect ratio < 1.2 (landscape) vs > 1.2 (portrait)
Test at 16:9, 18:9, 19.5:9, 21:9 (foldables)

Wireframe Notation (ASCII Quick Reference)

[BTN]     = button
[ICN]     = icon
[IMG]     = image/avatar
[TXT]     = text label
[---]     = divider/separator
[///]     = background fill / art area
[ v ]     = dropdown
[###]     = grid of items (3×4, etc.)
[scroll↓] = scrollable region begins

Use in doc comments, wiki pages, and plan phase files.

Anti-Patterns

#	Anti-Pattern	Fix
1	No layout zones defined	Define header/content/action/nav before placing any element
2	CTA in content scroll area	Move primary actions to fixed action bar
3	Modal wider than 80%	Cap at 480px or 80vw; center with dark overlay
4	Ignoring safe area	Always apply `Screen.safeArea`; never hardcode offsets
5	Same layout for all screens	Match template to content type (grid ≠ split-panel)

Cross-References

game-ux-design — HUD patterns, mobile touch targets, onboarding flow
game-visual-design — colors, typography, visual language applied to wireframes
game-ui-animation — transition patterns for screen flows defined here
UI framework skills (auto-activated via registry) — layout, anchors, groups implementation
engine mobile UI skills (auto-activated via registry) — touch input, gesture, safe area
engine mobile skills (auto-activated via registry) — platform safe area, orientation APIs

Reference Files

File	Coverage
`references/layout-templates.md`	Full ASCII wireframes for all 5 templates with usage rules
`references/screen-flows.md`	Detailed screen-to-screen flow diagrams for core game flows

Gotchas

Layout zones survive content; pixel comps don’t — wireframe in zones (header / nav / content / actions) before pixels.
Anchor strategy must include rotation — portrait-only anchors break on tablet landscape unless explicit fallbacks exist.
Content priority is a stack, not a grid — the wireframe must answer ‘what must the player see if everything else is off-screen?’