@genex-ai/cli-demo 0.78.1-dev.203 → 0.80.0-dev.211

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,6 +1,8 @@
1
1
  # Routing Map
2
2
 
3
- Use this reference when a Genex game request touches multiple visual systems.
3
+ The director's routing source: which skill owns which system, the execution
4
+ order for a Genex game, and the acceptance gate. Use it for every game and
5
+ whenever a request touches multiple visual systems.
4
6
 
5
7
  ## Three.js version and references
6
8
 
@@ -13,6 +15,48 @@ the user asks to upgrade. Use official Three.js docs first, then official
13
15
  examples as implementation references. Match examples to the project's installed
14
16
  Three.js release or branch, and do not blindly copy demo architecture.
15
17
 
18
+ ## Route by system
19
+
20
+ | Work needed | Load |
21
+ | --- | --- |
22
+ | shot composition, chase/side/orbit rigs, camera handoffs, projection ownership, pointer look, mouse-aimed action (shooter, FPS/first-person, sniper, turret, crosshair/reticle), mouse-look, hand-rolled steering/pan/look input signs (screen-direction contract), floating origins | `$genex-threejs-camera-direction` |
23
+ | on-foot player movement: walk/run/jump/crouch, third-person character, slopes, stairs, moving platforms, personal VRM animation, directional locomotion, transitions, action motion | `$genex-threejs-character-controller` |
24
+ | a custom generated playable humanoid or Meshy animation coverage beyond UAL: reference-informed A-pose concepts, explicit candidate + 10k-remesh approvals, exact action IDs, same-rig adapter | `$genex-ai-character` + `$genex-threejs-character-controller` |
25
+ | the player drives or flies something: cars, drones, vehicle physics, gearbox, enter/exit between character and vehicle | `$genex-threejs-vehicle-controllers` |
26
+ | playable on phones: touch/mobile input for any game — joystick, virtual buttons, drag zones, per-genre touch recipes, rotate-device overlay — wired by default for every NEW game when a recipe fits (skip with a one-line reason) | `$genex-threejs-touch-controls` |
27
+ | phone-survivable rendering — device tiers, DPR/shadow/post budgets, the runtime quality governor, per-tier asset rungs for generated skyboxes/textures, the Quality picker, dispose-on-swap discipline — **mandatory for every game at boot wiring** | `$genex-threejs-adaptive-quality` |
28
+ | anything falls, collides, gets pushed, or needs physics: Rapier world setup, colliders for meshes and GLBs, collision events | `$genex-threejs-physics-rapier` |
29
+ | launch and docking timelines, procedural transform phases, springs, staging, rotating-frame alignment, debris motion | `$genex-threejs-procedural-animation` |
30
+ | reusable scalar/vector fields, domain warping, causal masks, procedural normals | `$genex-threejs-procedural-fields` |
31
+ | atlas-filtered blocks, planetary surfaces, terrain wetness, lava/emissive procedural surfaces, authored frame PBR, specular AA | `$genex-threejs-procedural-materials` |
32
+ | sculpted rails/frames, branch rings, semantic mesh writers, material groups | `$genex-threejs-procedural-geometry` |
33
+ | trees, stylized grass, GPU-computed grass fields, branching organisms, roots, foliage, rooted wind deformation | `$genex-threejs-procedural-vegetation` |
34
+ | buildings, façade grammars, profiles, ornaments, modular mesh writers | `$genex-threejs-procedural-architecture` |
35
+ | planets, terrain, craters, biome fields, coastlines, spherical detail | `$genex-threejs-procedural-planets` |
36
+ | sky scattering, planetary shells, depth-based aerial perspective | `$genex-threejs-atmosphere-aerial-perspective` |
37
+ | weather-driven raymarched clouds and cloud shadows | `$genex-threejs-volumetric-clouds` |
38
+ | hero open-water FFT oceans (expensive — only when open water IS the game): spectral cascades, hybrid FFT/Gerstner clear water, choppy derivatives, Jacobian whitecaps | `$genex-threejs-spectral-ocean` |
39
+ | **default water**: an ocean, sea, lake, river, or pool the game plays on or around — authored analytic waves, bounded heightfield pools, object ripples, differential-area caustics, shared normals, heuristic refraction, fallback absorption, crest foam | `$genex-threejs-water-optics` |
40
+ | falling snow, snow accumulation, model snow caps, wet asphalt puddles, procedural ripple normals, splash flipbooks, rain streaks, shared weather envelopes, surface wetness | `$genex-threejs-precipitation-surfaces` |
41
+ | curved-ray black holes, accretion disks, wormholes | `$genex-threejs-raymarched-space-effects` |
42
+ | particles, trails, plasma, shockwaves, layered event effects | `$genex-threejs-procedural-vfx` |
43
+ | accumulated screen frost, touch clearing, reduced blur, and refraction masks | `$genex-threejs-temporal-surfaces` |
44
+ | the light rig and where light belongs: sun/moon key, practical lights (campfire, torch, neon, lava), emissive-to-light coupling, light shafts and visible beams, fog mood, light signals, flicker, a scene that reads flat or uniformly lit | `$genex-threejs-lighting-design` |
45
+ | stable large-world shadows, cascades, clipmaps, cached updates | `$genex-threejs-shadow-systems` |
46
+ | GTAO, bent normals, bilateral reconstruction | `$genex-threejs-screen-space-ambient-occlusion` |
47
+ | HDR bloom and selective emission contribution | `$genex-threejs-bloom` |
48
+ | eye adaptation, tone mapping, LUT grading, output color | `$genex-threejs-exposure-color-grading` |
49
+ | shared depth/normal/velocity ownership and multi-pass ordering | `$genex-threejs-image-pipeline` |
50
+ | fixed-view diagnostics, seed sweeps, temporal and budget evidence | `$genex-threejs-visual-validation` |
51
+ | game content named in the plural or a content genre: quests, objectives, NPCs, dialogue, shops, inventory, loot, XP/progression, an RPG/adventure/story game — **mandatory whenever the ask names content**, and its content contract is written before the asset batch | `$genex-threejs-game-content` |
52
+ | a big/open world: kilometers of terrain, multiple regions or locations, exploration, points of interest, biomes, world streaming | `$genex-threejs-open-world` |
53
+ | the 2D interface — HUD, menus, pause/win/lose screens, loaders, lobby, on-screen text and buttons, UI state flow — **mandatory for every game**, and its "Plan the UI first" gate runs right after the concept is locked | `$genex-threejs-game-ui` |
54
+ | a cinematic menu — main menu/title/pause/victory/defeat/lobby/credits with a looping generated video backdrop behind DOM buttons | `$genex-ai-menu` |
55
+ | a cohesive art-directed HUD — generated sprite set (matched frames, masks, icons in one style) wired with masked fills | `$genex-ai-hud` |
56
+ | the game works but feels flat, floaty, or unresponsive: input response, acceleration curves, camera shake, hit feedback, hitstop, cooldowns, difficulty ramp, fail/retry loop | `$genex-threejs-game-feel` |
57
+ | realtime multiplayer: movement sync, a shared ball/NPC, host-run scores/enemies, shots/emotes, persistence | `$genex-threejs-multiplayer` |
58
+ | player identity, sign-in, guests, saves/progress, per-player state, a shared persistent world, leaderboards — **mandatory for every game** | `$genex-threejs-embed-auth` |
59
+
16
60
  ## Execution order
