@webjsdev/cli 0.10.40 → 0.10.41

package/templates/GEMINI.md

@@ -0,0 +1,11 @@
+# GEMINI.md
+
+Gemini CLI reads `GEMINI.md`, not `AGENTS.md`, by default, so this file is a
+thin bridge to the single source.
+
+The instructions for this app live in `AGENTS.md` (the cross-agent source) and
+the skill at `.agents/skills/webjs/SKILL.md`. Read `AGENTS.md` first, then the
+skill (it routes to focused references on demand).
+
+To have Gemini read `AGENTS.md` directly instead of this bridge, add it to
+`context.fileName` in `.gemini/settings.json`.

package/templates/gallery/app/apple-icon.ts

@@ -1,4 +1,3 @@
-// webjs-scaffold-placeholder. Metadata route. Keep and adapt it, or prune it
 // (delete this file), then delete this marker line. webjs check fails while the
 // marker remains.
 //

package/templates/gallery/app/examples/todo/page.ts

@@ -1,4 +1,3 @@
-// webjs-scaffold-placeholder. Example gallery route. Keep and adapt it, or prune it (delete this app/examples/todo route, modules/todo, AND the todos table in db/schema.server.ts), then delete this marker line. webjs check fails while the marker remains.
 // A THIN route adapter: app/ is routing only. It fetches the initial data
 // (server-side) via the 'use server' query and renders the interactive
 // component, plus a page `action` for the no-JS write path. All the real logic

package/templates/gallery/app/features/async-render/page.ts

@@ -1,4 +1,3 @@
-// webjs-scaffold-placeholder. Feature gallery route. Keep and adapt it, or prune it (delete this app/features/async-render route AND modules/async-render), then delete this marker line. webjs check fails while the marker remains.
 import { html, Suspense } from '@webjsdev/core';
 import type { Metadata } from '@webjsdev/core';
 import '#modules/async-render/components/server-clock.ts';

package/templates/gallery/app/features/boundaries/page.ts

@@ -1,4 +1,3 @@
-// webjs-scaffold-placeholder. Feature gallery route. Keep and adapt it, or prune it (delete this app/features/boundaries route), then delete this marker line. webjs check fails while the marker remains.
 // Boundaries: the four control-flow throws and their boundary files. A page (or
 // a page `action`) can THROW to short-circuit rendering, and the framework
 // renders the NEAREST matching boundary file in the route's ancestor chain

package/templates/gallery/app/features/broadcast/page.ts

@@ -1,4 +1,3 @@
-// webjs-scaffold-placeholder. Feature gallery route. Keep and adapt it, or prune it (delete this app/features/broadcast route AND modules/broadcast), then delete this marker line. webjs check fails while the marker remains.
 // Broadcast: fan a message out to EVERY client connected to a WebSocket path,
 // not just the sender. The framework auto-registers each connection to its path,
 // so broadcast(path, data) from '@webjsdev/server' reaches all of them. This is

package/templates/gallery/app/features/caching/page.ts

@@ -1,4 +1,3 @@
-// webjs-scaffold-placeholder. Feature gallery route. Keep and adapt it, or prune it (delete this app/features/caching route), then delete this marker line. webjs check fails while the marker remains.
 // Caching: `export const revalidate = N` opts the page into the server HTML
 // response cache, keyed by URL for N seconds. The rendered timestamp below only
 // changes once per window: reload inside 10s and it is identical, reload after

package/templates/gallery/app/features/client-router/page.ts

@@ -1,4 +1,3 @@
-// webjs-scaffold-placeholder. Feature gallery route. Keep and adapt it, or prune it (delete this app/features/client-router route AND its second/ subpage), then delete this marker line. webjs check fails while the marker remains.
 // Client router: automatic. It auto-enables the moment @webjsdev/core loads in
 // the browser (the bundle every component pulls, so any page with a component
 // gets it for free). There is nothing to import. An <a href> to another page

package/templates/gallery/app/features/client-router/second/page.ts

@@ -1,4 +1,3 @@
-// webjs-scaffold-placeholder. Feature gallery route (client-router page two). Pruned together with the parent app/features/client-router route. Delete this marker line once you adapt or remove it. webjs check fails while the marker remains.
 // The soft-navigation target for the client-router demo. A plain page: the
 // router needs no per-page code. The browser Back button restores this page and
 // its scroll position from the client-router snapshot cache.

