Run any Skill in Manus with one click

host-surface

Stars3

Forks0

UpdatedApril 19, 2026 at 21:05

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.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

vucinatim

vucinatim/air-jam

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

SKILL.md

readonly

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

More from this repository

same repository

game-architecture

vucinatim/air-jam

Use when creating or refactoring gameplay code in an Air Jam project and you need guidance on host vs controller vs domain boundaries, modular structure, and when to refactor before implementing.

2026-04-193

prefab-authoring

vucinatim/air-jam

Use when creating reusable gameplay objects or scene presets so prefabs stay declarative, configurable, and ready for future tooling such as previews and scanned catalogs.

2026-04-143

controller-ui

vucinatim/air-jam

Use when building or reviewing Air Jam controller surfaces so touch controls stay simple, readable, and game-appropriate instead of drifting into dense web-app UI patterns.

2026-04-083

debug-and-test

vucinatim/air-jam

Use when debugging or validating an Air Jam project so diagnostics, logging, and tests stay intentional, structured, and aligned with the project architecture.

2026-04-043

airjam-docs-workflow

vucinatim/air-jam

Use when an Air Jam task needs canonical guidance and you need to know which local docs to read, when hosted docs are appropriate, and how to avoid reading the whole docs tree unnecessarily.

2026-04-013

canvas-2d-gameplay

vucinatim/air-jam

Use when building or reviewing a 2D Air Jam game with canvas so simulation, rendering, SVG/sprite assets, scaling, and collision stay clean instead of collapsing into DOM-heavy ad hoc logic.

2026-03-293

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