17
61
 
18
62
  1. Define the game contract: player verb, win/interaction loop, target device,
@@ -29,12 +73,10 @@ Three.js release or branch, and do not blindly copy demo architecture.
29
73
  additionally fixes the world's scale class as a number here via
30
74
  `$genex-threejs-open-world` — kilometers of streamed terrain, never one
31
75
  fogged plane. Scope belongs to the user: shipping fewer or smaller than
32
- the ask requires their explicit OK through a structured question (your
33
- environment's structured question tool when it has one Claude Code:
34
- `AskUserQuestion`; Codex: `request_user_input`; if none, e.g. Cursor, a
35
- short numbered list in chat) — a
36
- "vertical slice first" is a build order, never a license to shrink the
37
- destination silently.
76
+ the ask requires their explicit OK through a question with real options
77
+ (your question tool when you have one; a short numbered list in chat
78
+ otherwise) a "vertical slice first" is a build order, never a license
79
+ to shrink the destination silently.
38
80
  2. Wire player identity before any boot code: `$genex-threejs-embed-auth` is
39
81
  mandatory for every game (`initEmbed(...)` + the `waitForPlayer()` gate) —
40
82
  saves, leaderboards, and multiplayer auth all come from it.
@@ -45,9 +87,8 @@ Three.js release or branch, and do not blindly copy demo architecture.
45
87
  game-ui gate) WITH the full HUD composited over it: the `$genex-ai-hud`
46
88
  Stage-1 image, one generation serving as concept, style checkpoint, and
47
89
  HUD blueprint (never a separate UI-free concept first). Show it to the user
48
- the moment it lands and get a keep-or-change answer through the
49
- environment's structured question tool (Claude Code: `AskUserQuestion`;
50
- Codex: `request_user_input`; numbered-list fallback otherwise). This answer
90
+ the moment it lands and get a keep-or-change answer through your question
91
+ tool (a short numbered list in chat when you have none). This answer
51
92
  GATES — but only the style-dependent pipeline: until the user approves a
