| name | host-surface |
| description | Use when building or reviewing the Air Jam host shell so the active game surface stays full-frame, overlays stay modular, and host UI does not interfere with gameplay layout. |
Host Surface
Use this skill for host presentation, overlays, room chrome, and game viewport composition.
Read First
docs/generated/host-system.md
docs/generated/project-structure.md
docs/visual-system.md if the template already ships a shared visual language
docs/generated/controller-ui.md only if the host and controller should mirror a shared visual language
docs/composition-shell-contract.md when the host lobby/join shell is part of the work
Surface Rules
- the active game surface should fill an absolute
inset-0 root
- avoid wrappers that constrain, crop, or offset the play surface accidentally
- keep host chrome outside the gameplay coordinate space where possible
- keep overlays layered above the game surface, not embedded into gameplay components
Composition Rules
- separate room bootstrap, shell, gameplay viewport, and overlays into distinct modules
- keep host-only orchestration in
src/host/
- keep gameplay state and rendering concerns in
src/game/
- prefer reusable overlay modules over inline one-off markup
Layout Rules
- avoid overflow bugs on the main host surface
- prefer fluid sizing over fixed panel widths and heights
- keep QR, room, pause, and status UI visually secondary to the active game
- keep readable safe margins for overlays without shrinking the gameplay surface unnecessarily
Lobby Contract Rule
For host lobby work:
- the host lobby should expose room context, QR access, join URL field, copy/open actions, and a primary start action
- prefer
useHostJoinControls plus JoinQrOverlay, JoinUrlField, JoinUrlActionButtons, JoinUrlControls, and LifecycleActionGroup unless the game needs a fully custom shell
- if the shell is fully custom, preserve the same join and lifecycle behavior contract
Anti-Patterns
- gameplay rendered inside a card, panel, or centered content column
- host shell state mixed directly into gameplay components
- overlay UI positioned by guesswork inside the game scene
- host layout choices that make the game viewport smaller than necessary