@eventmodelers/cli 2.0.42 → 2.0.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eventmodelers/cli",
-  "version": "2.0.42",
+  "version": "2.0.44",
   "description": "Eventmodelers CLI — real-time Claude agent + skills for Claude Code, for any stack (Node, Supabase, Axon, OpenCQRS, UmaDB, Kurrent, or modeling-only)",
   "type": "module",
   "bin": {

package/stacks/modeling-kit/templates/.claude/skills/html-screen/SKILL.md

@@ -57,7 +57,7 @@ Guidelines:
 - **Each page may be at most 6000 characters** (the full markup string, including inline styles). The server rejects a longer page with `400 HTML_SCREEN_PAGE_TOO_LONG` (`context: {pageIndex, length, maxLength}`) and saves nothing — the render call fails as a whole. Check each page's length before rendering; if one is over, trim it (fewer inline styles, framework classes instead of custom CSS, fewer repeated sample rows) or split the content into another page. Adding a mark also counts toward the limit, since it adds attributes to the page's markup.
 - Inline styles (`style="..."`) are the simplest way to keep each page self-contained.
 - No `<script>` tags, no inline event handlers (`onclick`, `onload`, ...), no `javascript:` URIs — these are stripped server-side from every page before persisting regardless of what's sent. This is a static visual mockup, not an interactive prototype.
-- A real page background (e.g. a light gray full-bleed background behind a centered white card) reads more realistically than a bare form floating on white.
+- **Full width by default — no fixed or maximum widths.** Unless the user explicitly asks for a specific width (e.g. "mobile layout", "420px card"), the page fills the whole screen. The preview, the movie strip and the board all render a page at a simulated device width and scale it to the frame, so the top-level container must stretch to the full width: no `max-width`, no fixed `width: 420px` / `w-[420px]` / `.container` / `mw-*` on the outermost element, and no auto-centered narrow card. Use `width:100%` (or nothing, a block element is already full width) with ordinary padding. A narrow card in a wide viewport shows as a small box in the corner. Inner pieces may be sized relative to the page (grid columns, percentages, `flex`), and a form may sit in a full-width section, but nothing at the top level caps the width. A real page background (e.g. a light gray full-bleed background) reads more realistically than a bare form floating on white.
 - Don't add `<html>`/`<head>`/`<body>` tags to a page — every page is a body-only fragment. The canvas wraps each page in its own `<html><head>` (stylesheet + resize script) `<body>...</body></html>` at render time, so anything sent is placed inside that generated `<body>`.
 - **CSS framework — one per screen.** Each screen loads exactly one CSS framework (or none) into every page's `<head>`, chosen by the user in the HTML editor's header and stored on the node as `cssFrameworks` (an array holding one id: `"bulma"`, `"bootstrap"` or `"tailwind"`; `[]` = none). A screen where nothing was chosen gets **Bulma** — that is the default for new screens. Write markup for the framework the screen uses, and never mix classes from several frameworks in one screen:
   - **Bulma 0.9.4** (default) — classes like `title`, `button`, `is-primary`, `field`/`control`/`input` work out of the box. Note headings need a size modifier too, e.g. `class="title is-1"` — a bare `title` class alone is always 2rem regardless of the tag (`h1` vs `h2` etc.).