package/templates/gallery/app/features/components/page.ts

@@ -1,4 +1,3 @@
-// webjs-scaffold-placeholder. Feature gallery route. Keep and adapt it, or prune it (delete this app/features/components route AND modules/components), then delete this marker line. webjs check fails while the marker remains.
 import { html } from '@webjsdev/core';
 import type { Metadata } from '@webjsdev/core';
 import '#modules/components/components/counter-card.ts';

package/templates/gallery/app/features/directives/page.ts

@@ -1,4 +1,3 @@
-// webjs-scaffold-placeholder. Feature gallery route. Keep and adapt it, or prune it (delete this app/features/directives route AND modules/directives), then delete this marker line. webjs check fails while the marker remains.
 import { html } from '@webjsdev/core';
 import type { Metadata } from '@webjsdev/core';
 import '#modules/directives/components/directive-demo.ts';

package/templates/gallery/app/features/env/page.ts

@@ -1,4 +1,3 @@
-// webjs-scaffold-placeholder. Feature gallery route. Keep and adapt it, or prune it (delete this app/features/env route), then delete this marker line. webjs check fails while the marker remains.
 // Environment variables: process.env.X reads are server-only. NODE_ENV is
 // defined on both sides. A name prefixed WEBJS_PUBLIC_ is exposed to the browser
 // through an inline script (no build step); everything else stays server-side

package/templates/gallery/app/features/file-storage/page.ts

@@ -1,4 +1,3 @@
-// webjs-scaffold-placeholder. Feature gallery route. Keep and adapt it, or prune it (delete this app/features/file-storage route AND modules/file-storage), then delete this marker line. webjs check fails while the marker remains.
 // File storage: a no-JS upload. A multipart <form> posts to this page's `action`
 // (the progressive-enhancement write path); the action calls a 'use server'
 // helper that streams the bytes into the FileStore. On success it redirects

package/templates/gallery/app/features/forms/page.ts

@@ -1,4 +1,3 @@
-// webjs-scaffold-placeholder. Feature gallery route. Keep and adapt it, or prune it (delete this app/features/forms route), then delete this marker line. webjs check fails while the marker remains.
 // forms: the no-JS write path. A real <form method="post"> posts to this page's
 // `action` export, and the framework re-renders the SAME page with the result on
 // `actionData`. WHY it matters: the form works with JS OFF (server round-trip),

package/templates/gallery/app/features/metadata/page.ts

@@ -1,4 +1,3 @@
-// webjs-scaffold-placeholder. Feature gallery route. Keep and adapt it, or prune it (delete this app/features/metadata route), then delete this marker line. webjs check fails while the marker remains.
 // Metadata: how a page declares its <title>, description, and Open Graph tags.
 // A static `metadata` export is read as-is. `generateMetadata(ctx)` takes
 // precedence and can read the request (params, searchParams, url) to compute

package/templates/gallery/app/features/optimistic-ui/page.ts

@@ -1,4 +1,3 @@
-// webjs-scaffold-placeholder. Feature gallery route. Keep and adapt it, or prune it (delete this app/features/optimistic-ui route AND modules/optimistic-ui), then delete this marker line. webjs check fails while the marker remains.
 import { html } from '@webjsdev/core';
 import type { Metadata } from '@webjsdev/core';
 import '#modules/optimistic-ui/components/like-button.ts';

package/templates/gallery/app/features/rate-limit/page.ts

@@ -1,4 +1,3 @@
-// webjs-scaffold-placeholder. Feature gallery route. Keep and adapt it, or prune it (delete this app/features/rate-limit route AND modules/rate-limit), then delete this marker line. webjs check fails while the marker remains.
 // Rate limiting: rateLimit() from '@webjsdev/server' is a middleware. It lives in
 // a middleware.ts scoped to the endpoint it protects (here app/features/
 // rate-limit/ping/middleware.ts, so it limits /features/rate-limit/ping WITHOUT

package/templates/gallery/app/features/route-handler/page.ts