52
93
  frame, do NOT enqueue the Tier-2 art that builds on the look (the
53
94
  `$genex-ai-hud` Stage-2 chain, and the `$genex-ai-menu` still + video
@@ -58,10 +99,10 @@ Three.js release or branch, and do not blindly copy demo architecture.
58
99
  arrive, and later `--edit`-able generations anchor to the approved frame for
59
100
  STYLE while the game contract owns content. Everything that does NOT depend
60
101
  on the look — scaffold, boot wiring, the core loop, and the
61
- concept-independent content subagents below keeps building in parallel
62
- while the answer is pending, so the wait is never idle. Skipping this enqueue is
63
- the #1 way a finished game ships an ugly HUD — by step 12 there is nothing
64
- to swap in.
102
+ concept-independent worker lanes (the director's Delegate section)
103
+ keeps building in parallel while the answer is pending, so the wait is
104
+ never idle. Skipping this enqueue is the #1 way a finished game ships an
105
+ ugly HUD — by step 12 there is nothing to swap in.
65
106
  4. Lock the visual direction — the same plan-first logic as the UI gate, in
66
107
  the same plan block, before any rendering code:
67
108
  - **camera**: the rig type and the pointer bucket
@@ -144,7 +185,7 @@ Three.js release or branch, and do not blindly copy demo architecture.
144
185
  Emissive-only is a real answer said in one line; a coupled practical
145
186
  light is the step up; one white ambient wash over everything is the
146
187
  unlit look with extra steps, and it reads the same at noon and at
147
- midnight. `$genex-threejs-lighting-design` owns this gate;
188
+ midnight. `$genex-threejs-lighting-design` owns that gate;
148
189
  Planning is not building: effects still land LAST (steps 10–11); this step
149
190
  only fixes the target so the look isn't improvised pass-by-pass at the end.
150
191
  5. Wire the gameplay layer for the player verb: the physics world via
@@ -217,61 +258,23 @@ Three.js release or branch, and do not blindly copy demo architecture.
217
258
  13. Validate in a real browser with fixed seeds, captures, interaction checks,
218
259
  and performance evidence.
219
260
 
220
- ## Parallelize with subagents — the default whenever the environment has them
221
-
222
- Generations already render server-side in parallel — the wall-clock savings
223
- live in the ATTENDED chains. Whenever the coding agent supports background
224
- subagents (e.g. Claude Code's Agent tool), fanning the independent work out is
225
- the DEFAULT, not a big-scope special case: split every disjoint chain below off
226
- by default and keep the main thread building. In environments without them
227
- (Cursor), the same order simply runs sequentially and the `--no-wait` pattern
228
- still hides most generation latency.
261
+ ## Delegation
229
262
 
230
- **One ordering rule from the concept gate (step 3):** subagents that build ON
231
- the look are CONCEPT-DEPENDENT and wait for the user's keep/change yes the
232
- HUD chain worker and any style-matched art. Subagents that do NOT depend on the
233
- look the content-module fan-out, verification of concept-independent parts
234
- launch immediately and run while the concept answer is still pending. Never let
235
- the pending yes stall concept-independent work, and never fan out
236
- concept-dependent work before it.
263
+ Fan-out is owned by the director: sub-agents own DESIGN.md Modules rows,
264
+ concept-DEPENDENT lanes wait for the player's yes on the concept, one writer
265
+ per file, workers never spawn workers, and the Assets table is the budget
266
+ the full rules and the worker prompt shape live in the Delegate section of
267
+ `$genex-game-director`. This map adds no separate delegation rules; it is the
268
+ routing source the director and its workers read.
237
269
 
238
- - **HUD chain worker (concept-dependent — starts on the yes).** The moment the
239
- user APPROVES the concept, hand the whole
240
- `$genex-ai-hud` chain to one subagent: pick the better candidate → Stage-2
241
- sheet → clean → extract → masks → write the sprite wiring. Its prompt must
242
- be self-contained — the style brief, the approved mockup URL, the
243
- output dir, and exactly which files it owns. **Handoff rule:** whoever
244
- wires the HUD after the subagent finishes MUST read the produced
245
- `*.annotated-progress.json` and `.bbox.json` files from disk — fillBox
246
- numbers, `segments`, and sprite dims do not survive a prose summary, and
247
- wiring from the summary is how validated masks end up on disk while the
248
- shipped fill is a naive width%.
249
- - **Asset shepherd.** One subagent runs `npx genex wait` on every queued ID
250
- and wires each asset in as it lands (skybox, models, menu video, dressing),
251
- swapping placeholders out and reporting each swap.
252
- - **Verification runner.** Browser evidence — screenshots, control presses,
253
- the menu loop-seam watch, in-situ checks of placed art — can run in a
254
- subagent while the main agent keeps building.
255
- - **Content module fan-out (big scopes — concept-independent, launch immediately).**
256
- When the content contract names a
257
- big world or several content systems, serial hand-typing is what runs out
258
- of session: split the gameplay modules across parallel subagents instead —
259
- one each for world/terrain, quest + dialogue DATA, enemies/AI, items/
260
- economy — against a short written module contract (the shared state
261
- object's shape, the event names, the content tables from
262
- `$genex-threejs-game-content`, exact file ownership). Ship the
263
- walking-skeleton v0 preview FIRST, then let the content agents land behind
264
- it — the preview cadence and a long parallel build are not in conflict:
265
- the user walks the skeleton while the world grows. Each subagent reports
266
- deviations from the module contract; the main agent reconciles and stays
267
- the only writer of the entry point.
270
+ ## Routing rules
268
271
 
269
- Hard rules: **one writer per file** each subagent owns a disjoint file set
270
- (the HUD worker owns the hud modules and `public/assets/hud/`, the shepherd
271
- owns asset-wiring modules), and the main agent stays the only writer of
272
- gameplay/netcode. Merge points are explicit: a subagent reports what it
273
- changed, the main agent reconciles. Never put two writers on the same
274
- module a corrupted entry point costs more than the minutes saved.
272
+ - Build silhouette, motion, and material readability before adding image
273
+ effects. Never dress a primitive shape in glow or bloom to fake quality —
274
+ authored forms first, then materials, then lighting, then effects last.
275
+ - Keep game logic, simulation state, visual fields, and screen-space passes
276
+ separated unless coupling is intentional.
277
+ - Prefer deterministic seeds and named controls for every procedural system.
275
278
 
276
279
  ## Acceptance gate
277
280
 
@@ -26,8 +26,9 @@ out automatically — only `genex-*`-named files are removed, never yours.
26
26
  - **agents/** - example subagent definitions (Claude Code).
27
27
  - **commands/** - example slash commands (Claude Code).
28
28
 
29
- Start with `$genex-threejs-skill-router` for broad game or graphics requests.
30
- It routes the agent to focused skills for cameras, procedural geometry,
29
+ Start with `$genex-game-director` for any game or graphics request. It checks
30
+ what your environment can do, writes the `DESIGN.md` design contract, and
31
+ routes the agent to focused skills for cameras, procedural geometry,
31
32
  materials, atmosphere, water, weather, VFX, lighting, post-processing, and
32
33
  visual validation.
33
34
 
@@ -128,15 +128,17 @@ const gltfLoader = createGltfLoader(renderer); // meshopt always; KTX2 when the
128
128
  const gltf = await loadModelWithFallback(
129
129
  MODEL_URL, tier, (u) => gltfLoader.loader.loadAsync(u), { ktx2: gltfLoader.ktx2 },
130
130
  );
131
- // Provider PBR ships mirror-metal (metalness~1) that reflects the sky env and
132
- // swims with camera motion clamp it on every loaded model:
131
+ // Provider PBR sometimes ships mirror-metal (metalness~1 + near-zero roughness)
132
+ // that reflects the sky env and swims with camera motion. Tame ONLY that extreme
133
+ // — do NOT flatten every material to 0.6 (it dulls legitimately metallic props):
133
134
  gltf.scene.traverse((o) => {
134
135
  const m = (o as THREE.Mesh).material as THREE.MeshStandardMaterial;
135
- if (m?.isMeshStandardMaterial) {
136
- m.metalness = Math.min(m.metalness, 0.6);
137
- m.roughness = Math.max(m.roughness, 0.35);
138
- m.envMapIntensity = 0.6;
136
+ if (!m?.isMeshStandardMaterial) return;
137
+ if (m.metalness > 0.85 && m.roughness < 0.2) {
138
+ m.metalness = 0.7;
139
+ m.roughness = Math.max(m.roughness, 0.3);
139
140
  }
141
+ m.envMapIntensity = Math.min(m.envMapIntensity, 0.8);
140
142
  });
141
143
  ```
142
144
 
@@ -162,7 +164,7 @@ not the player's account. Default Auto.
162
164
  at most 2 cascades on phones (`$genex-threejs-shadow-systems`).
163
165
  - Post: phone floor is a BUILT tone-mapping/output pass (`postLevel: 'light'`
164
166
  adds FXAA/vignette); SSAO, volumetrics, and DoF are desktop-tier only
165
- (`$genex-threejs-skill-router` owns the floor wording).
167
+ (`$genex-game-director`'s routing map owns the floor wording).
166
168
  - Particles/scatter: multiply counts by `tier.particleScale`; render heavy
167
169
  transparency at half resolution and upsample.
168
170
  - Animation: distant mixers update at 1/2–1/4 rate; multiplayer remotes above
@@ -57,10 +57,8 @@ Meshy Image-to-3D first produces an unremeshed high-detail model. Show its
57
57
  front, back, left, and right views and report its measured face count. Preserve
58
58
  that model in R2. Before rigging, ask the user to approve a separate
59
59
  10,000-face triangle remesh. The 10k remesh—not the high-detail source—is
60
- rigged and animated. (For these approvals, use your environment's structured
61
- question tool when it has one Claude Code: `AskUserQuestion`; Codex:
62
- `request_user_input`; if it has none, e.g. Cursor, a short numbered list in
63
- chat.)
60
+ rigged and animated. (For these approvals, use your question tool when you
61
+ have one; if you have none, a short numbered list in chat.)
64
62
 
65
63
  That is a separate, **same-rig Meshy-native lane**. Its animation-only GLBs are
66
64
  accepted only when their skeleton signature matches the active character
@@ -34,26 +34,19 @@ Guest sessions have **no** overlay — the game just plays.
34
34
  ## Install
35
35
 
36
36
  ```bash
37
- npm i @genex-ai/embed-sdk @sentry/browser
37
+ npm i @genex-ai/embed-sdk
38
38
  ```
39
39
 
40
- (`@sentry/browser` powers the crash reporting + session replay wiring below
41
- it's an optional peer of the SDK, and every Genex game installs it. Already
42
- installed if you followed Step 3 of the scaffold; repeated here so this skill
43
- is self-contained.)
40
+ (Already installed if you followed Step 3 of the scaffold; repeated here so
41
+ this skill is self-contained.)
44
42
 
45
43
  ## Bootstrap (required, every game)
46
44
 
47
45
  ```ts
48
- // main.ts — the FIRST things in the boot sequence, before any other game code
49
- import { initGameSentry } from "@genex-ai/embed-sdk/sentry";
46
+ // main.ts — the FIRST thing in the boot sequence, before any other game code
50
47
  import { initEmbed } from "@genex-ai/embed-sdk";
51
48
  import { GENEX } from "./genex.config";
52
49
 
53
- // Crash reporting + session replay FIRST — so even a failure inside the auth
54
- // boot below gets reported. One required field; never pass tokens to it.
55
- initGameSentry({ slug: GENEX.slug });
56
-
57
50
  initEmbed({
58
51
  slug: GENEX.slug,
59
52
  apiUrl: GENEX.apiUrl,
@@ -153,29 +146,6 @@ Server write limits (per player, per minute): **60 player-saves, 120
153
146
  world-saves, 30 score submits**. A debounced ~1/sec checkpoint never gets near
154
147
  them — only a save-per-frame loop does (it surfaces as HTTP 429).
155
148
 
156
- From `@genex-ai/embed-sdk/sentry` (crash reporting; exactly these two):
157
-
158
- - `initGameSentry({ slug, dsn?, environment? })` — call once, BEFORE
159
- `initEmbed()`. Only `slug` is required; the shared Genex Sentry project DSN
160
- is built in. Errors, tracing, and session replay all start here; the current
161
- player (account or guest) is attached automatically (no code needed).
162
- - `sentryCanvasSnapshot(canvas)` — session replay records the DOM, not the 3D
163
- canvas; call this once per frame at the END of the render loop so replays
164
- show actual gameplay. Works for BOTH WebGL and WebGPU renderers; internally
165
- throttled, so calling at 60fps is fine. On TOUCH devices it is a deliberate
166
- no-op (and session replay/tracing sample down): each capture is a full-canvas
167
- GPU readback, exactly the overhead phones get memory-killed for — mobile
168
- replays are DOM-only by design, on-error replays still record everywhere:
169
-
170
- ```ts
171
- function animate() {
172
- requestAnimationFrame(animate);
173
- // ...game update...
174
- renderer.render(scene, camera);
175
- sentryCanvasSnapshot(renderer.domElement); // AFTER render, same frame
176
- }
177
- ```
178
-
179
149
  ## Saving progress (per-player — every player has their own slot)
180
150
 
181
151
  Use the SDK helpers; never hand-roll fetch calls to the state API. Progression,
@@ -224,16 +194,6 @@ their Genex account) and keep-best — submitting a worse score changes nothing
224
194
  post when they sign in. Send a consistent `mode` per board. Scores are
225
195
  client-reported (arcade-style trust) — don't present them as anti-cheat.
226
196
 
227
- ## Crash reporting rules
228
-
229
- - `initGameSentry` has token scrubbing built in (the sign-in return-trip pass
230
- in URLs is redacted automatically). Never wrap, reimplement, or bypass it —
231
- and never add Sentry options that capture network request/response bodies.
232
- - Don't call `Sentry.init` yourself or add a second error reporter —
233
- `initGameSentry` is the one entry point.
234
- - Manual capture is fine where a try/catch swallows a real bug:
235
- `import * as Sentry from "@sentry/browser"; Sentry.captureException(err)`.
236
-
237
197
  ## NEVER log the tokens
238
198
 
239
199
  **NEVER log the return value of `getEmbedToken()` or `getColyseusAuth()` — not
@@ -328,10 +288,8 @@ Rules:
328
288
 
329
289
  ## Checklist
330
290
 
331
- - [ ] `initGameSentry({ slug: GENEX.slug })` is the very first call in `main.ts`.
332
- - [ ] `initEmbed(...)` follows it, with all three config fields.
333
- - [ ] `sentryCanvasSnapshot(renderer.domElement)` runs after `renderer.render()`
334
- in the main loop (WebGL and WebGPU alike).
291
+ - [ ] `initEmbed(...)` is the very first call in `main.ts`, with all three
292
+ config fields.
335
293
  - [ ] `genex.config.ts` includes `dashboardOrigins` (from `.genex/project.json`).
336
294
  - [ ] Multiplayer and player-name UI await `waitForPlayer()` — NEVER
337
295
  `waitForAuth()` (guests would hang forever). Both `connect()` and
@@ -48,11 +48,10 @@ Rules that make the contract real:
48
48
  - **Scope belongs to the user.** Building a small first slice is the right
49
49
  ORDER (`$genex-threejs-game-ui`'s v0 beat still applies) — but the slice is
50
50
  a milestone on the way to the contract, never a quiet replacement for it.
51
- If the full ask genuinely doesn't fit, shrinking any line is a structured
51
+ If the full ask genuinely doesn't fit, shrinking any line is a
52
52
  question to the user with real options — never a silent cut justified as
53
- "standard practice". (Use your environment's structured question tool when
54
- it has one Claude Code: `AskUserQuestion`; Codex: `request_user_input`;
55
- if it has none, e.g. Cursor, a short numbered list in chat.)
53
+ "standard practice". (Use your question tool when you have one; if you
54
+ have none, a short numbered list in chat.)
56
55
  - **Minute ten is the design test.** If the honest answer is "the same sixty
57
56
  seconds, again", the contract needs another beat (a new area unlocks, a
58
57
  quest chain escalates, a build comes online) before any polish work.
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  name: genex-threejs-game-ui
3
- description: Design the 2D interface of a Genex Three.js game — plan the full screen set up front (loader, menu, HUD, pause/win/lose, lobby) under one shared art direction, then build it as an animated DOM overlay. Use for every new game before writing UI code, and whenever the game needs on-screen text, meters, buttons, or menus, or the interface reads as a generic dashboard, covers the action, or shifts as numbers change.
3
+ description: Design the UI HUD interface of a Genex Three.js game — plan the full screen set up front (loader, menu, HUD, pause/win/lose, lobby) under one shared art direction, then build it as an animated DOM overlay. Use for every new game before writing UI code, and whenever the game needs on-screen text, meters, buttons, or menus, or the interface reads as a generic dashboard, covers the action, or shifts as numbers change.
4
4
  ---
5
5
 
6
6
  # Genex Three.js Game UI
@@ -43,10 +43,7 @@ The table lists screens; **elements are inventoried separately**. Walk the
43
43
  whole loop in your head — loader → menu → spawn → action → pickup → damage →
44
44
  death → retry → win — and write down EVERY on-screen element the player will
45
45
  ever see: the reticle and each of its states, aim/interact cues, toasts,
46
- damage numbers, kill feeds, timers, countdowns, pickup popups… Each element
47
- gets a treatment from the brief. **Nothing ships looking like default
48
- browser CSS** — an element styled like a bare `<div>` or a system button is
49
- a bug wherever it appears, listed or not.
46
+ damage numbers, kill feeds, timers, countdowns, pickup popups.
50
47
 
51
48
  **2. One shared style brief — for the WHOLE game, not just the UI.** Write it
52
49
  once — 4–5 named hues, materials, one display + one body font, mood — and
@@ -61,17 +58,12 @@ is LOADED for real — a Google Fonts `<link>` (or `@font-face`) in
61
58
  ships as a system-stack fallback (`Arial Black`, `Impact`) is the same bug in
62
59
  type.
63
60
 
64
- **3. Name your referencesAAA, by name.** Pick the closest capsule in
65
- [references/style-capsules.md](references/style-capsules.md), name 2–3 top
66
- AAA games of the genre, and state in one line which structural conventions
67
- you're borrowing. The bar is what those games ship, not "good enough for a
68
- demo". Conventions only — never logos, exact layouts, or trade dress. The
69
- same 2–3 names carry into the router's visual-direction gate for the scene.
70
- Then turn references + brief into ONE **concept mockup** — the game concept
61
+ **3. Make ONE concept mockup** — the game concept
71
62
  and the HUD Stage-1 mockup are the SAME image, generated once (never a
72
63
  separate UI-free concept first): a single image of a PLAYABLE MOMENT of this
73
64
  game with its complete HUD composited over it, built with `$genex-ai-hud`'s
74
- Stage-1 prompt template. The scene half of the prompt comes from the game
65
+ Stage-1 prompt template. For genre conventions to borrow, skim
66
+ [references/style-capsules.md](references/style-capsules.md). The scene half of the prompt comes from the game
75
67
  contract in TEXT, not from a prior image: what the player is DOING
76
68
  mid-action (the verb), what threatens them right now (enemy silhouettes),
77
69
  what they are chasing (the objective — a finish gate, a goal, a pickup),
@@ -95,9 +87,9 @@ clickable links saying which one you picked and why — a URL is invisible in a
95
87
  terminal, and "do you like it?" with no picture in front of the user is the
96
88
  #1 way this checkpoint fails (they end up digging logs for the file path).
97
89
 
98
- **Then ask for the yes with your environment's structured question tool** —
99
- Claude Code: `AskUserQuestion`; Codex: `request_user_input`; a short numbered
100
- list only where there is none (e.g. Cursor). ONE question — "this is roughly
90
+ **Then ask for the yes with your question tool** — the one that shows the
91
+ user clickable options; a short numbered list in chat only where there is
92
+ none. ONE question — "this is roughly
101
93
  how the game and its HUD will look — keep this direction, or change
102
94
  something?" — with concrete keep / change options. This confirmation is
103
95
  REQUIRED for every game: the concept sets the STYLE every later asset
@@ -155,11 +147,10 @@ an invented mechanic, or the absence of a real one, from a picture.
155
147
 
156
148
  **4. Ask only when genuinely ambiguous.** If the concept pins the mood (a
157
149
  "gothic horror dungeon crawler" pins it), decide and state the plan in one
158
- line. Only when the art direction is truly open, ask ONE structured question
150
+ line. Only when the art direction is truly open, ask ONE question
159
151
  with 2–3 concrete directions, each naming its palette + font pair — using
160
- your environment's structured question tool when it has one (Claude Code:
161
- `AskUserQuestion`; Codex: `request_user_input`); if it has none (e.g.
162
- Cursor), a short numbered list in chat. Never ask about the screen
152
+ your question tool when you have one; if you have none, a short numbered
153
+ list in chat. Never ask about the screen
163
154
  inventory — it derives from the game type.
164
155
 
165
156
  **5. Style follows THIS game's concept.** The examples in every Genex skill
@@ -463,43 +454,18 @@ Order the HUD by what the player loses the game for ignoring:
463
454
  - **Contrast against the real scene.** Test text over the brightest AND
464
455
  darkest areas of actual gameplay; a soft dark plate or text-shadow beats
465
456
  restyling per level.
466
- - **CSS-shaped corners must survive their contents.** `border-radius`,
467
- `clip-path`, and `mask` are all fair ways to shape a panel or button —
468
- including a chamfered/notched "hi-tech" corner in pure CSS. What is
469
- non-negotiable is the execution: the cut must never shear off anything
470
- that sits near the corner (text, padding, the focus ring, a glow) keep
471
- enough inner padding that content clears the cut shape and the result
472
- must be clean, not crooked: no jagged aliased diagonals, no half-clipped
473
- borders or shadows, no text colliding with an edge or truncating. The
474
- same bar applies to CSS plates. Verify the corners at real sizes over
475
- real gameplay. When the art direction wants a genuinely ornamented
476
- frame, a generated frame sprite (`$genex-ai-hud` chrome, or a Tier-3
477
- 9-slice panel) is still the richer tool. The masked-fill HUD reveal and
478
- `genex ui` masks remain the other established uses of `mask`/`clip-path`.
479
- - **The #1 chamfer defect: a frame that STOPS at the cut.** A plain
480
- `border` or `box-shadow` does NOT follow a `clip-path` chamfer — the clip
481
- shears it off along the diagonal, so the straight sides keep their frame
482
- while the cut edge goes bare and the panel reads as broken. Two clean
483
- fixes: prefer **`border-radius`** when a soft corner reads fine (it keeps
484
- its `border` natively — no clip needed); for a HARD angular cut, draw the
485
- frame by clipping TWO stacked layers to the SAME polygon — outer = the
486
- frame, inner (inset by the frame width) = the fill — so the outer shows
487
- through as a uniform edge on the diagonal too:
488
-
489
- ```css
490
- /* Chamfered panel whose frame follows the cut. Never `border` + clip-path. */
491
- .panel {
492
- --chamfer: 16px; --edge: 2px; /* --edge = frame width */
493
- --cut: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)),
494
- calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
495
- clip-path: var(--cut); background: var(--frame-hue); /* this IS the frame */
496
- padding: var(--edge); /* revealed all around, incl. the diagonal */
497
- }
498
- .panel > .panel__fill { clip-path: var(--cut); background: var(--plate-hue); }
499
- ```
500
-
501
- Same rule for chamfered buttons and any notched plate; verify the frame
502
- is unbroken at every corner over real gameplay.
457
+ - **Panel and button corners come from `border-radius` or a generated frame
458
+ sprite — never a raw `clip-path`/`mask` chamfer.** A CSS-cut angular corner
459
+ is the recurring "cut corners" defect: the clip shears off borders, shadows,
460
+ and any content that sits near the corner, and it re-breaks the instant the
461
+ padding, font, or value length changes so it can only be held together by
462
+ a per-build visual check that is easy to skip. It is not worth that fragility.
463
+ For a soft corner use `border-radius` (it keeps its `border`/`box-shadow`
464
+ natively). For a genuinely angular or ornamented "hi-tech" frame, generate it
465
+ as chrome (`$genex-ai-hud`, or a Tier-3 9-slice panel) and lay the DOM over
466
+ it that reads richer and physically cannot shear. `mask`/`clip-path` stay
467
+ reserved for their ONE established HUD use: the masked-fill progress reveal
468
+ driven by `genex ui` masks. Never for corner shaping.
503
469
  - **One cohesion layer.** A single full-screen vignette div (a subtle radial
504
470
  gradient darkening the corners, optionally faint grain) over canvas + UI is
505
471
  the cheapest way to make DOM-over-WebGL read as one composed image instead
@@ -11,10 +11,13 @@ says what it's made of in THIS game.
11
11
  Every capsule below assumes the base rules from the skill: corners/edges for
12
12
  UI, one display + one body font, tabular numerals, contrast plates for bare
13
13
  text over arbitrary scenes (never a second plate stacked behind an opaque
14
- frame sprite), and panel/button corners executed cleanly — `border-radius`,
15
- a CSS `clip-path`/`mask` shape, or a generated frame all work, as long as the
16
- cut never clips content (text, padding, glow), stays free of jagged-edge
17
- artifacts, and text never collides or truncates.
14
+ frame sprite), and panel/button corners done the durable way — `border-radius`
15
+ for soft corners (it keeps its `border`/`box-shadow` natively), or a generated
16
+ frame (`$genex-ai-hud` chrome / a Tier-3 9-slice panel) with the DOM laid over
17
+ it for genuinely angular looks. Raw CSS `clip-path`/`mask` corner cuts are
18
+ banned per the skill — they shear borders, shadows, and near-corner content,
19
+ and re-break on any padding/font change; `mask`/`clip-path` stay reserved for
20
+ their ONE established HUD use, the masked-fill progress reveal.
18
21
 
19
22
  ## Fantasy / action RPG
20
23
 
@@ -67,8 +67,7 @@ Infer this yourself when the experience is clear. Do **not** make the player cho
67
67
  preset, or config. Ask one plain-language question only when the design genuinely supports both
68
68
  models and the answer changes the experience — for example: *"Should this be one ongoing arena
69
69
  people drop into, or a fresh fair match that waits for everyone and then starts together?"*
70
- (Use your environment's structured question tool when it has one Claude Code:
71
- `AskUserQuestion`; Codex: `request_user_input`; if it has none, e.g. Cursor, a short numbered
70
+ (Use your question tool when you have one; if you have none, a short numbered
72
71
  list in chat.)
73
72
 
74
73
  | Player experience | Model | Why |
@@ -40,10 +40,8 @@ Meshy Image-to-3D first produces an unremeshed high-detail model. Show its
40
40
  front, back, left, and right views and report its measured face count. Preserve
41
41
  that model in R2. Before rigging, ask the user to approve a separate
42
42
  10,000-face triangle remesh. The 10k remesh—not the high-detail source—is
43
- rigged and animated. (For these approvals, use your environment's structured
44
- question tool when it has one Claude Code: `AskUserQuestion`; Codex:
45
- `request_user_input`; if it has none, e.g. Cursor, a short numbered list in
46
- chat.)
43
+ rigged and animated. (For these approvals, use your question tool when you
44
+ have one; if you have none, a short numbered list in chat.)
47
45
 
48
46
  The selected high-detail model remains in a neutral A-pose before animation.
49
47
  Record evidence that the user saw its four views and face count before