@genex-ai/cli-demo 0.47.0-dev.70 → 0.47.0-dev.74

package/templates/skills/genex-ai-hud/references/stage2-prompt-template.md

@@ -0,0 +1,73 @@
+# Stage 2 prompt template — deconstruct into an asset sheet
+
+Fill `[ASSET_LIST]`, then pass the whole text as the prompt to
+`npx genex image "<filled prompt>" --edit <mockup-url> --quality high`.
+
+`[ASSET_LIST]` is an itemized list of the assets to produce. Each item:
+
+- **states its source location** in the mockup ("the HP bar at the bottom
+  left") so the model finds what to copy;
+- **states the fused-unit boundary** when the element is several visually
+  attached pieces ("the bars panel INCLUDING the gold cross ornament on its
+  left") — separating spatially fused ornament from its container makes
+  code-side reassembly fragile, so fused units stay one asset;
+- **states what to KEEP** from your text-ownership record (`baked_static`
+  identity labels);
+- **states what to REMOVE** (`runtime_static` labels and `runtime_dynamic`
+  values, fills, items);
+- **requests the annotated duplicate** for every bar/meter frame (the
+  template's progress block below covers the mechanics — your item just says
+  "output the clean frame + annotated duplicate pair").
+
+## The template
+
+```
+Look at this game HUD screenshot. Produce a GAME DEVELOPMENT ASSET SHEET — the individual reusable building-block graphics a developer would composite with code at runtime. The output is NOT a rearrangement of the visible HUD. It is a list of distinct extractable assets, where each asset preserves the EXACT proportions and visual style of how it appears in the source.
+
+Lay these assets on a pure flat white #ffffff background, separated by at least 100px of clear whitespace between each:
+
+[ASSET_LIST]
+
+If an asset is a generated progress/bar/meter frame, output TWO CELLS immediately beside each other:
+1. LEFT CELL — the clean production asset the game will use. Preserve exact style, baked_static labels, frame metal, bevels, dividers, scratches, proportions, and texture. Remove runtime dynamic fill and values. Do not paint technical colors on this clean cell.
+2. RIGHT CELL — an annotated duplicate of the same production asset. It must be the same asset, same scale, same canvas bounds, same position, and same outer shape as the left cell. The only difference: paint runtime-fill zones with pure green key color #00ff00. Green marks only the places where runtime bar/progress fill should appear. Paint the green as a FLAT, UNIFORM, fully-saturated #00ff00 fill — no shading, no gradient, no inner shadow, no vignette, NO DARKENING TOWARD THE EDGES, no lighting, no highlights, no texture; constant color edge-to-edge with a HARD, CRISP boundary against the frame. The green is a chroma-key, not a lit surface — any edge shading makes the extracted alpha mask ragged. For discrete segment meters, paint each segment slot as a separate green shape; do not merge slots into one continuous strip and do not paint half-segments.
+
+Do NOT create a separate black-background mask cell. Do NOT create a standalone simplified silhouette. The right cell is a registration-safe annotation map; local tooling derives the alpha mask from its green pixels and uses the left cell as the frame.
+
+PRESERVE the exact visual style, materials, colors, ornamental detail, and PROPORTIONS of every asset as it appears in the input image. Do not redraw, do not stylize, do not normalize aspect ratios to standard shapes, do not "improve" anything. The ONLY changes are the content removals listed above (bar fills, slot items, map content, runtime-owned text, dynamic-value text, etc).
+
+CRITICAL text ownership distinction:
+
+KEEP these baked into the asset — they are part of the panel's IDENTITY and never change at runtime:
+- Static labels carved or painted into the frame: panel titles, axis tick labels, scale numerals, unit indicators ("LB", "FT", "%"), decorative engravings
+- Large sticker/hazard-panel identity labels printed into the design (examples: "SCORE", "RUN", "SPECIAL", "SPEED")
+- Static notch / segment dividers along a bar's length (runtime code composites a scaling fill beneath them)
+- Decorative graphics fused with the panel: an engraved emblem on a coin, a carved compass rose on a bezel, a fixed icon glyph on a slot frame
+- Tick marks on a fixed scale (depth gauge marks, dial gradations)
+
+REMOVE runtime-owned content:
+- Current numeric values (the "1247" coins, the "47" ammo count)
+- Current bar fill levels (the colored fill INSIDE a bar — runtime code reveals it through a mask)
+- Current item icons inside slots (the sword, potion — runtime renders the equipped item)
+- Current map content / radar blips (the game paints these at runtime)
+- Any editable or localizable label the design does not fuse into the frame, even if it does not change frame-to-frame
+
+The test for each text element: "is this fixed identity artwork, or should runtime code own it?" Fixed identity → KEEP. Runtime-owned → REMOVE.
+
+DO NOT include in the output sheet:
+- Pure tick-mark strips, line-only compass rails, or any element that consists only of evenly-spaced lines / dashes WITH NO surrounding frame or ornament
+- Crosshairs and reticles built from simple geometric primitives (corner brackets, dots, plus signs, triangles)
+- Plain rectangles, plain circles, plain triangles without texture or ornament
+- Simple dot indicators, status pips, blip markers
+- Fills inside bars, items inside slots, map terrain inside minimap rings (these are added at runtime by CSS / game code)
+
+Those excluded elements will be recreated by runtime code (CSS shapes and DOM text) — much crisper than a downsampled PNG.
+
+Pure white #ffffff background everywhere except where the actual UI assets sit.
+```
+
+Adapt the concrete KEEP/REMOVE examples to YOUR mockup's text-ownership
+record — the categories are fixed, the examples are illustrations. The
+annotated duplicates are extraction guides, not runtime art: after the
+`--clean` pass, feed each clean/annotated cell pair to `npx genex ui masks`
+to derive the mask PNG + `fillBox`.

package/templates/skills/genex-ai-image/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: genex-ai-image
-description: Generate a real image (PNG/JPEG) from a text prompt with `npx genex image`, then load it into Three.js on any mesh, plane, or sprite. Use for posters, paintings, billboards, signs, logos, sprites, card/item art, loading screens, textures for in-game screens, and decals/stickers ("wanted poster", "arcade cabinet marquee", "neon graffiti tag") rather than a procedural/shader look. Pass `--transparent` for anything with an alpha channel.
+description: Generate a real image (PNG/JPEG) from a text prompt with `npx genex image`, then load it into Three.js on any mesh, plane, or sprite. Use for posters, paintings, billboards, signs, logos, sprites, card/item art, loading screens, textures for in-game screens, and decals/stickers ("wanted poster", "arcade cabinet marquee", "hand-painted tavern sign") rather than a procedural/shader look. Pass `--transparent` for anything with an alpha channel.
 ---
 
 # Genex AI · Image
@@ -22,7 +22,7 @@ art on an in-game screen, or a decal/sticker.
 
 ```bash
 npx genex image "<prompt>"
-npx genex image "neon graffiti tag, spray-paint style" --transparent   # PNG with alpha (decals/stickers/logos)
+npx genex image "chalk graffiti tag, hand-drawn style" --transparent   # PNG with alpha (decals/stickers/logos)
 ```
 
 Blocks until ready, then prints its public URL:
@@ -166,10 +166,20 @@ See `$genex-threejs-multiplayer` for the `shared` channel rules and the room API
 - `--transparent` — PNG with an alpha channel (mandatory for decals/stickers/logos —
   anything laid on top of a surface).
 - `--aspect <ratio>` — image shape (e.g. `square`, `16:9`, `9:16`); default is square.
-- `--no-wait` — enqueue and return immediately (the file won't be downloaded;
-  re-run without `--no-wait` to fetch it).
+- `--quality <low|medium|high>` — quality preset; higher costs more and takes longer.
+- `--size <WxH>` — exact pixel size (multiples of 16, each side ≤ 3840, aspect ≤ 3:1).
+- `--edit <url>` — edit THAT generated image with the prompt (image-to-image).
+- `--clean <url>` — ML background removal of THAT image only (prompt recorded, unused).
+- `--remove-bg` — chain ML background removal after the generation/edit.
+- `--bg-mode <sprite|glyph|sheet>` — background-removal model (`glyph` for
+  digits/closed shapes; `--clean` defaults to `sheet`).
+- `--no-wait` — enqueue and return immediately, without the URL. Fire-and-forget
+  only: re-running the command creates (and bills) a NEW image.
 - `--api-url <url>` — override the API base (local dev).
 
+Menu backdrops belong to `$genex-ai-menu`; a cohesive art-directed HUD sprite
+set belongs to `$genex-ai-hud` — both build on this command.
+
 ## Troubleshooting
 
 - **"Not authorized"** — run `npx @genex-ai/cli-demo@dev init` first (it writes your `GENEX_TOKEN`).

package/templates/skills/genex-ai-menu/SKILL.md

@@ -0,0 +1,291 @@
+---
+name: genex-ai-menu
+description: Generate a cinematic game menu — one looping atmospheric video background plus animated DOM buttons — with `npx genex image` + `npx genex video --frame`. Use for main menus, title/start screens, pause, victory/defeat, lobby, and credits screens when the game deserves a filmic backdrop ("storm light over a lighthouse coast", "sun-drenched poppy meadow") rather than a plain CSS panel.
+---
+
+# Genex AI · Menu
+
+Turn two commands into a cinematic menu: one looping atmospheric mp4 as the
+full-screen background, 3–5 HTML buttons on top. The video sets the mood; the
+buttons are ordinary DOM, so the menu stays crisp, localizable, and wired to
+real game events.
+
+## When to use this vs. a plain CSS menu
+
+- **Use this skill** when the menu should feel like the game's opening shot —
+  a title screen with weather and light, a defeat screen over smoldering ruins,
+  a lobby with the arena breathing in the background.
+- **Use plain CSS** (`$genex-threejs-game-ui` alone) for utilitarian screens —
+  a quick pause overlay, a settings list, a loading bar. A dark translucent
+  panel is cheaper and often more readable. You can also get the best of both:
+  reuse this skill's menu video under a darker overlay for pause/victory
+  variants (see Tips).
+
+## Style brief first
+
+Use the game's ONE shared style brief from `$genex-threejs-game-ui`'s "Plan the
+UI first" gate (materials, 4–5 named hues, font pair, mood) — the menu, HUD,
+and loader all consume the same brief; don't write a second one here. The
+style is THIS game's: don't default to any stock register the examples below
+might suggest. Two hard rules for the frame prompt:
+
+- **Full-bleed cinematic 16:9.** The frame is a filmic establishing shot,
+  edge to edge. End the prompt with: `Edge-to-edge cinematic composition.
+  Full-bleed 16:9 frame. No UI elements, no text, no buttons in the frame.`
+- **NO UI in the frame — ever.** No buttons, no title text, no logos, no
+  menus baked into the image. All of that is DOM on top. If the image model
+  draws UI into the frame, the prompt was wrong — rewrite and regenerate.
+
+## Single-frame vs two-frame
+
+- **Single-frame (default — use this).** Generate ONE image and pass it as
+  `--frame`: the video model receives it as both the first and last frame, so
+  frame N equals frame 0 and the loop is mathematically seamless. Constraint:
+  the motion prompt must describe **return-to-start** motion — a cycle that
+  ends where it began. Good: "ravens circle the spire and return to their
+  perches", "fog drifts left then back right", "candle flames flicker".
+  Bad: "camera dollies forward into the gate" (one-way motion fights the
+  identical endpoints and produces a visible hitch).
+- **Two-frame** (`--first-frame` + `--last-frame`) only when the menu
+  genuinely needs a state change (rain starts and persists, a figure walks in
+  and stays). The loop will have a visible seam where the last frame snaps
+  back to the first — accept that trade deliberately or don't use it.
+
+## Run
+
+```bash
+# 1. The frame — a still of the scene the loop returns to (this example is a
+# painterly meadow; YOUR prompt comes from YOUR game's style brief):
+npx genex image "windswept alpine meadow at golden hour, wildflowers leaning in the gusts, painterly light, cinematic wide shot. Edge-to-edge cinematic composition. Full-bleed 16:9 frame. No UI elements, no text, no buttons in the frame." --aspect 16:9 --quality high
+# -> https://assets.genex.technology/generations/<id>/image-main
+
+# 2. Animate it into a seamless loop (same image as first AND last frame).
+# Enqueue in the background and keep building — video takes minutes:
+npx genex video "grass and wildflowers sway and settle back, clouds drift and return, light shimmers" --frame https://assets.genex.technology/generations/<id>/image-main --duration 8 --no-wait
+# -> Queued (<gen-id>)
+
+# 3. Later — pick the finished loop up (safe to re-run; never creates a new one):
+npx genex wait <gen-id>
+# -> https://assets.genex.technology/generations/<gen-id>/video-mp4
+```
+
+**Work async — the menu must never block the game.** Generate the frame right
+after the UI plan gate, enqueue the video with `--no-wait`, ship the CSS menu
+(buttons + title over the frame IMAGE as a static backdrop), and swap the
+`<video>` in when `genex wait` prints the URL. The frame image doubles as the
+**loading screen background** — it exists minutes before the video does (see
+`$genex-threejs-game-ui`'s loader spec). Both assets live in Genex storage
+(R2) — permanent, public, CORS-open; you load them straight from the printed
+URLs, nothing is downloaded or committed.
+
+## Wire it as a phase screen
+
+The menu is one `data-phase` screen in the `$genex-threejs-game-ui`
+architecture (the `#ui` overlay + `setPhase()` state machine). Complete,
+copy-pasteable example:
+
+```html
+<div id="ui">
+  <div id="screen-menu" class="screen" data-phase="menu">
+    <video class="menu-bg"
+      src="https://assets.genex.technology/generations/<id>/video-mp4"
+      autoplay muted loop playsinline></video>
+    <div class="menu-title stagger" style="--i: 0">EMBERFALL</div>
+    <button class="menu-btn stagger" id="menu-play"    style="--i: 1; left: 38%; top: 52%; width: 24%; height: 8%;">PLAY</button>
+    <button class="menu-btn stagger" id="menu-options" style="--i: 2; left: 38%; top: 63%; width: 24%; height: 8%;">OPTIONS</button>
+    <button class="menu-btn stagger" id="menu-credits" style="--i: 3; left: 38%; top: 74%; width: 24%; height: 8%;">CREDITS</button>
+    <div class="menu-corner stagger" style="--i: 4">v1.0</div>
+  </div>
+  <!-- other .screen phases (playing HUD, pause, over) live beside it -->
+</div>
+```
+
+```css
+#screen-menu { position: absolute; inset: 0; overflow: hidden; background: #000; }
+.menu-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+.menu-title {
+  position: absolute; left: 0; right: 0; top: 14%; text-align: center;
+  font-family: "Cinzel", serif; font-size: 9vh; color: #f4e3b8;
+  letter-spacing: 0.08em;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.85), 0 8px 32px rgba(0, 0, 0, 0.6);
+  pointer-events: none;                    /* the title is decor, NOT a button */
+}
+.menu-btn {
+  position: absolute; border: none; background: transparent; cursor: pointer;
+  font-family: "Cinzel", serif; font-size: 4vh; color: rgba(255, 255, 255, 0.92);
+  letter-spacing: 0.12em; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
+  transition: transform 160ms ease, color 160ms ease, text-shadow 160ms ease;
+}
+/* ONE selected state serves mouse hover, keyboard focus, and gamepad alike. */
+.menu-btn.is-selected, .menu-btn:hover, .menu-btn:focus-visible {
+  color: #fff; transform: translateX(0.4em) scale(1.04); outline: none;
+  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 22px rgba(255, 220, 150, 0.8);
+}
+.menu-btn.is-selected::before {
+  content: "❯"; position: absolute; left: -1.1em; opacity: 0.9;
+}
+.menu-btn:active { transform: translateX(0.4em) scale(0.97); }
+.menu-corner {
+  position: absolute; right: 2%; bottom: 2%; font-size: 1.8vh;
+  color: rgba(255, 255, 255, 0.6); pointer-events: none;
+}
+
+/* Entrance choreography — title first, buttons stagger in, corner last.
+   `.is-on` is toggled by setPhase() (see $genex-threejs-game-ui's Motion
+   section); each element stamps its own --i in the HTML above. */
+.screen .stagger { opacity: 0; transform: translateY(12px);
+                   transition: opacity 320ms ease, transform 320ms ease;
+                   transition-delay: calc(var(--i, 0) * 70ms); }
+.screen.is-on .stagger { opacity: 1; transform: none; }
+```
+
+```ts
+// Buttons emit the SAME intents the gameplay input path uses — never a page reload.
+document.getElementById("menu-play")!.addEventListener("click", () => setPhase("playing"));
+document.getElementById("menu-options")!.addEventListener("click", () => setPhase("options"));
+document.getElementById("menu-credits")!.addEventListener("click", () => setPhase("credits"));
+
+// Menus are keyboard-first: ↑/↓ moves the selection, Enter activates.
+// Mouse hover drives the SAME selection, so the chevron never disagrees.
+const btns = [...document.querySelectorAll<HTMLButtonElement>("#screen-menu .menu-btn")];
+let sel = 0;
+function select(i: number): void {
+  sel = (i + btns.length) % btns.length;
+  btns.forEach((b, j) => b.classList.toggle("is-selected", j === sel));
+}
+btns.forEach((b, i) => b.addEventListener("mouseenter", () => select(i)));
+select(0);
+document.addEventListener("keydown", (e) => {
+  if (document.getElementById("screen-menu")!.hidden) return;
+  if (e.key === "ArrowDown") select(sel + 1);
+  else if (e.key === "ArrowUp") select(sel - 1);
+  else if (e.key === "Enter") btns[sel].click();
+});
+```
+
+Layout rules baked into the example:
+
+- **`<video autoplay muted loop playsinline>`** — `muted` is what makes
+  autoplay legal before any user gesture (the menu IS the first screen);
+  `object-fit: cover` + `inset: 0` fills any viewport without letterboxing.
+- **Normalized `%` boxes, kebab-case stable ids.** Buttons are absolutely
+  positioned with percentage boxes so the layout scales with the viewport.
+- **The big title is NOT a button** — a top-center decorative element with
+  `pointer-events: none`. 3–4 action buttons stack below it; a small
+  version/handle string sits in a corner. Layered `text-shadow` beats
+  `-webkit-text-stroke` for weight (a heavy stroke reads as a browser game).
+- **Everything enters choreographed** — nothing may simply appear. Title,
+  then buttons, then corner text, ~70 ms apart.
+- **One visible selection at all times** (chevron + glow above), driven by
+  keyboard AND mouse through the same `select()`.
+- Clicks route to `setPhase()` / game events — the menu renders game state,
+  it never owns a second copy of it.
+
+## Menu sound
+
+The video is necessarily muted, so an unwired menu is SILENT — that reads as
+broken. Three `npx genex sfx` calls (see `$genex-ai-sfx`): a short hover tick
+(wire to `select()`, quiet), a confirm on activate, and a low ambient loop
+matching the scene (wind, surf, candle room tone) started on the first user
+gesture (autoplay policy blocks earlier — a `click`/`keydown` once-listener).
+
+## Pick the fonts
+
+Match the display font to the genre and add its Google Fonts `<link>` to
+`index.html` (otherwise the browser silently falls back to sans-serif and the
+menu looks broken):
+
+| Genre / mood | Display font | Body / small text |
+| --- | --- | --- |
+| Fantasy / RPG | Cinzel | EB Garamond |
+| Sci-fi / racing | Orbitron or Russo One | Exo 2 |
+| Military / action | Black Ops One | Oswald |
+| Retro / 8-bit | Press Start 2P | VT323 |
+| Sport / bold arcade | Anton | Barlow Condensed |
+| Horror / typewriter | Special Elite | Courier Prime |
+| Cozy / casual | Baloo 2 | Nunito |
+| Painterly / adventure | IM Fell English | Crimson Text |
+| Western / rustic | Rye | Bitter |
+| Elegant / noir | Cormorant Garamond | Jost |
+
+The table is a starting point, not a taxonomy — pick by the game's OWN
+register, and browse Google Fonts' display category when none of these fits.
+One display font + one body font per menu. Give text its own contrast against
+the moving video — layered text-shadows or a subtle dark plate (avoid heavy
+text strokes — they read as a browser game, not a title screen).
+
+**Title treatment.** A bare display font is the floor, not the ceiling. Two
+upgrades, in order of effort:
+
+- **Layered CSS (free):** gradient ink via `background-clip: text` +
+  stacked shadows (a tight dark one for contrast, a wide soft one for glow).
+- **A generated logotype (Tier 3 — offer it, don't pre-build):**
+  `npx genex image "the word 'EMBERFALL' as an ornate engraved game logo, <style brief>" --transparent`,
+  cleaned with `--bg-mode glyph` if letter counters get eaten, trimmed with
+  `npx genex ui trim`. Short names (one or two words) come out best.
+
+## Tips
+
+- **Subtle motion beats dramatic.** The clip loops forever — cinematic drift,
+  flicker, and weather read as alive; big camera moves and fast subjects make
+  the loop obvious and exhausting.
+- **One menu = ONE video, generated one-off — not iteratively.** Video
+  generation is strictly rate-limited and takes minutes per attempt. Get the
+  still frame right first (images are cheap to redo), then animate it once.
+- **720p is right.** It's a background under UI; higher resolutions cost more,
+  take longer, and change nothing visible.
+- **Pause/victory/defeat variants reuse the same video — as GRADES.** Same
+  `<video>` element or URL, different emotion via CSS `filter` on the
+  background: pause = a plain dark overlay (`rgba(0,0,0,0.55)`); defeat =
+  `filter: saturate(0.25) brightness(0.55)` with a ~600 ms beat before the
+  buttons stagger in; victory = `filter: saturate(1.15) brightness(1.05)` with
+  the score counting up (tween ~800 ms, never snap). Zero extra generations,
+  three distinct moods.
+- **Lobby screens:** matchmaking status and countdowns come from
+  `$genex-threejs-multiplayer` — render the roster and `players.length /
+  minPlayers` count over the same video, and drive the overlay's dismissal
+  from `mm.matchmaking.status` exactly as that skill mandates.
+
+## Publish checklist
+
+- The mp4 loads from the **URL** the command printed — permanent and CORS-open,
+  identical in local dev, the published game, and remixes. Nothing to commit.
+- Don't copy the video into `public/assets/` — generated assets live in R2.
+- Keep the `muted` attribute — without it, autoplay is blocked and the menu
+  opens on a black rectangle.
+- The Google Fonts `<link>` lives in `index.html`, so it ships with the build.
+
+## Options
+
+- `--frame <url>` (video) — one R2 image URL used as both the first and last
+  frame: the seamless-loop mode. The URL must be one printed by `npx genex image`.
+- `--first-frame <url>` / `--last-frame <url>` (video) — two-frame mode for a
+  genuine state change; expect a loop seam.
+- `--duration <sec>` (video) — 4, 6, or 8 for frame-conditioned clips;
+  default 8.
+- `--aspect 16:9 --quality high` (image) — the right settings for a menu frame.
+- `--no-wait` — enqueue and return immediately with the generation id; pick
+  the result up later with `npx genex wait <id>` (safe to re-run — it attaches
+  to the SAME generation). The default for menu videos: build while it
+  renders. Re-running the GENERATE command, by contrast, creates (and bills)
+  a new one.
+
+## Troubleshooting
+
+- **"Not authorized"** — run `npx @genex-ai/cli-demo@dev init` first (it
+  writes your `GENEX_TOKEN`).
+- **"Prompt rejected"** — the provider's content-safety filter blocked the
+  prompt. Non-retryable; rewrite the wording.
+- **Video takes minutes** — that's normal for video generation; enqueue with
+  `--no-wait` and keep building, then `npx genex wait <id>` for the URL.
+  Never re-run the generate command to "check on" a generation — every run
+  creates (and bills) a new video; only `genex wait` attaches to an existing
+  one.
+- **The loop visibly "jumps"** — the motion prompt wasn't return-to-start
+  (or you used two-frame mode). Re-generate the video with cyclical motion
+  wording; the frame image can be reused as-is.
+- **UI/text baked into the frame** — the frame prompt allowed it. Append the
+  "No UI elements, no text, no buttons in the frame." sentence and regenerate
+  the image.
+- **Black screen instead of video** — the `muted` attribute is missing
+  (autoplay blocked), or the URL isn't the exact one the command printed.

package/templates/skills/genex-ai-video/SKILL.md

@@ -12,7 +12,7 @@ or a video decal.
 ## When to use this vs. a static image or shader
 
 - **Use `npx genex video`** for moving footage you can describe — "static-y CRT
-  news broadcast", "swirling neon portal", "rain running down glass". You get a real
+  news broadcast", "swirling ink in water", "rain running down glass". You get a real
   mp4.
 - **Use `$genex-ai-image`** for a single still picture, or
   `$genex-threejs-procedural-vfx` for parametric real-time effects (particles,
@@ -22,7 +22,7 @@ or a video decal.
 
 ```bash
 npx genex video "<prompt>"
-npx genex video "swirling neon plasma, seamless loop" --loop   # seamless loop for screens/backdrops
+npx genex video "drifting autumn leaves, seamless loop" --loop   # seamless loop for screens/backdrops
 ```
 
 Video takes a **minute or two** end to end (queue + generation). If you're building
@@ -132,10 +132,17 @@ See `$genex-threejs-multiplayer` for the `shared` channel rules and the room API
 - `--loop` — a seamless loop (for screens, ambient backdrops, video decals).
 - `--duration <sec>` — clip length 1–15; default 5. Only raise it when the content
   genuinely needs more — longer clips cost more and take longer.
-- `--no-wait` — enqueue and return immediately (the file won't be downloaded;
-  re-run without `--no-wait` to fetch it). Handy for video since it takes a minute or two.
+- `--frame <url>` — one generated image as BOTH first and last frame — the
+  seamless-loop mode (motion must return to its start).
+- `--first-frame <url>` / `--last-frame <url>` — two-frame motion between two
+  stills (a genuine state change; expect a loop seam).
+- `--no-wait` — enqueue and return immediately, without the URL. Fire-and-forget
+  only: re-running the command creates (and bills) a NEW video.
 - `--api-url <url>` — override the API base (local dev).
 
+Menu backdrops belong to `$genex-ai-menu`; a cohesive art-directed HUD sprite
+set belongs to `$genex-ai-hud` — both build on `npx genex image`/`video`.
+
 ## Troubleshooting
 
 - **"Not authorized"** — run `npx @genex-ai/cli-demo@dev init` first (it writes your `GENEX_TOKEN`).

package/templates/skills/genex-getting-started/SKILL.md

@@ -38,7 +38,7 @@ npx genex skybox "golden hour over mountains"  # a 360° sky + lighting
 npx genex sfx "punchy laser zap" --duration 2  # a sound effect (mp3)
 npx genex texture "mossy cobblestone" --terrain # a tiling surface texture
 npx genex image "vintage travel poster"        # a picture (poster/sign/sprite/decal)
-npx genex video "swirling neon portal" --loop  # a video clip (screen/backdrop)
+npx genex video "waterfall mist drifting" --loop      # a video clip (screen/backdrop)
 ```
 
 (Run them inside your project — the `@genex-ai/cli-demo` dev dependency makes
@@ -46,7 +46,10 @@ npx genex video "swirling neon portal" --loop  # a video clip (screen/backdrop)
 
 Each has a focused skill with the exact loader code — `$genex-ai-model`,
 `$genex-ai-skybox`, `$genex-ai-sfx`, `$genex-ai-texture`, `$genex-ai-image`,
-`$genex-ai-video`.
+`$genex-ai-video`. For generated game UI there are two workflow skills built
+on the same commands: `$genex-ai-menu` (a cinematic menu — looping video
+backdrop + DOM buttons) and `$genex-ai-hud` (a production HUD sprite set with
+masked fills).
 
 ## Identity & saves (every game)