@@ -1,4 +1,3 @@
-// webjs-scaffold-placeholder. Feature gallery route. Keep and adapt it, or prune it (delete this app/features/route-handler route, including its data/route.ts handler), then delete this marker line. webjs check fails while the marker remains.
 import { html } from '@webjsdev/core';
 import type { Metadata } from '@webjsdev/core';
 import '#modules/route-handler/components/rich-data.ts';

package/templates/gallery/app/features/routing/page.ts

@@ -1,4 +1,3 @@
-// webjs-scaffold-placeholder. Feature gallery route. Keep and adapt it, or prune it (delete this app/features/routing route), then delete this marker line. webjs check fails while the marker remains.
 // Routing basics: a static page that links to a dynamic route. app/ is routing
 // only; a folder maps to a URL segment, and [id] is a dynamic segment read from
 // `params`. See app/features/routing/[id]/page.ts.

package/templates/gallery/app/features/server-actions/page.ts

@@ -1,4 +1,3 @@
-// webjs-scaffold-placeholder. Feature gallery route. Keep and adapt it, or prune it (delete this app/features/server-actions route AND modules/server-actions), then delete this marker line. webjs check fails while the marker remains.
 import { html } from '@webjsdev/core';
 import type { Metadata } from '@webjsdev/core';
 import '#modules/server-actions/components/greeter.ts';

package/templates/gallery/app/features/service-worker/page.ts

@@ -1,4 +1,3 @@
-// webjs-scaffold-placeholder. Feature gallery route. Keep and adapt it, or prune it (delete this app/features/service-worker route), then delete this marker line. webjs check fails while the marker remains.
 // Service worker: opt-in progressive enhancement. webjs does NOT register one by
 // default (an active SW caches aggressively and would confuse dev). You opt in
 // by adding public/sw.js and registering it from a component's connectedCallback

package/templates/gallery/app/features/sessions/page.ts

@@ -1,4 +1,3 @@
-// webjs-scaffold-placeholder. Feature gallery route. Keep and adapt it, or prune it (delete this app/features/sessions route AND modules/sessions), then delete this marker line. webjs check fails while the marker remains.
 // Sessions: a per-segment middleware.ts applies session() (a signed cookie by
 // default; store-backed for larger sessions), and a route.ts reads/writes it
 // with getSession(req). Session state is per-user, so it lives on the server

package/templates/gallery/app/features/websockets/page.ts

@@ -1,4 +1,3 @@
-// webjs-scaffold-placeholder. Feature gallery route. Keep and adapt it, or prune it (delete this app/features/websockets route AND modules/websockets), then delete this marker line. webjs check fails while the marker remains.
 // WebSockets: a route.ts exports WS(ws, req) for the server endpoint, and a
 // component uses connectWS() to talk to it. WebSockets are inherently JS-only
 // (there is no no-JS fallback for a live socket), so the component degrades to a

package/templates/gallery/app/global-error.ts

@@ -1,4 +1,3 @@
-// webjs-scaffold-placeholder. Keep and adapt it, or prune it (delete this
 // file), then delete this marker line. webjs check fails while the marker
 // remains.
 //

package/templates/gallery/app/global-not-found.ts

@@ -1,4 +1,3 @@
-// webjs-scaffold-placeholder. Keep and adapt it, or prune it (delete this
 // file), then delete this marker line. webjs check fails while the marker
 // remains.
 //

package/templates/gallery/app/icon.ts

@@ -1,4 +1,3 @@
-// webjs-scaffold-placeholder. Metadata route. Keep and adapt it, or prune it
 // (delete this file), then delete this marker line. webjs check fails while the
 // marker remains.
 //

package/templates/gallery/app/manifest.ts

@@ -1,4 +1,3 @@
-// webjs-scaffold-placeholder. Metadata route. Keep and adapt it, or prune it
 // (delete this file), then delete this marker line. webjs check fails while the
 // marker remains.
 //

package/templates/gallery/app/opengraph-image.ts

@@ -1,4 +1,3 @@
-// webjs-scaffold-placeholder. Metadata route. Keep and adapt it, or prune it
 // (delete this file), then delete this marker line. webjs check fails while the
 // marker remains.
 //

package/templates/gallery/app/robots.ts

@@ -1,4 +1,3 @@
-// webjs-scaffold-placeholder. Metadata route. Keep and adapt it, or prune it
 // (delete this file), then delete this marker line. webjs check fails while the
 // marker remains.
 //

package/templates/gallery/app/sitemap.ts

@@ -1,4 +1,3 @@
-// webjs-scaffold-placeholder. Metadata route. Keep and adapt it to your real
 // routes, or prune it (delete this file), then delete this marker line. webjs
 // check fails while the marker remains.
 //

package/templates/gallery/app/twitter-image.ts

@@ -1,4 +1,3 @@
-// webjs-scaffold-placeholder. Metadata route. Keep and adapt it, or prune it
 // (delete this file), then delete this marker line. webjs check fails while the
 // marker remains.
 //

package/templates/public/favicon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" role="img" aria-label="WebJs">
+  <rect width="32" height="32" rx="7" fill="#e9edf0"/>
+  <path d="M8 11.5l4.5 4.5L8 20.5" fill="none" stroke="#1e2226" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>
+  <line x1="15.5" y1="21.5" x2="23" y2="21.5" stroke="#1e2226" stroke-width="2.6" stroke-linecap="round"/>
+</svg>

package/templates/public/sw.js

@@ -4,7 +4,7 @@
  * This adds an offline fallback and an asset cache WITHOUT changing the
  * JavaScript-disabled baseline: with JS off no service worker registers, so
  * pages, links, and forms behave exactly as they do today. It is registered
- * explicitly (see the opt-in snippet in agent-docs/service-worker.md), never
+ * explicitly (see the opt-in snippet in the skill's references/service-worker.md), never
  * automatically.
  *
  * Strategy:

package/templates/scripts/clear-gallery.mjs

@@ -0,0 +1,95 @@
+#!/usr/bin/env node
+// Clear the scaffold's feature gallery to a clean, buildable base.
+//
+// The scaffold ships a browsable gallery (single-concept demos under
+// app/features/, the app/examples/todo app, their modules/, and example
+// metadata routes) so an agent can learn the idioms from real, running code.
+// The gallery is reference, NOT part of your product. Learn from the demos
+// relevant to your task first (the skill at .agents/skills/webjs/ teaches the
+// same patterns and SURVIVES this reset, so nothing is lost), then run this
+// once to shed the gallery, then grow the app in place.
+//
+// It removes the gallery routes + modules + demo metadata routes, resets
+// app/page.ts to a minimal home, and drops the demo `todos` table from the
+// schema. It KEEPS the agent skill (.agents/skills/webjs/), the layout, the
+// database wiring, the theme toggle, and (for the saas template) the auth
+// modules. It is a one-time reset: if the gallery is already gone (no
+// app/features/) it does nothing, so a rerun never clobbers an app you built.
+import { rmSync, existsSync, readFileSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+const root = process.cwd();
+const rm = (p) => { if (existsSync(join(root, p))) { rmSync(join(root, p), { recursive: true, force: true }); return true; } return false; };
+
+// Guard: the gallery is identified by app/features/. If it is absent, the gallery
+// was already cleared (or this is not a gallery scaffold), so exit before any
+// destructive write. This keeps a rerun safe and never clobbers a built app (a
+// customized app/page.ts, a same-named module, or real migrations).
+if (!existsSync(join(root, 'app/features'))) {
+  console.log('No gallery found (app/features/ is absent); nothing to clear.');
+  process.exit(0);
+}
+
+// 1) Gallery route trees + example metadata routes.
+const galleryPaths = [
+  'app/features', 'app/examples', 'app/sitemaps',
+  'app/icon.ts', 'app/apple-icon.ts', 'app/manifest.ts', 'app/opengraph-image.ts',
+  'app/twitter-image.ts', 'app/robots.ts', 'app/sitemap.ts',
+  'app/global-error.ts', 'app/global-not-found.ts',
+];
+// 2) The gallery's feature modules (by name, so saas auth modules survive).
+const galleryModules = [
+  'async-render', 'broadcast', 'caching', 'client-router', 'components',
+  'directives', 'file-storage', 'optimistic-ui', 'rate-limit', 'route-handler',
+  'server-actions', 'sessions', 'todo', 'websockets',
+].map((m) => `modules/${m}`);
+
+let removed = 0;
+for (const p of [...galleryPaths, ...galleryModules]) if (rm(p)) removed++;
+
+// 3) Reset app/page.ts to a minimal home (no gallery grid, no dead links).
+writeFileSync(join(root, 'app/page.ts'), MINIMAL_PAGE());
+
+// 4) Drop the demo `todos` table from the schema (keep everything else).
+const schemaPath = join(root, 'db/schema.server.ts');
+if (existsSync(schemaPath)) {
+  let s = readFileSync(schemaPath, 'utf8');
+  s = s.replace(/\n(?:\/\/[^\n]*\n)*export const todos = table\('todos',[\s\S]*?\n\}\);\n/, '\n');
+  s = s.replace(/defineRelations\(\{ users, todos \}/, 'defineRelations({ users }');
+  writeFileSync(schemaPath, s);
+}
+
+// 5) Drop generated migrations + the dev database so the next db:generate is
+// clean against the reset schema (safe: the scaffold has no real data yet).
+rm('db/migrations');
+for (const f of ['db/dev.db', 'db/dev.db-shm', 'db/dev.db-wal']) rm(f);
+
+console.log(`Gallery cleared (${removed} paths removed). The agent skill and your database wiring are kept.`);
+console.log('Next: regenerate the database (db:generate then db:migrate), then start the dev server and build your app in app/ and modules/.');
+
+function MINIMAL_PAGE() {
+  return `import { html } from '@webjsdev/core';
+import '#components/theme-toggle.ts';
+
+export const metadata = {
+  title: 'Home',
+};
+
+export default function Home() {
+  return html\`
+    <div class="fixed top-4 right-4 z-10"><theme-toggle></theme-toggle></div>
+    <div class="max-w-2xl mx-auto px-6 py-24 flex flex-col items-center text-center gap-6">
+      <h1 class="text-4xl font-bold tracking-tight m-0">Your app</h1>
+      <p class="text-base text-muted-foreground leading-relaxed m-0">
+        The gallery is cleared. This is <code class="text-[0.9em] text-foreground">app/page.ts</code>. Build your
+        app from here. The guide is <code class="text-[0.9em] text-foreground">.agents/skills/webjs/SKILL.md</code>.
+      </p>
+      <nav class="flex items-center gap-5 text-sm text-muted-foreground">
+        <a href="https://docs.webjs.dev" class="hover:text-foreground transition-colors no-underline">Docs</a>
+        <a href="https://github.com/webjsdev/webjs" class="hover:text-foreground transition-colors no-underline">GitHub</a>
+      </nav>
+    </div>
+  \`;
+}
+`;
+}

package/lib/clear-placeholders.js

@@ -1,98 +0,0 @@
-// `webjs check --clear-placeholders`: acknowledge the scaffold gallery in one
-// command instead of hand-editing every demo file. A fresh scaffold trips
-// `no-scaffold-placeholder` on every unadapted file at once, and the rule's
-// sanctioned "deliberately keep it, then delete the marker line" path otherwise
-// means one manual edit per file. This strips the marker comment lines so the
-// gate goes green while the demo CODE is kept verbatim (it does NOT prune the
-// gallery; deleting a demo you do not want stays a deliberate `rm`).
-import { readFileSync, writeFileSync, readdirSync, statSync } from 'node:fs';
-import { join } from 'node:path';
-
-// Assembled so THIS source does not itself carry the contiguous literal (the
-// check scans raw source, and this file ships in the published CLI).
-export const MARKER = 'webjs-scaffold-' + 'placeholder';
-
-const SKIP_DIRS = new Set(['node_modules', '.git', '.webjs', 'graphify-out', 'dist']);
-
-// Every scaffold marker's text ends with this closing clause (wrapped across
-// lines or not), so it precisely bounds the marker sentence. See create.js /
-// api-gallery.js where the markers are emitted.
-const TERMINATOR = 'the marker remains';
-
-// Strip comment punctuation and collapse whitespace so a marker wrapped across
-// several `//` or `<!-- -->` lines can be matched as one normalized sentence.
-const norm = (line) => line.replace(/<!--|-->|\/\//g, ' ').replace(/\s+/g, ' ').trim().toLowerCase();
-const isLineComment = (line) => /^\s*\/\//.test(line);
-
-/**
- * Pure: drop exactly the marker COMMENT that carries the token, not just the
- * token line and NOT the adjacent educational comment/code. The marker is not
- * always one line (the layout footer is a multi-line `<!-- ... -->`, and the
- * global-* markers wrap across `//` lines), and it is often immediately followed
- * by a SEPARATE comment paragraph, so a greedy "remove the whole comment run"
- * over-removes. The marker sentence always ends in TERMINATOR, so extend from
- * the token line only to the line that completes that clause (or, if the clause
- * is somehow absent, remove just the token line rather than over-reaching).
- * @param {string} content
- * @param {string} [marker]
- * @returns {{ content: string, removed: number, markers: number }}
- */
-export function stripPlaceholderMarkers(content, marker = MARKER) {
-  const lines = content.split('\n');
-  const kept = [];
-  let removed = 0;
-  let markers = 0;
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i];
-    if (!line.includes(marker)) { kept.push(line); continue; }
-    markers += 1;
-    let acc = norm(line);
-    let end = i;
-    if (!acc.includes(TERMINATOR)) {
-      // Extend over the marker's own comment (contiguous `//`, or up to the HTML
-      // `-->`) until the closing clause completes. Stop at the comment boundary
-      // if the clause never appears, so an edited marker under-removes, never
-      // eats the following paragraph or code.
-      const html = line.includes('<!--');
-      for (let j = i + 1; j < lines.length; j++) {
-        if (!html && !isLineComment(lines[j])) break;
-        acc += ' ' + norm(lines[j]);
-        end = j;
-        if (acc.includes(TERMINATOR) || (html && lines[j].includes('-->'))) break;
-      }
-      if (!acc.includes(TERMINATOR) && !html) end = i; // clause absent: token line only
-    }
-    removed += end - i + 1;
-    i = end;
-  }
-  return { content: kept.join('\n'), removed, markers };
-}
-
-/**
- * Walk an app root, strip the marker comments in place, and return a per-file
- * report of how many markers were cleared (and how many lines that removed).
- * Only `.ts`/`.js`/`.mts`/`.mjs` files that actually carry the marker are
- * rewritten.
- * @param {string} root
- * @param {{ marker?: string, write?: (path: string, content: string) => void }} [opts]
- * @returns {Array<{ file: string, markers: number, removed: number }>}
- */
-export function clearPlaceholders(root, opts = {}) {
-  const marker = opts.marker ?? MARKER;
-  const write = opts.write ?? ((p, c) => writeFileSync(p, c));
-  const report = [];
-  (function walk(dir) {
-    for (const name of readdirSync(dir)) {
-      if (SKIP_DIRS.has(name)) continue;
-      const full = join(dir, name);
-      if (statSync(full).isDirectory()) { walk(full); continue; }
-      if (!/\.m?[jt]s$/.test(name)) continue;
-      const src = readFileSync(full, 'utf8');
-      if (!src.includes(marker)) continue;
-      const { content, removed, markers } = stripPlaceholderMarkers(src, marker);
-      write(full, content);
-      report.push({ file: full, markers, removed });
-    }
-  })(root);
-  return report;
-}

package/lib/design-bar.js

@@ -1,67 +0,0 @@
-// The design bar the scaffold sets (AGENTS.md / CONVENTIONS.md item 6): a
-// delivered UI app must have its OWN design, not the scaffold's. The scaffold is
-// a teaching artifact for how to USE the framework, never a starting design.
-// This lives in one place so the `--clear-placeholders` reminder and the
-// `webjs doctor` advisory speak with one voice (the clear command strips the
-// layout marker that carried this reminder just-in-time, so it is re-surfaced
-// there, and doctor catches an app that kept the shell anyway).
-
-import { existsSync } from 'node:fs';
-import { join } from 'node:path';
-
-/**
- * True when the app has a root layout, i.e. it is a UI app the design bar
- * applies to. The `api` template ships no `app/layout`, so the reminder /
- * advisory stay quiet there.
- * @param {string} appDir
- * @returns {boolean}
- */
-export function hasUiLayout(appDir) {
-  return ['ts', 'js', 'mts', 'mjs'].some((e) => existsSync(join(appDir, 'app', `layout.${e}`)));
-}
-
-export const DESIGN_REMINDER =
-  '\nDesign: the scaffold is a TEACHING artifact, not a starting design.\n' +
-  'A delivered UI app must have its OWN design chosen from what the app IS:\n' +
-  'layout, palette, typography, icons, spacing, and chrome.\n' +
-  '- Layout: app/layout.ts ships as a MINIMAL shell (no header / nav / footer /\n' +
-  '  reading column). Design your own from what the app IS. LAYOUT-REFERENCE.md\n' +
-  '  shows the mechanics; do not reproduce its example header verbatim.\n' +
-  '- Palette: the design-token NAMES (--background, --primary, --card, ...) are\n' +
-  '  infrastructure to keep, but their COLOR VALUES are yours. Set a distinctive\n' +
-  '  palette that fits the app; keeping the starter orange is not a redesign.\n' +
-  '- Verify by USING it: render the app and play through every state, and confirm\n' +
-  '  nothing resizes or shifts as it fills (even, stable cells). A glance at the\n' +
-  '  empty first paint is not enough; the layout bugs show up mid-interaction.\n' +
-  'See AGENTS.md / CONVENTIONS.md item 6.';
-
-// Distinctive strings that indicate an app kept scaffold-specific chrome or the
-// unmodified starter palette, rather than designing its own. Counting them is an
-// objective proxy for "did not own the design" without judging taste. NOTE: the
-// theme apparatus (`--header-h`, the `theme-toggle` import) is KEEP-infrastructure
-// the minimal shell ships in every app, so it is NOT a tell (it fired on every
-// finished app and made the advisory nag forever). The tells that remain are
-// genuine "reproduced the scaffold" signals: the exact 760px reading column, the
-// scaffold's own attribution footer, and the two exact default palette VALUES (a
-// verbatim match means the palette was never changed; a recolor does not match).
-const SHELL_TELLS = [
-  { key: 'reading-column (max-w-[760px])', re: /max-w-\[760px\]/ },
-  // Specific to the scaffold's own attribution (its footer links webjs.dev and
-  // says "Built with webjs"). A bare "Built with ..." is a common bespoke footer,
-  // so it is NOT a tell on its own.
-  { key: 'attribution footer', re: /webjs\.dev|Built with webjs/ },
-  { key: 'default scaffold primary color', re: /--primary:\s*oklch\(0\.7\s+0\.16\s+52\)/ },
-  { key: 'default scaffold card color', re: /--card:\s*oklch\(0\.18\s+0\.01\s+55\)/ },
-];
-
-/**
- * The scaffold-shell tells present in a root-layout source string. Two or more
- * is a strong signal the app kept the scaffold chrome instead of designing its
- * own. Returns the human-readable keys that matched.
- * @param {string} layoutSrc
- * @returns {string[]}
- */
-export function scaffoldShellTells(layoutSrc) {
-  if (typeof layoutSrc !== 'string' || !layoutSrc) return [];
-  return SHELL_TELLS.filter((t) => t.re.test(layoutSrc)).map((t) => t.key);
-}

package/templates/.claude/hooks/design-review-before-stop.sh

@@ -1,36 +0,0 @@
-#!/usr/bin/env bash
-#
-# Claude Code Stop hook: render-and-look before finishing UI work.
-#
-# An AI agent writes CSS blind (it never renders), and layout / design defects
-# have NO failure signal: `webjs check` and `typecheck` pass, the app runs. So a
-# collapsed board, uneven cells, a layout that resizes as it fills, or an app
-# that just kept the scaffold's design all ship silently. The one thing that
-# catches them is looking at the rendered pixels. This backstop fires at the END
-# of a turn that touched UI files and reminds you to render the app and inspect
-# every state (see the webjs-design-review skill + CONVENTIONS item 6) before you
-# stop. Loop-safe (fires at most once per stop) and skipped when no UI changed.
-#
-# Disable with WEBJS_NO_DESIGN_STOP=1.
-
-set -uo pipefail
-payload=$(cat 2>/dev/null || true)
-
-if [ "${WEBJS_NO_DESIGN_STOP:-}" = "1" ]; then exit 0; fi
-active=$(printf '%s' "$payload" | jq -r '.stop_hook_active // false' 2>/dev/null || echo false)
-if [ "$active" = "true" ]; then exit 0; fi
-if ! git rev-parse --is-inside-work-tree >/dev/null 2>&1; then exit 0; fi
-
-# Did this turn touch UI surface? A component, a page/layout, or app styling.
-ui_changed=$(git status --porcelain --untracked-files=all 2>/dev/null \
-  | grep -vE '(^|/)(node_modules|\.webjs)(/|$)' \
-  | grep -cE '(app/.*(page|layout)\.(t|j)sx?$)|(components/.*\.(t|j)sx?$)|(modules/.*components/.*\.(t|j)sx?$)|(\.css$)' || true)
-
-if [ -z "$ui_changed" ] || [ "$ui_changed" -lt 1 ]; then exit 0; fi
-
-reason="You changed UI in this turn but a design/layout defect has no failing test: check and typecheck pass even when a component collapses, cells are uneven, the layout shifts as it fills, or the app just resembles the scaffold. Before you stop, RENDER the app and LOOK at it: start it (webjs dev / start), open the routes you changed in a browser, and PLAY THROUGH every state (fill the board, win, draw, reload). Confirm (1) nothing collapses or resizes, cells stay equal; (2) the design is the app's OWN (layout, palette, typography, chrome), not the scaffold shell or its default colors; (3) it looks correct in light AND dark. See the webjs-design-review skill and CONVENTIONS item 6. If you already rendered and verified it this turn, say so in your final message. Disable this backstop with WEBJS_NO_DESIGN_STOP=1."
-
-jq -n --arg r "$reason" '{decision: "block", reason: $r}' 2>/dev/null \
-  || printf '{"decision":"block","reason":%s}\n' "$(printf '%s' "$reason" | jq -Rs . 2>/dev/null || echo '""')"
-
-exit 0

package/templates/.claude/hooks/route-skills.sh

@@ -1,35 +0,0 @@
-#!/usr/bin/env bash
-#
-# UserPromptSubmit hook: route a UI-building prompt to the design-review
-# skill, so it is never silently skipped.
-#
-# Why this exists: a Skill is model-invoked, so it fires only when the model
-# judges the prompt to match, and that judgement is exactly what fails for
-# design work ("build a tic-tac-toe app" reads as backend/logic work and the
-# render-and-look step gets skipped, shipping a collapsed or scaffold-looking
-# UI). A hook is deterministic: it runs on every prompt, decides from the
-# prompt TEXT, and injects a directive the model reads before acting. It
-# cannot invoke the Skill itself (the harness forbids that); the strongest
-# lever is UserPromptSubmit additionalContext.
-#
-# Output contract: print one JSON object with
-# hookSpecificOutput.additionalContext and exit 0. Never block (exit 2 would
-# erase the prompt); routing informs, it does not gate.
-
-set -euo pipefail
-payload=$(cat)
-prompt=$(printf '%s' "$payload" | jq -r '.prompt // empty' 2>/dev/null || true)
-[ -z "$prompt" ] && exit 0
-lc=$(printf '%s' "$prompt" | tr '[:upper:]' '[:lower:]')
-has() { printf '%s' "$lc" | grep -Eq "$1"; }
-
-# UI / app-building intent: any request to build/create/change something the
-# user will SEE. Broad on purpose (a false positive just reminds you to look).
-if has '(build|create|make|add|design|redesign|style|implement|scaffold).{0,40}(app|page|layout|component|screen|view|board|form|dashboard|ui|site|game|list|table|card|nav|header|footer|modal|button|theme)' \
-   || has '(make|help me|let'\''s).{0,20}(look|prettier|beautiful|nicer|design)' \
-   || has '(tic.?tac.?toe|todo|blog|dashboard|landing|storefront|kanban|chat)'; then
-  ctx="ROUTING: this prompt involves UI work. Invoke the webjs-design-review skill (Skill tool) as part of this task: after building/changing any page, layout, or component and BEFORE reporting the work done, render the app in a real browser and LOOK at every state, confirming the app owns its design (layout + palette + type, not the scaffold), nothing collapses or resizes, cells stay even, and light + dark both read. A design/layout defect has NO failing test, so the render-and-look is the only check that catches it."
-  jq -n --arg c "$ctx" '{hookSpecificOutput: {hookEventName: "UserPromptSubmit", additionalContext: $c}}'
-fi
-
-exit 0