agentful 0.1.5 → 0.2.1

package/dist/index.cjs

@@ -6,9 +6,16 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
 var __commonJS = (cb, mod) => function __require() {
   return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
 };
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from))
@@ -3026,6 +3033,72 @@ var require_commander = __commonJS({
   }
 });
 
+// src/branding.ts
+function banner() {
+  return [
+    paint.primary(paint.bold("agentful")) + paint.dim(` v${VERSION}`),
+    paint.dim(brand.tagline)
+  ].join("\n");
+}
+var VERSION, brand, useColor, wrap, paint, sym, ui;
+var init_branding = __esm({
+  "src/branding.ts"() {
+    "use strict";
+    VERSION = "0.2.1" ? "0.2.1" : null.version;
+    brand = {
+      name: "agentful",
+      // the command users type
+      displayName: "Agentful",
+      // the product, in prose
+      tagline: "Agentful in your terminal",
+      docsUrl: "https://agentful.dev",
+      userAgent: `agentful-cli/${VERSION} (+https://agentful.dev/cli)`
+    };
+    useColor = process.stdout.isTTY && !process.env.NO_COLOR;
+    wrap = (code) => (s) => useColor ? `\x1B[${code}m${s}\x1B[0m` : s;
+    paint = {
+      primary: wrap("38;5;135"),
+      // violet — agentful accent
+      accent: wrap("36"),
+      // cyan — URLs, code
+      success: wrap("32"),
+      warn: wrap("33"),
+      error: wrap("31"),
+      dim: wrap("2"),
+      bold: wrap("1")
+    };
+    sym = {
+      ok: paint.success("\u2714"),
+      fail: paint.error("\u2716"),
+      arrow: paint.primary("\u2192"),
+      dot: paint.dim("\xB7")
+    };
+    ui = {
+      info(msg) {
+        console.log(`${sym.dot} ${msg}`);
+      },
+      step(msg) {
+        console.log(`${sym.arrow} ${msg}`);
+      },
+      ok(msg) {
+        console.log(`${sym.ok} ${msg}`);
+      },
+      warn(msg) {
+        console.log(`${paint.warn("!")} ${msg}`);
+      },
+      fail(msg) {
+        console.error(`${sym.fail} ${paint.error(msg)}`);
+      },
+      url(url) {
+        return paint.accent(url);
+      },
+      code(s) {
+        return paint.accent(s);
+      }
+    };
+  }
+});
+
 // node_modules/ignore/index.js
 var require_ignore = __commonJS({
   "node_modules/ignore/index.js"(exports2, module2) {
@@ -3414,6 +3487,75 @@ var require_ignore = __commonJS({
   }
 });
 
+// src/branding/logo.txt
+var logo_default;
+var init_logo = __esm({
+  "src/branding/logo.txt"() {
+    logo_default = "      \u2584\u2588\u2588\u2588\u2588\u2584    \u2584\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\n      \u2588\u2588\u2588\u2588\u2588\u2588\u2584  \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2580\n     \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2584 \u2588\u2588\u2588\u2588\n    \u2588\u2588\u2588\u2588  \u2588\u2588\u2588\u2588\u2584\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\n   \u2588\u2588\u2588\u2588\u2580   \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2580\n  \u2588\u2588\u2588\u2588\u2580    \u2580\u2588\u2588\u2588\u2588\u2588\u2588\u2588\n \u2588\u2588\u2588\u2588\u2580      \u2580\u2588\u2588\u2588\u2588\u2588\u2588\n\u2588\u2588\u2588\u2588\u2580        \u2580\u2588\u2588\u2588\u2588\u2588\n";
+  }
+});
+
+// src/branding/plugin.ts
+var plugin_exports = {};
+__export(plugin_exports, {
+  brandingPluginSource: () => brandingPluginSource
+});
+function brandingPluginSource() {
+  const logoLiteral = JSON.stringify(logo_default.replace(/\n+$/, "").split("\n"));
+  return `// Generated by ${brand.name} v${VERSION} \u2014 do not edit; rewritten on every start.
+const LOGO = ${logoLiteral}
+
+const plugin = {
+  id: 'agentful-branding',
+  tui(api) {
+    api.slots.register({
+      order: 1,
+      slots: {
+        home_logo(ctx) {
+          const accent = ctx && ctx.theme ? ctx.theme.primary : undefined
+          const muted = ctx && ctx.theme ? ctx.theme.textMuted : undefined
+          return (
+            <box flexDirection="column">
+              {LOGO.map((line) => (
+                <text fg={accent}>{line}</text>
+              ))}
+              <text> </text>
+              <text fg={muted}>${brand.tagline}</text>
+            </box>
+          )
+        },
+        home_footer(ctx) {
+          const muted = ctx && ctx.theme ? ctx.theme.textMuted : undefined
+          return <text fg={muted}>${brand.name} v${VERSION}</text>
+        },
+        // Bottom of the sidebar \u2014 this is where the engine prints its own
+        // name and engine version (for example "OpenCode 1.18.18"); ours replaces it.
+        sidebar_footer(ctx) {
+          const accent = ctx && ctx.theme ? ctx.theme.primary : undefined
+          const muted = ctx && ctx.theme ? ctx.theme.textMuted : undefined
+          return (
+            <text>
+              <span fg={accent}>${brand.displayName}</span>
+              <span fg={muted}> v${VERSION}</span>
+            </text>
+          )
+        },
+      },
+    })
+  },
+}
+
+export default plugin
+`;
+}
+var init_plugin = __esm({
+  "src/branding/plugin.ts"() {
+    "use strict";
+    init_branding();
+    init_logo();
+  }
+});
+
 // node_modules/commander/esm.mjs
 var import_index = __toESM(require_commander(), 1);
 var {
@@ -3431,75 +3573,21 @@ var {
   Help
 } = import_index.default;
 
-// src/branding.ts
-var VERSION = "0.1.5" ? "0.1.5" : null.version;
-var brand = {
-  name: "agentful",
-  // the command users type
-  displayName: "Agentful",
-  // the product, in prose
-  tagline: "Agentful in your terminal",
-  docsUrl: "https://agentful.dev",
-  userAgent: `agentful-cli/${VERSION} (+https://agentful.dev/cli)`
-};
-var useColor = process.stdout.isTTY && !process.env.NO_COLOR;
-var wrap = (code) => (s) => useColor ? `\x1B[${code}m${s}\x1B[0m` : s;
-var paint = {
-  primary: wrap("38;5;135"),
-  // violet — agentful accent
-  accent: wrap("36"),
-  // cyan — URLs, code
-  success: wrap("32"),
-  warn: wrap("33"),
-  error: wrap("31"),
-  dim: wrap("2"),
-  bold: wrap("1")
-};
-var sym = {
-  ok: paint.success("\u2714"),
-  fail: paint.error("\u2716"),
-  arrow: paint.primary("\u2192"),
-  dot: paint.dim("\xB7")
-};
-function banner() {
-  return [
-    paint.primary(paint.bold("agentful")) + paint.dim(` v${VERSION}`),
-    paint.dim(brand.tagline)
-  ].join("\n");
-}
-var ui = {
-  info(msg) {
-    console.log(`${sym.dot} ${msg}`);
-  },
-  step(msg) {
-    console.log(`${sym.arrow} ${msg}`);
-  },
-  ok(msg) {
-    console.log(`${sym.ok} ${msg}`);
-  },
-  warn(msg) {
-    console.log(`${paint.warn("!")} ${msg}`);
-  },
-  fail(msg) {
-    console.error(`${sym.fail} ${paint.error(msg)}`);
-  },
-  url(url) {
-    return paint.accent(url);
-  },
-  code(s) {
-    return paint.accent(s);
-  }
-};
+// src/index.ts
+init_branding();
 
 // src/lib/api.ts
+init_branding();
 var ApiError = class extends Error {
-  constructor(status, code, message) {
+  constructor(status, code, message, details) {
     super(message);
     this.status = status;
     this.code = code;
+    this.details = details;
   }
   status;
   code;
+  details;
 };
 async function request(url, opts = {}) {
   const headers = {
@@ -3528,12 +3616,26 @@ async function request(url, opts = {}) {
   }
   if (!resp.ok) {
     const code = String(data?.error || `http_${resp.status}`);
-    const message = String(data?.message || data?.error || text?.slice(0, 300) || `Request failed with ${resp.status}`);
-    throw new ApiError(resp.status, code, message);
+    let message = String(data?.message || data?.error || text?.slice(0, 300) || `Request failed with ${resp.status}`);
+    let details;
+    if (data?.details !== void 0 && data?.details !== null) {
+      const raw = typeof data.details === "string" ? data.details : JSON.stringify(data.details);
+      if (raw) {
+        details = raw;
+        const shown = raw.length > 4e3 ? `${raw.slice(0, 4e3)}
+\u2026 (truncated)` : raw;
+        if (shown !== message) message += `
+${shown}`;
+      }
+    }
+    throw new ApiError(resp.status, code, message, details);
   }
   return data ?? {};
 }
 
+// src/commands/login.ts
+init_branding();
+
 // src/lib/auth.ts
 var import_node_os2 = require("os");
 
@@ -3637,6 +3739,9 @@ function clearAuth() {
   return true;
 }
 
+// src/lib/auth.ts
+init_branding();
+
 // src/lib/browser.ts
 var import_node_child_process2 = require("child_process");
 function openInBrowser(url) {
@@ -3754,6 +3859,7 @@ async function loginCommand(opts) {
 }
 
 // src/commands/logout.ts
+init_branding();
 async function logoutCommand() {
   if (clearAuth()) {
     ui.ok("Logged out \u2014 local credentials removed.");
@@ -3763,6 +3869,7 @@ async function logoutCommand() {
 }
 
 // src/commands/whoami.ts
+init_branding();
 async function whoamiCommand() {
   const auth = await ensureAuth();
   console.log(auth.email);
@@ -3770,8 +3877,9 @@ async function whoamiCommand() {
 }
 
 // src/commands/init.ts
-var import_node_path4 = require("path");
+var import_node_path5 = require("path");
 var import_promises = require("readline/promises");
+init_branding();
 
 // src/lib/project.ts
 var import_node_fs2 = require("fs");
@@ -3812,15 +3920,544 @@ async function createProject(auth, title, cwd = process.cwd()) {
   return config;
 }
 
+// src/lib/starters.ts
+var import_node_fs3 = require("fs");
+var import_node_path4 = require("path");
+
+// src/generated/starters.json
+var starters_default = {
+  $comment: "GENERATED by cli/scripts/sync-starters.mjs from templates/starters/ \u2014 do not edit by hand. platform-contract/check-parity.py guards drift.",
+  schema_version: 1,
+  starters: {
+    nextjs: {
+      framework: "nextjs",
+      files: {
+        ".gitignore": "# Dependencies\nnode_modules/\n.pnpm-store/\n\n# Build output\ndist/\nbuild/\nout/\n.next/\n.nuxt/\n.output/\n.svelte-kit/\n.astro/\n.vercel/\n.netlify/\n.wrangler/\n.turbo/\n\n# Environment\n.env\n.env.local\n.env.*.local\n\n# IDE\n.idea/\n.vscode/\n*.swp\n*.swo\n*~\n\n# OS\n.DS_Store\nThumbs.db\n\n# Logs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Test coverage\ncoverage/\n.nyc_output/\n\n# Cache\n.cache/\n.parcel-cache/\n",
+        "eslint.config.mjs": 'import { defineConfig, globalIgnores } from "eslint/config";\nimport nextVitals from "eslint-config-next/core-web-vitals";\nimport nextTs from "eslint-config-next/typescript";\n\nconst eslintConfig = defineConfig([\n  ...nextVitals,\n  ...nextTs,\n  // Override default ignores of eslint-config-next.\n  globalIgnores([\n    // Default ignores of eslint-config-next:\n    ".next/**",\n    "out/**",\n    "build/**",\n    "next-env.d.ts",\n  ]),\n]);\n\nexport default eslintConfig;\n',
+        "next-env.d.ts": '/// <reference types="next" />\n/// <reference types="next/image-types/global" />\nimport "./.next/types/routes.d.ts";\n\n// NOTE: This file should not be edited\n// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.\n',
+        "next.config.ts": "import type { NextConfig } from 'next'\n\nconst nextConfig: NextConfig = {\n  // Static export \u2014 the platform serves files, there is no Next.js server.\n  output: 'export',\n  // Emits `about/index.html` instead of `about.html`, which a plain static\n  // host can resolve without rewrite rules.\n  trailingSlash: true,\n  // next/image needs a server to optimise; without this the export fails.\n  images: {\n    unoptimized: true,\n  },\n}\n\nexport default nextConfig\n",
+        "package.json": '{\n  "name": "agentful-starter-nextjs",\n  "private": true,\n  "version": "0.1.0",\n  "scripts": {\n    "dev": "next dev",\n    "build": "next build",\n    "start": "next start",\n    "verify": "tsc --noEmit && eslint . --max-warnings 0 && next build"\n  },\n  "dependencies": {\n    "next": "16.2.9",\n    "react": "19.2.4",\n    "react-dom": "19.2.4"\n  },\n  "devDependencies": {\n    "@tailwindcss/postcss": "^4",\n    "@types/node": "^20",\n    "@types/react": "^19",\n    "@types/react-dom": "^19",\n    "eslint": "^9",\n    "eslint-config-next": "16.2.9",\n    "tailwindcss": "^4",\n    "typescript": "^5"\n  }\n}\n',
+        "postcss.config.mjs": "const config = {\n  plugins: {\n    '@tailwindcss/postcss': {},\n  },\n}\n\nexport default config\n",
+        "public/favicon.svg": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-label="Site icon">\n  <rect width="32" height="32" rx="7" fill="#4f46e5"/>\n  <path d="M10 22V10h5.2a4.2 4.2 0 0 1 0 8.4H13" fill="none" stroke="#fff" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>\n  <path d="M16 18.4 22 22" fill="none" stroke="#fff" stroke-width="2.6" stroke-linecap="round"/>\n</svg>\n',
+        "src/app/globals.css": '@import "tailwindcss";\n\n/* Design tokens. Tailwind v4 turns every entry here into a utility\n   (--color-brand -> bg-brand/text-brand), so restyle the project by editing\n   these values rather than sprinkling hex codes through the components. */\n@theme {\n  --color-brand: #0070f3;\n  --color-brand-contrast: #ffffff;\n  --color-surface: #ffffff;\n  --color-surface-muted: #f5f5f7;\n  --color-ink: #111827;\n  --color-ink-muted: #6b7280;\n  --radius-card: 0.75rem;\n}\n\n:root {\n  color-scheme: light;\n  font-family: Inter, ui-sans-serif, system-ui, sans-serif;\n  --app-bg: #ffffff;\n  --app-fg: #111827;\n}\n\n/* An opaque background on html, body is mandatory \u2014 the page is never\n   transparent. Keep this rule when you restyle. */\nhtml, body {\n  margin: 0;\n  min-height: 100%;\n  min-width: 320px;\n  background: var(--app-bg);\n  color: var(--app-fg);\n}\n\n/* Keyboard focus baseline. Components may override it, but never remove it:\n   the platform appends a generic fallback to any project whose CSS contains\n   no `:focus` rule at all, and a real one belongs here. */\n:focus-visible {\n  outline: 2px solid var(--color-brand, currentColor);\n  outline-offset: 2px;\n}\n',
+        "src/app/layout.tsx": `import type { Metadata } from 'next'
+import './globals.css'
+
+export const metadata: Metadata = {
+  title: 'Replace this title',
+  description: 'Replace this with a one-sentence description of the site.',
+  icons: { icon: '/favicon.svg' },
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="en" className="h-full antialiased">
+      <body className="min-h-full flex flex-col">{children}</body>
+    </html>
+  )
+}
+`,
+        "src/app/page.tsx": `type Feature = {
+  title: string
+  body: string
+}
+
+// Replace this data with the real content of the project.
+const FEATURES: Feature[] = [
+  { title: 'First point', body: 'Replace this with a benefit the visitor cares about.' },
+  { title: 'Second point', body: 'Keep each card to one idea and one sentence.' },
+  { title: 'Third point', body: 'Delete a card if the project only needs two.' },
+]
+
+export default function Home() {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <header className="border-b border-black/10">
+        <div className="mx-auto max-w-5xl px-4 sm:px-6 py-4 flex items-center justify-between gap-6">
+          <a href="#main" className="font-semibold text-ink rounded">
+            Brand
+          </a>
+          <nav aria-label="Main">
+            <ul className="flex items-center gap-6">
+              <li>
+                <a href="#features" className="text-ink-muted hover:text-ink rounded">
+                  Features
+                </a>
+              </li>
+              <li>
+                <a href="#contact" className="text-ink-muted hover:text-ink rounded">
+                  Contact
+                </a>
+              </li>
+            </ul>
+          </nav>
+        </div>
+      </header>
+
+      <main id="main" className="flex-1">
+        <section className="mx-auto max-w-5xl px-4 sm:px-6 py-16 sm:py-24">
+          <h1 className="text-4xl sm:text-5xl font-semibold tracking-tight text-ink text-balance">
+            Replace this headline
+          </h1>
+          <p className="mt-4 max-w-2xl text-lg text-ink-muted">
+            Replace this paragraph with one sentence that says what the product does
+            and who it is for.
+          </p>
+          <a
+            href="#contact"
+            className="mt-8 inline-flex items-center rounded-card bg-brand px-5 py-3 font-medium text-brand-contrast hover:opacity-90"
+          >
+            Primary action
+          </a>
+        </section>
+
+        <section id="features" className="mx-auto max-w-5xl px-4 sm:px-6 pb-16 sm:pb-24">
+          <h2 className="text-2xl font-semibold tracking-tight text-ink">
+            Replace this section title
+          </h2>
+          <ul className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            {FEATURES.map((feature) => (
+              <li key={feature.title} className="rounded-card bg-surface-muted p-6">
+                <h3 className="font-medium text-ink">{feature.title}</h3>
+                <p className="mt-2 text-ink-muted">{feature.body}</p>
+              </li>
+            ))}
+          </ul>
+        </section>
+      </main>
+
+      <footer id="contact" className="border-t border-black/10">
+        <div className="mx-auto max-w-5xl px-4 sm:px-6 py-8 text-sm text-ink-muted">
+          Replace this footer.
+        </div>
+      </footer>
+    </div>
+  )
+}
+`,
+        "tsconfig.json": '{\n  "compilerOptions": {\n    "target": "ES2017",\n    "lib": ["dom", "dom.iterable", "esnext"],\n    "allowJs": true,\n    "skipLibCheck": true,\n    "strict": true,\n    "noEmit": true,\n    "esModuleInterop": true,\n    "module": "esnext",\n    "moduleResolution": "bundler",\n    "resolveJsonModule": true,\n    "isolatedModules": true,\n    "jsx": "react-jsx",\n    "incremental": true,\n    "plugins": [{ "name": "next" }],\n    "paths": { "@/*": ["./src/*"] }\n  },\n  "include": [\n    "next-env.d.ts",\n    "**/*.ts",\n    "**/*.tsx",\n    "**/*.mts",\n    ".next/types/**/*.ts",\n    ".next/dev/types/**/*.ts"\n  ],\n  "exclude": ["node_modules"]\n}\n'
+      }
+    },
+    react: {
+      framework: "vite",
+      files: {
+        ".gitignore": "# Dependencies\nnode_modules/\n.pnpm-store/\n\n# Build output\ndist/\nbuild/\nout/\n.next/\n.nuxt/\n.output/\n.svelte-kit/\n.astro/\n.vercel/\n.netlify/\n.wrangler/\n.turbo/\n\n# Environment\n.env\n.env.local\n.env.*.local\n\n# IDE\n.idea/\n.vscode/\n*.swp\n*.swo\n*~\n\n# OS\n.DS_Store\nThumbs.db\n\n# Logs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Test coverage\ncoverage/\n.nyc_output/\n\n# Cache\n.cache/\n.parcel-cache/\n",
+        "eslint.config.mjs": "import tseslint from 'typescript-eslint'\nimport reactHooks from 'eslint-plugin-react-hooks'\n\nexport default tseslint.config(\n  { ignores: ['dist'] },\n  {\n    files: ['**/*.{ts,tsx}'],\n    extends: [tseslint.configs.base],\n    plugins: { 'react-hooks': reactHooks },\n    rules: {\n      'react-hooks/rules-of-hooks': 'error',\n      'react-hooks/exhaustive-deps': 'error',\n      'react-hooks/set-state-in-effect': 'error',\n      'react-hooks/no-deriving-state-in-effects': 'error',\n      '@typescript-eslint/no-unused-vars': [\n        'error',\n        { argsIgnorePattern: '^_', varsIgnorePattern: '^_' },\n      ],\n    },\n  },\n)\n",
+        "index.html": '<!doctype html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8" />\n    <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n    <meta name="description" content="Replace this with a one-sentence description of the app." />\n    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />\n    <title>Replace this title</title>\n  </head>\n  <body>\n    <div id="root"></div>\n    <script type="module" src="./src/main.tsx"></script>\n  </body>\n</html>\n',
+        "package.json": '{\n  "name": "agentful-starter-react",\n  "private": true,\n  "version": "0.1.0",\n  "type": "module",\n  "scripts": {\n    "dev": "vite",\n    "build": "vite build",\n    "preview": "vite preview",\n    "verify": "tsc --noEmit && eslint . --max-warnings 0 && vite build"\n  },\n  "dependencies": {\n    "react": "^19.0.0",\n    "react-dom": "^19.0.0"\n  },\n  "devDependencies": {\n    "@tailwindcss/vite": "^4.0.0",\n    "@types/react": "^19.0.0",\n    "@types/react-dom": "^19.0.0",\n    "@vitejs/plugin-react": "^4.3.4",\n    "eslint": "^9.0.0",\n    "eslint-plugin-react-hooks": "^6.0.0",\n    "tailwindcss": "^4.0.0",\n    "typescript": "^5.0.0",\n    "typescript-eslint": "^8.0.0",\n    "vite": "^6.0.0"\n  }\n}\n',
+        "public/favicon.svg": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-label="Site icon">\n  <rect width="32" height="32" rx="7" fill="#4f46e5"/>\n  <path d="M10 22V10h5.2a4.2 4.2 0 0 1 0 8.4H13" fill="none" stroke="#fff" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>\n  <path d="M16 18.4 22 22" fill="none" stroke="#fff" stroke-width="2.6" stroke-linecap="round"/>\n</svg>\n',
+        "src/App.tsx": `import { useState } from 'react'
+
+type Feature = {
+  title: string
+  body: string
+}
+
+// Replace this data with the real content of the project.
+const FEATURES: Feature[] = [
+  { title: 'First point', body: 'Replace this with a benefit the visitor cares about.' },
+  { title: 'Second point', body: 'Keep each card to one idea and one sentence.' },
+  { title: 'Third point', body: 'Delete a card if the project only needs two.' },
+]
+
+const NAV = [
+  { href: '#features', label: 'Features' },
+  { href: '#contact', label: 'Contact' },
+]
+
+function App() {
+  const [navOpen, setNavOpen] = useState(false)
+
+  return (
+    <div className="min-h-screen flex flex-col">
+      <header className="border-b border-black/10">
+        <div className="mx-auto max-w-5xl px-4 sm:px-6 py-4 flex items-center justify-between gap-4">
+          <a
+            href="#main"
+            className="font-semibold text-ink rounded focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
+          >
+            Brand
+          </a>
+
+          <nav aria-label="Main" className="hidden sm:block">
+            <ul className="flex items-center gap-6">
+              {NAV.map((item) => (
+                <li key={item.href}>
+                  <a
+                    href={item.href}
+                    className="text-ink-muted hover:text-ink rounded focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
+                  >
+                    {item.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+
+          <button
+            type="button"
+            className="sm:hidden rounded px-3 py-2 text-ink border border-black/10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
+            aria-expanded={navOpen}
+            aria-controls="mobile-nav"
+            onClick={() => setNavOpen((open) => !open)}
+          >
+            Menu
+          </button>
+        </div>
+
+        {navOpen && (
+          <nav id="mobile-nav" aria-label="Main" className="sm:hidden border-t border-black/10">
+            <ul className="mx-auto max-w-5xl px-4 py-2 flex flex-col">
+              {NAV.map((item) => (
+                <li key={item.href}>
+                  <a
+                    href={item.href}
+                    className="block py-2 text-ink-muted hover:text-ink rounded focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
+                    onClick={() => setNavOpen(false)}
+                  >
+                    {item.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        )}
+      </header>
+
+      <main id="main" className="flex-1">
+        <section className="mx-auto max-w-5xl px-4 sm:px-6 py-16 sm:py-24">
+          <h1 className="text-4xl sm:text-5xl font-semibold tracking-tight text-ink text-balance">
+            Replace this headline
+          </h1>
+          <p className="mt-4 max-w-2xl text-lg text-ink-muted">
+            Replace this paragraph with one sentence that says what the product does
+            and who it is for.
+          </p>
+          <a
+            href="#contact"
+            className="mt-8 inline-flex items-center rounded-card bg-brand px-5 py-3 font-medium text-brand-contrast hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
+          >
+            Primary action
+          </a>
+        </section>
+
+        <section id="features" className="mx-auto max-w-5xl px-4 sm:px-6 pb-16 sm:pb-24">
+          <h2 className="text-2xl font-semibold tracking-tight text-ink">Replace this section title</h2>
+          <ul className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            {FEATURES.map((feature) => (
+              <li key={feature.title} className="rounded-card bg-surface-muted p-6">
+                <h3 className="font-medium text-ink">{feature.title}</h3>
+                <p className="mt-2 text-ink-muted">{feature.body}</p>
+              </li>
+            ))}
+          </ul>
+        </section>
+      </main>
+
+      <footer id="contact" className="border-t border-black/10">
+        <div className="mx-auto max-w-5xl px-4 sm:px-6 py-8 text-sm text-ink-muted">
+          Replace this footer.
+        </div>
+      </footer>
+    </div>
+  )
+}
+
+export default App
+`,
+        "src/index.css": '@import "tailwindcss";\n\n/* Design tokens. Tailwind v4 turns every entry here into a utility\n   (--color-brand -> bg-brand/text-brand), so restyle the project by editing\n   these values rather than sprinkling hex codes through the components. */\n@theme {\n  --color-brand: #4f46e5;\n  --color-brand-contrast: #ffffff;\n  --color-surface: #ffffff;\n  --color-surface-muted: #f5f5f7;\n  --color-ink: #111827;\n  --color-ink-muted: #6b7280;\n  --radius-card: 0.75rem;\n}\n\n:root {\n  color-scheme: light;\n  font-family: Inter, ui-sans-serif, system-ui, sans-serif;\n  --app-bg: #ffffff;\n  --app-fg: #111827;\n}\n\n/* An opaque background on html, body is mandatory \u2014 the page is never\n   transparent. Keep this rule when you restyle. */\nhtml, body {\n  margin: 0;\n  min-height: 100%;\n  min-width: 320px;\n  background: var(--app-bg);\n  color: var(--app-fg);\n}\n\n/* Keyboard focus baseline. Components may override it, but never remove it:\n   the platform appends a generic fallback to any project whose CSS contains\n   no `:focus` rule at all, and a real one belongs here. */\n:focus-visible {\n  outline: 2px solid var(--color-brand, currentColor);\n  outline-offset: 2px;\n}\n',
+        "src/main.tsx": "import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App'\nimport './index.css'\n\nReactDOM.createRoot(document.getElementById('root')!).render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n)\n",
+        "src/vite-env.d.ts": '/// <reference types="vite/client" />\n',
+        "tsconfig.json": '{\n  "compilerOptions": {\n    "target": "ES2020",\n    "useDefineForClassFields": true,\n    "lib": ["ES2020", "DOM", "DOM.Iterable"],\n    "module": "ESNext",\n    "skipLibCheck": true,\n    "moduleResolution": "bundler",\n    "allowImportingTsExtensions": true,\n    "resolveJsonModule": true,\n    "isolatedModules": true,\n    "noEmit": true,\n    "jsx": "react-jsx",\n    "strict": true\n  },\n  "include": ["src"]\n}\n',
+        "vite.config.ts": "import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nimport tailwindcss from '@tailwindcss/vite'\n\nexport default defineConfig({\n  base: '/',\n  plugins: [tailwindcss(), react()],\n})\n"
+      }
+    },
+    vue: {
+      framework: "vite",
+      files: {
+        ".gitignore": "# Dependencies\nnode_modules/\n.pnpm-store/\n\n# Build output\ndist/\nbuild/\nout/\n.next/\n.nuxt/\n.output/\n.svelte-kit/\n.astro/\n.vercel/\n.netlify/\n.wrangler/\n.turbo/\n\n# Environment\n.env\n.env.local\n.env.*.local\n\n# IDE\n.idea/\n.vscode/\n*.swp\n*.swo\n*~\n\n# OS\n.DS_Store\nThumbs.db\n\n# Logs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Test coverage\ncoverage/\n.nyc_output/\n\n# Cache\n.cache/\n.parcel-cache/\n",
+        "eslint.config.mjs": "import tseslint from 'typescript-eslint'\nimport vue from 'eslint-plugin-vue'\n\nexport default tseslint.config(\n  { ignores: ['dist'] },\n  {\n    files: ['**/*.ts'],\n    extends: [tseslint.configs.base],\n    rules: {\n      '@typescript-eslint/no-unused-vars': [\n        'error',\n        { argsIgnorePattern: '^_', varsIgnorePattern: '^_' },\n      ],\n    },\n  },\n  ...vue.configs['flat/essential'],\n  {\n    files: ['**/*.vue'],\n    languageOptions: { parserOptions: { parser: tseslint.parser } },\n    rules: {\n      'vue/multi-word-component-names': 'off',\n    },\n  },\n)\n",
+        "index.html": '<!doctype html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8" />\n    <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n    <meta name="description" content="Replace this with a one-sentence description of the app." />\n    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />\n    <title>Replace this title</title>\n  </head>\n  <body>\n    <div id="app"></div>\n    <script type="module" src="./src/main.ts"></script>\n  </body>\n</html>\n',
+        "package.json": '{\n  "name": "agentful-starter-vue",\n  "private": true,\n  "version": "0.1.0",\n  "type": "module",\n  "scripts": {\n    "dev": "vite",\n    "build": "vite build",\n    "preview": "vite preview",\n    "verify": "vue-tsc --noEmit && eslint . --max-warnings 0 && vite build"\n  },\n  "dependencies": {\n    "vue": "^3.5.0"\n  },\n  "devDependencies": {\n    "@tailwindcss/vite": "^4.0.0",\n    "@vitejs/plugin-vue": "^6.0.0",\n    "eslint": "^9.0.0",\n    "eslint-plugin-vue": "^10.0.0",\n    "tailwindcss": "^4.0.0",\n    "typescript": "^5.0.0",\n    "typescript-eslint": "^8.0.0",\n    "vite": "^6.0.0",\n    "vue-tsc": "^2.2.0"\n  }\n}\n',
+        "public/favicon.svg": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-label="Site icon">\n  <rect width="32" height="32" rx="7" fill="#4f46e5"/>\n  <path d="M10 22V10h5.2a4.2 4.2 0 0 1 0 8.4H13" fill="none" stroke="#fff" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/>\n  <path d="M16 18.4 22 22" fill="none" stroke="#fff" stroke-width="2.6" stroke-linecap="round"/>\n</svg>\n',
+        "src/App.vue": `<script setup lang="ts">
+import { ref } from 'vue'
+
+type Feature = {
+  title: string
+  body: string
+}
+
+// Replace this data with the real content of the project.
+const features: Feature[] = [
+  { title: 'First point', body: 'Replace this with a benefit the visitor cares about.' },
+  { title: 'Second point', body: 'Keep each card to one idea and one sentence.' },
+  { title: 'Third point', body: 'Delete a card if the project only needs two.' },
+]
+
+const nav = [
+  { href: '#features', label: 'Features' },
+  { href: '#contact', label: 'Contact' },
+]
+
+const navOpen = ref(false)
+</script>
+
+<template>
+  <div class="min-h-screen flex flex-col">
+    <header class="border-b border-black/10">
+      <div class="mx-auto max-w-5xl px-4 sm:px-6 py-4 flex items-center justify-between gap-4">
+        <a href="#main" class="font-semibold text-ink rounded">Brand</a>
+
+        <nav aria-label="Main" class="hidden sm:block">
+          <ul class="flex items-center gap-6">
+            <li v-for="item in nav" :key="item.href">
+              <a :href="item.href" class="text-ink-muted hover:text-ink rounded">{{ item.label }}</a>
+            </li>
+          </ul>
+        </nav>
+
+        <button
+          type="button"
+          class="sm:hidden rounded px-3 py-2 text-ink border border-black/10"
+          :aria-expanded="navOpen"
+          aria-controls="mobile-nav"
+          @click="navOpen = !navOpen"
+        >
+          Menu
+        </button>
+      </div>
+
+      <nav v-if="navOpen" id="mobile-nav" aria-label="Main" class="sm:hidden border-t border-black/10">
+        <ul class="mx-auto max-w-5xl px-4 py-2 flex flex-col">
+          <li v-for="item in nav" :key="item.href">
+            <a
+              :href="item.href"
+              class="block py-2 text-ink-muted hover:text-ink rounded"
+              @click="navOpen = false"
+            >{{ item.label }}</a>
+          </li>
+        </ul>
+      </nav>
+    </header>
+
+    <main id="main" class="flex-1">
+      <section class="mx-auto max-w-5xl px-4 sm:px-6 py-16 sm:py-24">
+        <h1 class="text-4xl sm:text-5xl font-semibold tracking-tight text-ink text-balance">
+          Replace this headline
+        </h1>
+        <p class="mt-4 max-w-2xl text-lg text-ink-muted">
+          Replace this paragraph with one sentence that says what the product does
+          and who it is for.
+        </p>
+        <a
+          href="#contact"
+          class="mt-8 inline-flex items-center rounded-card bg-brand px-5 py-3 font-medium text-brand-contrast hover:opacity-90"
+        >
+          Primary action
+        </a>
+      </section>
+
+      <section id="features" class="mx-auto max-w-5xl px-4 sm:px-6 pb-16 sm:pb-24">
+        <h2 class="text-2xl font-semibold tracking-tight text-ink">Replace this section title</h2>
+        <ul class="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          <li v-for="feature in features" :key="feature.title" class="rounded-card bg-surface-muted p-6">
+            <h3 class="font-medium text-ink">{{ feature.title }}</h3>
+            <p class="mt-2 text-ink-muted">{{ feature.body }}</p>
+          </li>
+        </ul>
+      </section>
+    </main>
+
+    <footer id="contact" class="border-t border-black/10">
+      <div class="mx-auto max-w-5xl px-4 sm:px-6 py-8 text-sm text-ink-muted">
+        Replace this footer.
+      </div>
+    </footer>
+  </div>
+</template>
+`,
+        "src/env.d.ts": '/// <reference types="vite/client" />\n',
+        "src/main.ts": "import { createApp } from 'vue'\nimport App from './App.vue'\nimport './style.css'\n\ncreateApp(App).mount('#app')\n",
+        "src/shims-vue.d.ts": "/* Lets plain `tsc` resolve `*.vue` imports.\n *\n * Load-bearing: the platform's prebuild gate runs `tsc --noEmit`, never\n * `vue-tsc`. Without this shim it stops at\n *   src/main.ts: error TS2307: Cannot find module './App.vue'\n * and every build fails on a phantom error.\n *\n * The shim types an SFC as a generic component, so `tsc` checks all `.ts`\n * files properly but not the internals of a `.vue` file. `npm run verify`\n * runs `vue-tsc --noEmit`, which does check those \u2014 use it before finishing.\n */\ndeclare module '*.vue' {\n  import type { DefineComponent } from 'vue'\n  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>\n  export default component\n}\n",
+        "src/style.css": '@import "tailwindcss";\n\n/* Design tokens. Tailwind v4 turns every entry here into a utility\n   (--color-brand -> bg-brand/text-brand), so restyle the project by editing\n   these values rather than sprinkling hex codes through the components. */\n@theme {\n  --color-brand: #41b883;\n  --color-brand-contrast: #ffffff;\n  --color-surface: #ffffff;\n  --color-surface-muted: #f5f5f7;\n  --color-ink: #111827;\n  --color-ink-muted: #6b7280;\n  --radius-card: 0.75rem;\n}\n\n:root {\n  color-scheme: light;\n  font-family: Inter, ui-sans-serif, system-ui, sans-serif;\n  --app-bg: #ffffff;\n  --app-fg: #111827;\n}\n\n/* An opaque background on html, body is mandatory \u2014 the page is never\n   transparent. Keep this rule when you restyle. */\nhtml, body {\n  margin: 0;\n  min-height: 100%;\n  min-width: 320px;\n  background: var(--app-bg);\n  color: var(--app-fg);\n}\n\n/* Keyboard focus baseline. Components may override it, but never remove it:\n   the platform appends a generic fallback to any project whose CSS contains\n   no `:focus` rule at all, and a real one belongs here. */\n:focus-visible {\n  outline: 2px solid var(--color-brand, currentColor);\n  outline-offset: 2px;\n}\n',
+        "tsconfig.json": '{\n  "compilerOptions": {\n    "target": "ES2020",\n    "useDefineForClassFields": true,\n    "module": "ESNext",\n    "lib": ["ES2020", "DOM", "DOM.Iterable"],\n    "skipLibCheck": true,\n    "moduleResolution": "bundler",\n    "allowImportingTsExtensions": true,\n    "resolveJsonModule": true,\n    "isolatedModules": true,\n    "noEmit": true,\n    "jsx": "preserve",\n    "strict": true\n  },\n  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]\n}\n',
+        "vite.config.ts": "import { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\nimport tailwindcss from '@tailwindcss/vite'\n\nexport default defineConfig({\n  base: '/',\n  plugins: [tailwindcss(), vue()],\n})\n"
+      }
+    },
+    vanilla: {
+      framework: "vanilla",
+      files: {
+        ".gitignore": ".DS_Store\nnode_modules/\n*.log\n",
+        "assets/favicon.svg": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-label="Site icon">\n  <rect width="32" height="32" rx="7" fill="#2f5bea"/>\n  <path d="M10 21.5 16 9l6 12.5h-3.1L16 15.4l-2.9 6.1z" fill="#fff"/>\n</svg>\n',
+        "css/style.css": "/* Site styles. Tokens live in tokens.css and are loaded before this file. */\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nhtml,\nbody {\n  min-height: 100%;\n  margin: 0;\n  /* Opaque, always: a transparent page adopts the host background and the\n   * text can disappear entirely on a dark preview. */\n  background: var(--color-bg);\n  color: var(--color-fg);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  line-height: var(--leading-body);\n  -webkit-text-size-adjust: 100%;\n}\n\nbody {\n  overflow-x: hidden; /* no horizontal scroll at any breakpoint */\n}\n\nh1,\nh2,\nh3 {\n  margin: 0 0 var(--space-4);\n  font-family: var(--font-heading);\n  line-height: var(--leading-heading);\n  text-wrap: balance;\n}\n\nh1 { font-size: var(--text-h1); }\nh2 { font-size: var(--text-h2); }\nh3 { font-size: var(--text-h3); }\n\np {\n  margin: 0 0 var(--space-4);\n}\n\na {\n  color: var(--color-accent);\n}\n\nimg,\nsvg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n/* Visible focus for keyboard users \u2014 never remove this without a replacement. */\n:focus-visible {\n  outline: 2px solid var(--color-accent);\n  outline-offset: 2px;\n  border-radius: 4px;\n}\n\n.skip-link {\n  position: absolute;\n  left: var(--space-4);\n  top: calc(var(--space-4) * -4);\n  z-index: 10;\n  padding: var(--space-2) var(--space-4);\n  background: var(--color-accent);\n  color: var(--color-accent-contrast);\n  border-radius: var(--radius);\n  text-decoration: none;\n  transition: top 0.15s ease;\n}\n\n.skip-link:focus {\n  top: var(--space-4);\n}\n\n/* \u2500\u2500 Layout \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.container {\n  width: 100%;\n  max-width: var(--container-max);\n  margin-inline: auto;\n  padding-inline: var(--space-4);\n}\n\n.section {\n  padding-block: var(--space-section);\n}\n\n.section--muted {\n  background: var(--color-surface);\n}\n\n.prose {\n  max-width: var(--measure);\n}\n\n.grid {\n  display: grid;\n  gap: var(--space-6);\n}\n\n.grid--cards {\n  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));\n}\n\n/* \u2500\u2500 Components \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.site-header {\n  border-bottom: var(--border);\n  background: var(--color-bg);\n}\n\n.header-bar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding-block: var(--space-4);\n}\n\n.brand {\n  font-weight: 700;\n  text-decoration: none;\n  color: inherit;\n}\n\n.nav-toggle {\n  display: none;\n  padding: var(--space-2) var(--space-3);\n  font: inherit;\n  color: inherit;\n  background: transparent;\n  border: var(--border);\n  border-radius: var(--radius);\n  cursor: pointer;\n}\n\n.nav-list {\n  display: flex;\n  gap: var(--space-6);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.nav-list a {\n  color: inherit;\n  text-decoration: none;\n}\n\n.nav-list a:hover {\n  color: var(--color-accent);\n}\n\n.hero {\n  padding-block: var(--space-section);\n}\n\n.hero__inner {\n  max-width: var(--measure);\n}\n\n.lede {\n  font-size: var(--text-lede);\n  color: var(--color-muted);\n}\n\n.button {\n  display: inline-block;\n  padding: var(--space-3) var(--space-6);\n  background: var(--color-accent);\n  color: var(--color-accent-contrast);\n  border-radius: var(--radius);\n  font-weight: 600;\n  text-decoration: none;\n}\n\n.button:hover {\n  filter: brightness(1.08);\n}\n\n.card {\n  padding: var(--space-6);\n  background: var(--color-bg);\n  border: var(--border);\n  border-radius: var(--radius-lg);\n  box-shadow: var(--shadow);\n}\n\n.card h3 {\n  margin-bottom: var(--space-2);\n}\n\n.card p:last-child {\n  margin-bottom: 0;\n}\n\n.site-footer {\n  padding-block: var(--space-8);\n  border-top: var(--border);\n  color: var(--color-muted);\n}\n\n.site-footer p {\n  margin: 0;\n}\n\n/* \u2500\u2500 Reveal on scroll \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n/* Hidden ONLY when JS is running: main.js sets the `js` class on <html>. With\n * JS off (or if the script fails) the content stays visible instead of the\n * page rendering blank. Never write `.reveal { opacity: 0 }` unguarded. */\n\n.js .reveal {\n  opacity: 0;\n  transform: translateY(12px);\n  transition: opacity 0.5s ease, transform 0.5s ease;\n}\n\n.js .reveal.is-visible {\n  opacity: 1;\n  transform: none;\n}\n\n/* \u2500\u2500 Responsive \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n@media (max-width: 40rem) {\n  .nav-toggle {\n    display: block;\n  }\n\n  .site-nav {\n    display: none;\n    flex-basis: 100%;\n  }\n\n  .site-nav.is-open {\n    display: block;\n  }\n\n  .header-bar {\n    flex-wrap: wrap;\n  }\n\n  .nav-list {\n    flex-direction: column;\n    gap: var(--space-3);\n    padding-block: var(--space-4);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n    scroll-behavior: auto !important;\n  }\n}\n",
+        "css/tokens.css": '/* Design tokens.\n *\n * One place for colour, spacing, type and radius. Change the values here and\n * the whole site follows \u2014 that is the point of this file.\n *\n * ARITHMETIC: CSS has no implicit maths. A value like\n *     padding: var(--space-4) * 2      <- INVALID, the browser drops the\n *                                         WHOLE declaration and the element\n *                                         silently loses its padding\n * must be written with calc():\n *     padding: calc(var(--space-4) * 2)\n * The derived tokens below show the correct form.\n */\n\n:root {\n  /* Colour \u2014 an opaque page background is mandatory, never transparent. */\n  --color-bg: #ffffff;\n  --color-fg: #111827;\n  --color-muted: #4b5563;\n  --color-surface: #f7f8fa;\n  --color-border: #e4e7ec;\n  --color-accent: #2f5bea;\n  --color-accent-contrast: #ffffff;\n\n  /* Spacing scale. */\n  --space-1: 0.25rem;\n  --space-2: 0.5rem;\n  --space-3: 0.75rem;\n  --space-4: 1rem;\n  --space-6: 1.5rem;\n  --space-8: 2rem;\n  --space-12: 3rem;\n  /* Derived values use calc() \u2014 see the note at the top of this file. */\n  --space-section: calc(var(--space-12) * 2);\n\n  /* Type. */\n  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;\n  --font-heading: var(--font-body);\n  --text-base: 1rem;\n  --text-lede: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);\n  --text-h3: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);\n  --text-h2: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);\n  --text-h1: clamp(2rem, 1.4rem + 3vw, 3.5rem);\n  --leading-body: 1.6;\n  --leading-heading: 1.15;\n\n  /* Shape. */\n  --radius: 10px;\n  --radius-lg: calc(var(--radius) * 2);\n  --border: 1px solid var(--color-border);\n  --shadow: 0 1px 2px rgb(17 24 39 / 6%), 0 8px 24px rgb(17 24 39 / 6%);\n\n  /* Layout. */\n  --container-max: 72rem;\n  --measure: 68ch;\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --color-bg: #0f1117;\n    --color-fg: #f3f4f6;\n    --color-muted: #a8b0bd;\n    --color-surface: #171a22;\n    --color-border: #262b36;\n    --color-accent: #7d9bff;\n    --color-accent-contrast: #0f1117;\n    --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 35%);\n  }\n}\n',
+        "index.html": '<!doctype html>\n<html lang="en" class="no-js">\n  <head>\n    <meta charset="UTF-8" />\n    <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n    <meta name="description" content="Replace this with a one-sentence description of the site." />\n    <link rel="icon" href="./assets/favicon.svg" type="image/svg+xml" />\n    <link rel="stylesheet" href="./css/tokens.css" />\n    <link rel="stylesheet" href="./css/style.css" />\n    <title>Replace this title</title>\n  </head>\n  <body>\n    <a class="skip-link" href="#main">Skip to content</a>\n\n    <header class="site-header">\n      <div class="container header-bar">\n        <a class="brand" href="./index.html">Brand</a>\n        <button\n          class="nav-toggle"\n          type="button"\n          aria-expanded="false"\n          aria-controls="primary-nav"\n        >\n          <span class="nav-toggle__label">Menu</span>\n        </button>\n        <nav id="primary-nav" class="site-nav" aria-label="Primary">\n          <ul class="nav-list">\n            <li><a href="#features">Features</a></li>\n            <li><a href="#about">About</a></li>\n            <li><a href="#contact">Contact</a></li>\n          </ul>\n        </nav>\n      </div>\n    </header>\n\n    <main id="main">\n      <section class="hero">\n        <div class="container hero__inner">\n          <h1>Replace this headline</h1>\n          <p class="lede">\n            Replace this supporting sentence with the real value proposition.\n          </p>\n          <a class="button" href="#contact">Primary action</a>\n        </div>\n      </section>\n\n      <section id="features" class="section">\n        <div class="container">\n          <h2>Section heading</h2>\n          <div class="grid grid--cards">\n            <article class="card reveal">\n              <h3>Card heading</h3>\n              <p>Replace this card with real content.</p>\n            </article>\n            <article class="card reveal">\n              <h3>Card heading</h3>\n              <p>Replace this card with real content.</p>\n            </article>\n            <article class="card reveal">\n              <h3>Card heading</h3>\n              <p>Replace this card with real content.</p>\n            </article>\n          </div>\n        </div>\n      </section>\n\n      <section id="about" class="section section--muted">\n        <div class="container prose">\n          <h2>Section heading</h2>\n          <p>Replace this paragraph with real content.</p>\n        </div>\n      </section>\n\n      <section id="contact" class="section">\n        <div class="container prose">\n          <h2>Get in touch</h2>\n          <p>Replace this paragraph with real content.</p>\n        </div>\n      </section>\n    </main>\n\n    <footer class="site-footer">\n      <div class="container">\n        <p>&copy; <span data-current-year>2026</span> Brand. All rights reserved.</p>\n      </div>\n    </footer>\n\n    <script type="module" src="./js/main.js"></script>\n  </body>\n</html>\n',
+        "js/main.js": `/* Entry module.
+ *
+ * index.html loads this with <script type="module" src="./js/main.js"></script>.
+ * The \`type="module"\` is what makes the import below legal \u2014 without it the
+ * browser throws "Cannot use import statement outside a module" and NOTHING on
+ * the page runs. Keep it on every script that imports or exports.
+ */
+
+import { initNav, initReveal, setCurrentYear } from './ui.js';
+
+// Tell CSS that JS is alive. Anything hidden by default must be hidden behind
+// this class, so a script failure leaves the content visible instead of blank.
+document.documentElement.classList.remove('no-js');
+document.documentElement.classList.add('js');
+
+initNav();
+initReveal();
+setCurrentYear();
+`,
+        "js/ui.js": `/* Small, self-contained UI behaviours.
+ *
+ * Every function is a NAMED EXPORT and main.js imports it by that name. When
+ * you add a behaviour, export it here and import it there \u2014 if the two names
+ * disagree the browser throws
+ *   "The requested module './ui.js' does not provide an export named '...'"
+ * and the whole page stops running.
+ */
+
+/** Mobile navigation toggle, wired to aria-expanded for screen readers. */
+export function initNav() {
+  const toggle = document.querySelector('.nav-toggle');
+  const nav = document.querySelector('#primary-nav');
+  if (!toggle || !nav) return;
+
+  toggle.addEventListener('click', () => {
+    const open = nav.classList.toggle('is-open');
+    toggle.setAttribute('aria-expanded', String(open));
+  });
+}
+
+/** Fade sections in as they scroll into view; no-op when motion is reduced. */
+export function initReveal() {
+  const targets = document.querySelectorAll('.reveal');
+  if (!targets.length) return;
+
+  const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  if (reduced || !('IntersectionObserver' in window)) {
+    targets.forEach((element) => element.classList.add('is-visible'));
+    return;
+  }
+
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (!entry.isIntersecting) return;
+        entry.target.classList.add('is-visible');
+        observer.unobserve(entry.target);
+      });
+    },
+    { rootMargin: '0px 0px -10% 0px' },
+  );
+
+  targets.forEach((element) => observer.observe(element));
+}
+
+/** Fill every [data-current-year] element, so the footer never goes stale. */
+export function setCurrentYear() {
+  const year = String(new Date().getFullYear());
+  document
+    .querySelectorAll('[data-current-year]')
+    .forEach((element) => {
+      element.textContent = year;
+    });
+}
+`
+      }
+    }
+  }
+};
+
+// src/lib/starters.ts
+var STARTERS = starters_default.starters;
+var STARTER_NAMES = Object.keys(STARTERS);
+var IGNORABLE = /* @__PURE__ */ new Set([".git", ".agentful", ".DS_Store"]);
+function materializeStarter(name, targetDir, projectName) {
+  const starter = STARTERS[name];
+  if (!starter) {
+    throw new ApiError(
+      0,
+      "unknown_template",
+      `Unknown template '${name}'. Available: ${STARTER_NAMES.join(", ")}.`
+    );
+  }
+  const blockers = (0, import_node_fs3.existsSync)(targetDir) ? (0, import_node_fs3.readdirSync)(targetDir).filter((entry) => !IGNORABLE.has(entry)) : [];
+  if (blockers.length > 0) {
+    throw new ApiError(
+      0,
+      "directory_not_empty",
+      `This directory is not empty (found ${blockers.slice(0, 3).join(", ")}${blockers.length > 3 ? ", \u2026" : ""}). \`init --template\` scaffolds into an empty directory only \u2014 it never overwrites your files.
+Pass a new folder name instead: \`agentful init --template ${name} my-app\` (creates it for you).`
+    );
+  }
+  let written = 0;
+  for (const [rel, content] of Object.entries(starter.files)) {
+    const abs = (0, import_node_path4.join)(targetDir, rel);
+    (0, import_node_fs3.mkdirSync)((0, import_node_path4.dirname)(abs), { recursive: true });
+    let body = content;
+    if (rel === "package.json") {
+      try {
+        const pkg = JSON.parse(content);
+        pkg.name = slugify(projectName) || pkg.name;
+        body = JSON.stringify(pkg, null, 2) + "\n";
+      } catch {
+      }
+    }
+    (0, import_node_fs3.writeFileSync)(abs, body);
+    written++;
+  }
+  return { written, framework: starter.framework };
+}
+function slugify(value) {
+  return value.toLowerCase().replace(/[^a-z0-9-]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 80);
+}
+function prepareScaffoldDirectory(baseDir, directory) {
+  const target = (0, import_node_path4.resolve)(baseDir, directory);
+  (0, import_node_fs3.mkdirSync)(target, { recursive: true });
+  return target;
+}
+
 // src/commands/init.ts
-async function initCommand(opts) {
+async function initCommand(opts, directory) {
   console.log(banner());
+  if (opts.template && opts.link) {
+    throw new ApiError(
+      0,
+      "invalid_options",
+      "--template scaffolds a new project and cannot be combined with --link."
+    );
+  }
+  if (directory && !opts.template) {
+    throw new ApiError(
+      0,
+      "invalid_options",
+      "A target directory only makes sense with --template \u2014 plain `init` links the directory you are in."
+    );
+  }
+  if (opts.template && directory) {
+    process.chdir(prepareScaffoldDirectory(process.cwd(), directory));
+  }
   const existing = readProjectConfig();
   if (existing) {
     ui.info(`Already initialized (project ${existing.projectId} \u2014 "${existing.title}").`);
     ui.info("Delete .agentful/project.json to re-initialize.");
     return;
   }
+  if (opts.template) {
+    const title2 = opts.title?.trim() || (0, import_node_path5.basename)(process.cwd());
+    ui.step(`Scaffolding from the ${opts.template} starter\u2026`);
+    const result = materializeStarter(opts.template, process.cwd(), title2);
+    ui.ok(`${result.written} files written \u2014 compatible with the cloud build by construction.`);
+  }
   const auth = await ensureAuth();
   if (opts.link) {
     ui.step(`Linking existing project ${opts.link}\u2026`);
@@ -3828,7 +4465,7 @@ async function initCommand(opts) {
     writeProjectConfig({
       projectId: opts.link,
       userId: auth.user_id,
-      title: opts.title || (0, import_node_path4.basename)(process.cwd()),
+      title: opts.title || (0, import_node_path5.basename)(process.cwd()),
       createdAt: (/* @__PURE__ */ new Date()).toISOString()
     });
     ui.ok(`Linked. \`agentful push\` now deploys to project ${opts.link}.`);
@@ -3837,18 +4474,26 @@ async function initCommand(opts) {
   let title = opts.title?.trim() || "";
   if (!title) {
     const rl = (0, import_promises.createInterface)({ input: process.stdin, output: process.stdout });
-    title = (await rl.question(`Project title [${(0, import_node_path4.basename)(process.cwd())}]: `)).trim() || (0, import_node_path4.basename)(process.cwd());
+    title = (await rl.question(`Project title [${(0, import_node_path5.basename)(process.cwd())}]: `)).trim() || (0, import_node_path5.basename)(process.cwd());
     rl.close();
   }
   ui.step(`Creating project "${title}"\u2026`);
   const config = await createProject(auth, title);
   ui.ok(`Project created (${config.projectId}). Next: \`agentful push\``);
+  if (opts.template) {
+    if (directory) ui.info(`Next: \`cd ${directory}\` \u2014 the project lives there now.`);
+    ui.info("Run `npm install` before local dev; `agentful push` builds in the cloud either way.");
+    ui.info(`Or start the coding agent right away: \`agentful\` (templates: ${STARTER_NAMES.join(", ")}).`);
+  }
   ui.info("Tip: commit .agentful/project.json to keep the mapping with the repo.");
 }
 
+// src/commands/push.ts
+init_branding();
+
 // src/lib/zip.ts
-var import_node_fs3 = require("fs");
-var import_node_path5 = require("path");
+var import_node_fs4 = require("fs");
+var import_node_path6 = require("path");
 
 // node_modules/fflate/esm/index.mjs
 var import_module = require("module");
@@ -4591,16 +5236,16 @@ var isEnvFile = (name) => name === ".env" || name.startsWith(".env.");
 function collectFiles(rootDir, mode) {
   const ig = (0, import_ignore.default)();
   if (mode === "source") {
-    const gitignorePath = (0, import_node_path5.join)(rootDir, ".gitignore");
-    if ((0, import_node_fs3.existsSync)(gitignorePath)) {
-      ig.add((0, import_node_fs3.readFileSync)(gitignorePath, "utf8"));
+    const gitignorePath = (0, import_node_path6.join)(rootDir, ".gitignore");
+    if ((0, import_node_fs4.existsSync)(gitignorePath)) {
+      ig.add((0, import_node_fs4.readFileSync)(gitignorePath, "utf8"));
     }
   }
   const results = [];
   const walk = (dir) => {
-    for (const entry of (0, import_node_fs3.readdirSync)(dir, { withFileTypes: true })) {
-      const abs = (0, import_node_path5.join)(dir, entry.name);
-      const rel = (0, import_node_path5.relative)(rootDir, abs).split(import_node_path5.sep).join("/");
+    for (const entry of (0, import_node_fs4.readdirSync)(dir, { withFileTypes: true })) {
+      const abs = (0, import_node_path6.join)(dir, entry.name);
+      const rel = (0, import_node_path6.relative)(rootDir, abs).split(import_node_path6.sep).join("/");
       const lower = entry.name.toLowerCase();
       if (entry.isSymbolicLink()) continue;
       if (entry.isDirectory()) {
@@ -4626,7 +5271,7 @@ function zipToBase64(files) {
   }
   const entries = {};
   for (const f of files) {
-    entries[f.rel] = (0, import_node_fs3.readFileSync)(f.abs);
+    entries[f.rel] = (0, import_node_fs4.readFileSync)(f.abs);
   }
   const zipped = zipSync(entries, { level: 6 });
   if (zipped.byteLength > MAX_ZIP_BYTES) {
@@ -4644,15 +5289,15 @@ function zipToBase64(files) {
 }
 function detectDistDir(rootDir, override) {
   if (override) {
-    const dir = (0, import_node_path5.join)(rootDir, override);
-    if (!(0, import_node_fs3.existsSync)(dir) || !(0, import_node_fs3.statSync)(dir).isDirectory()) {
+    const dir = (0, import_node_path6.join)(rootDir, override);
+    if (!(0, import_node_fs4.existsSync)(dir) || !(0, import_node_fs4.statSync)(dir).isDirectory()) {
       throw new ApiError(0, "dist_not_found", `--dir ${override} does not exist or is not a directory.`);
     }
     return dir;
   }
-  for (const candidate of ["dist", "build", "out", (0, import_node_path5.join)(".output", "public")]) {
-    const dir = (0, import_node_path5.join)(rootDir, candidate);
-    if ((0, import_node_fs3.existsSync)((0, import_node_path5.join)(dir, "index.html"))) return dir;
+  for (const candidate of ["dist", "build", "out", (0, import_node_path6.join)(".output", "public")]) {
+    const dir = (0, import_node_path6.join)(rootDir, candidate);
+    if ((0, import_node_fs4.existsSync)((0, import_node_path6.join)(dir, "index.html"))) return dir;
   }
   throw new ApiError(
     0,
@@ -4661,6 +5306,334 @@ function detectDistDir(rootDir, override) {
   );
 }
 
+// src/lib/preflight.ts
+var import_node_fs5 = require("fs");
+var import_node_path7 = require("path");
+
+// ../platform-contract/contract.json
+var contract_default = {
+  $comment: "Single source of truth for the platform publish contract (PRD AP6a, planned/cli-push-to-workspace-transition-findings-and-prd-2026-08-17.md). Consumers: cli/src/lib/preflight.ts renders directly from this file; build engine (infrastructure/lambda/build-engine/handler.ts) and executor (opencode-lambda/executor/runtime/opencode_runner.py) are parity-checked against it by ./check-parity.py until AP4/AP5 move them onto it; AP0 instructions/skills render from it later. Bump schema_version on breaking shape changes. See README.md.",
+  schema_version: 1,
+  contract_statement: "This platform publishes static files \u2014 there is no server process and no build-time env vars.",
+  publish: {
+    server_process: false,
+    build_env_vars: false,
+    published_prefix: "dist/",
+    canonical_output_check: "root_index_html",
+    $comment_output: "Canonical end-to-end contract (AP4): a root-level index.html inside the framework's output dir. Deliberately stricter than the executor's historical index.htm/200.html acceptance \u2014 both builders converge on THIS, not on each other (deployment gate and publish self-heal require dist/index.html)."
+  },
+  limits: {
+    max_zip_upload_bytes: 6291456,
+    $comment_limits: "Compressed zip bytes. Enforced server-side as MAX_TEMPLATE_ZIP_UPLOAD_BYTES (aws-services/workspace-manager/handler.py); ~8 MB as base64, under the API Gateway 10 MB request cap."
+  },
+  frameworks: [
+    {
+      id: "nextjs",
+      display_name: "Next.js (static export)",
+      detect_dependency: "next",
+      build_command: "npm run build",
+      output_dir: "out",
+      requires_config: "next.config.js or next.config.ts with output: 'export' (no config file at all is acceptable \u2014 the cloud build creates one)"
+    },
+    {
+      id: "nuxt",
+      display_name: "Nuxt (static generate)",
+      detect_dependency: "nuxt",
+      build_command: "npm run generate",
+      output_dir: ".output/public",
+      requires_config: "nuxt.config.ts or nuxt.config.js with ssr: false"
+    },
+    {
+      id: "vite",
+      display_name: "Vite",
+      detect_dependency: "vite",
+      build_command: "npm run build",
+      output_dir: "dist"
+    },
+    {
+      id: "cra",
+      display_name: "Create React App",
+      detect_dependency: "react-scripts",
+      build_command: "npm run build",
+      output_dir: "build"
+    },
+    {
+      id: "vanilla",
+      display_name: "plain HTML/CSS/JS without a package.json",
+      detect_dependency: null,
+      build_command: null,
+      output_dir: "."
+    }
+  ],
+  $comment_frameworks: "Detection precedence = array order, mirroring the engine's FRAMEWORKS.find(). vanilla applies when no package.json exists; a package.json matching no detect_dependency is 'unknown' and rejected. Do NOT add frameworks the engine does not build: SvelteKit would be classified as 'vite' via its vite dependency and then fail the dist/ check (adapter-static writes build/), Astro would be 'unknown'.",
+  forbidden_server_features: [
+    {
+      id: "pages_api_routes",
+      dirs: ["pages/api", "src/pages/api"],
+      blocking: "always"
+    },
+    {
+      id: "middleware",
+      file_basenames: ["middleware", "proxy"],
+      file_extensions: ["js", "ts", "mjs"],
+      blocking: "always",
+      note: "proxy.* is the Next 16 rename of middleware.*; both run on a server/edge runtime."
+    },
+    {
+      id: "get_server_side_props",
+      blocking: "always",
+      note: "next build rejects getServerSideProps under output: 'export'."
+    },
+    {
+      id: "use_server_actions",
+      blocking: "always",
+      note: "next build rejects 'use server' actions under output: 'export'."
+    },
+    {
+      id: "app_route_handlers",
+      dirs: ["app", "src/app"],
+      file_basenames: ["route"],
+      file_extensions: ["js", "ts", "jsx", "tsx", "mjs"],
+      blocking: "without_static_export",
+      note: "Statically evaluable GET handlers are allowed under output: 'export' \u2014 with the config present this only warns and the cloud build decides."
+    },
+    {
+      id: "server_auth_frameworks",
+      dependencies: ["next-auth"],
+      dependency_prefixes: ["@auth/"],
+      blocking: "with_auth_route",
+      note: "With an actual auth route this blocks; as a bare dependency it cannot run either but breaks nothing at build time \u2014 warn only."
+    }
+  ],
+  build_attempt_schema: {
+    file: "deployments/latest-build.json",
+    status_values: ["running", "success", "failed"],
+    phase_codes: ["unsupported_project_type", "install", "build", "missing_output", "upload"],
+    fields: {
+      schema_version: "int \u2014 copy of this contract's schema_version",
+      build_id: "string \u2014 unique per attempt",
+      started_at: "ISO-8601 \u2014 attempt start, written together with status: running",
+      status: "running | success | failed",
+      timestamp: "ISO-8601 \u2014 record write time",
+      phase: "one of phase_codes",
+      framework: "framework id",
+      error: "human-readable cause",
+      details: "raw build output excerpt"
+    },
+    adopted_by: {
+      build_engine: ["schema_version", "build_id", "started_at", "status", "timestamp", "phase", "error", "details", "framework"],
+      executor: ["schema_version", "build_id", "started_at", "status", "timestamp", "phase", "error"],
+      $comment: "Both builders write the attempt identity since AP4/AP5 (2026-08-18); failures carry phase codes and \u2014 for contract violations \u2014 code/reason/hints. The engine additionally writes a running record at start; the executor has no separate build-start moment (started_at is the turn start) and writes no running record. The CLI may graduate from timestamp freshness to identity-based polling for the ENGINE path."
+    }
+  }
+};
+
+// src/lib/preflight.ts
+function feature(id) {
+  const found = contract_default.forbidden_server_features.find((f) => f.id === id);
+  if (!found) throw new Error(`platform contract is missing forbidden_server_features entry '${id}'`);
+  return found;
+}
+var FRAMEWORK_TABLE = contract_default.frameworks;
+var SUPPORTED_FRAMEWORKS = FRAMEWORK_TABLE.map((f) => f.display_name).map((name, i, all) => i === all.length - 1 ? `or ${name}` : name).join(", ");
+var PLATFORM_CONTRACT = contract_default.contract_statement;
+var MAX_ZIP_UPLOAD_BYTES = contract_default.limits.max_zip_upload_bytes;
+var NEXT_CONFIG_BASENAMES = ["next.config.js", "next.config.ts", "next.config.mjs", "next.config.cjs"];
+var ROUTES_FEATURE = feature("app_route_handlers");
+var ROUTE_HANDLER_FILE = new RegExp(
+  `^(${ROUTES_FEATURE.file_basenames.join("|")})\\.(${ROUTES_FEATURE.file_extensions.join("|")})$`
+);
+var APP_DIRS = ROUTES_FEATURE.dirs;
+var PAGES_API_DIRS = feature("pages_api_routes").dirs;
+var MIDDLEWARE_FEATURE = feature("middleware");
+var MIDDLEWARE_FILE = new RegExp(
+  `^(${MIDDLEWARE_FEATURE.file_basenames.join("|")})\\.(${MIDDLEWARE_FEATURE.file_extensions.join("|")})$`
+);
+var AUTH_FEATURE = feature("server_auth_frameworks");
+var isAuthDep = (dep) => AUTH_FEATURE.dependencies.includes(dep) || AUTH_FEATURE.dependency_prefixes.some((prefix) => dep.startsWith(prefix));
+var STATIC_EXPORT = /output\s*:\s*['"]export['"]/;
+var SOURCE_FILE = /\.(js|jsx|ts|tsx|mjs)$/;
+var GET_SERVER_SIDE_PROPS = /export\s+(?:async\s+)?(?:function|const|let|var)\s+getServerSideProps\b|export\s*\{[^}]*\bgetServerSideProps\b[^}]*\}/;
+var USE_SERVER = /^\s*(['"])use server\1\s*;?\s*$/m;
+var SKIP_DIRS = /* @__PURE__ */ new Set(["node_modules", ".next", ".git", "dist", "build", "out"]);
+var SCAN_FILE_BUDGET = 5e3;
+function detectFramework(rootDir) {
+  const pkgPath = (0, import_node_path7.join)(rootDir, "package.json");
+  if (!(0, import_node_fs5.existsSync)(pkgPath)) return "vanilla";
+  let pkg;
+  try {
+    pkg = JSON.parse((0, import_node_fs5.readFileSync)(pkgPath, "utf8"));
+  } catch {
+    return "unknown";
+  }
+  const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+  const hit = FRAMEWORK_TABLE.find((f) => f.detect_dependency && deps[f.detect_dependency]);
+  return hit ? hit.id : "unknown";
+}
+function readDeps(rootDir) {
+  try {
+    const pkg = JSON.parse((0, import_node_fs5.readFileSync)((0, import_node_path7.join)(rootDir, "package.json"), "utf8"));
+    return { ...pkg.dependencies, ...pkg.devDependencies };
+  } catch {
+    return {};
+  }
+}
+function findFiles(rootDir, dir, pattern, out, cap = 20) {
+  if (out.length >= cap || !(0, import_node_fs5.existsSync)(dir)) return;
+  for (const entry of (0, import_node_fs5.readdirSync)(dir, { withFileTypes: true })) {
+    if (out.length >= cap) return;
+    const abs = (0, import_node_path7.join)(dir, entry.name);
+    if (entry.isDirectory()) {
+      if (!SKIP_DIRS.has(entry.name)) findFiles(rootDir, abs, pattern, out, cap);
+    } else if (entry.isFile() && pattern.test(entry.name)) {
+      out.push((0, import_node_path7.relative)(rootDir, abs).split(import_node_path7.sep).join("/"));
+    }
+  }
+}
+var sample = (list) => list.slice(0, 3).join(", ") + (list.length > 3 ? ", \u2026" : "");
+function collectSourceFiles(dir, out, budget) {
+  if (budget.left <= 0 || !(0, import_node_fs5.existsSync)(dir)) return;
+  for (const entry of (0, import_node_fs5.readdirSync)(dir, { withFileTypes: true })) {
+    if (budget.left <= 0) return;
+    const abs = (0, import_node_path7.join)(dir, entry.name);
+    if (entry.isDirectory()) {
+      if (!SKIP_DIRS.has(entry.name)) collectSourceFiles(abs, out, budget);
+    } else if (entry.isFile() && SOURCE_FILE.test(entry.name)) {
+      budget.left--;
+      out.push(abs);
+    }
+  }
+}
+function checkNextjs(rootDir) {
+  const issues = [];
+  const warnings = [];
+  const configName = NEXT_CONFIG_BASENAMES.find((name) => (0, import_node_fs5.existsSync)((0, import_node_path7.join)(rootDir, name)));
+  let hasStaticExport = true;
+  if (configName) {
+    const config = (0, import_node_fs5.readFileSync)((0, import_node_path7.join)(rootDir, configName), "utf8");
+    hasStaticExport = STATIC_EXPORT.test(config);
+    if (!hasStaticExport) {
+      issues.push(
+        `${configName} must set output: 'export' \u2014 the platform serves a static export and the cloud build does not reliably rewrite configs.`
+      );
+    }
+    if (configName.endsWith(".mjs") || configName.endsWith(".cjs")) {
+      issues.push(`${configName}: the cloud build only reads next.config.js or next.config.ts \u2014 rename the config file.`);
+    }
+  }
+  const hard = [];
+  const pagesApi = [];
+  for (const apiDir of PAGES_API_DIRS) {
+    findFiles(rootDir, (0, import_node_path7.join)(rootDir, apiDir), /\.(js|ts|jsx|tsx|mjs)$/, pagesApi);
+  }
+  if (pagesApi.length > 0) hard.push(`pages/api/* routes (${pagesApi.length} file(s))`);
+  const middlewareFiles = [];
+  for (const base of ["", "src"]) {
+    const dir = base ? (0, import_node_path7.join)(rootDir, base) : rootDir;
+    if (!(0, import_node_fs5.existsSync)(dir)) continue;
+    for (const entry of (0, import_node_fs5.readdirSync)(dir)) {
+      if (MIDDLEWARE_FILE.test(entry)) middlewareFiles.push((0, import_node_path7.join)(base, entry).split(import_node_path7.sep).join("/"));
+    }
+  }
+  hard.push(...middlewareFiles);
+  const sourceFiles = [];
+  collectSourceFiles(rootDir, sourceFiles, { left: SCAN_FILE_BUDGET });
+  const gssp = [];
+  const useServer = [];
+  for (const abs of sourceFiles) {
+    if (gssp.length >= 20 && useServer.length >= 20) break;
+    let text;
+    try {
+      text = (0, import_node_fs5.readFileSync)(abs, "utf8");
+    } catch {
+      continue;
+    }
+    const rel = (0, import_node_path7.relative)(rootDir, abs).split(import_node_path7.sep).join("/");
+    if (gssp.length < 20 && GET_SERVER_SIDE_PROPS.test(text)) gssp.push(rel);
+    if (useServer.length < 20 && USE_SERVER.test(text)) useServer.push(rel);
+  }
+  if (gssp.length > 0) hard.push(`getServerSideProps (${sample(gssp)})`);
+  if (useServer.length > 0) hard.push(`'use server' actions (${sample(useServer)})`);
+  const routeFiles = [];
+  for (const appDir of APP_DIRS) {
+    findFiles(rootDir, (0, import_node_path7.join)(rootDir, appDir), ROUTE_HANDLER_FILE, routeFiles);
+  }
+  if (routeFiles.length > 0) {
+    const label = `${routeFiles.length} route handler(s) (${sample(routeFiles)})`;
+    if (hasStaticExport) {
+      warnings.push(
+        `${label}: with output: 'export' only route handlers that are statically evaluable at build time survive \u2014 the cloud build will fail on any dynamic handler.`
+      );
+    } else {
+      hard.push(label);
+    }
+  }
+  const authDeps = Object.keys(readDeps(rootDir)).filter(isAuthDep);
+  if (authDeps.length > 0) {
+    const isAuthPath = (p) => p.toLowerCase().split("/").some((seg) => seg === "auth" || seg.includes("nextauth"));
+    const authRoutes = [...routeFiles, ...pagesApi].filter(isAuthPath);
+    if (authRoutes.length > 0) {
+      hard.push(`${authDeps.join(", ")} with its server-side auth route (${sample(authRoutes)})`);
+    } else {
+      warnings.push(
+        `${authDeps.join(", ")} is in dependencies but no auth route was found \u2014 server-side auth cannot run on the static platform. Remove the dependency, or keep auth in an external backend called from the client.`
+      );
+    }
+  }
+  if (hard.length > 0) {
+    issues.push(
+      `${PLATFORM_CONTRACT}
+  Your project needs a server runtime (found: ${hard.join("; ")}).
+  Options: (a) convert to a static export and move server logic to Managed Server Actions,
+  (b) keep the backend elsewhere and call it from the client, (c) don't push this project.`
+    );
+  }
+  return { issues, warnings };
+}
+function runPreflight(rootDir) {
+  const framework = detectFramework(rootDir);
+  const issues = [];
+  const warnings = [];
+  if (framework === "unknown") {
+    issues.push(
+      `No supported framework found in package.json. The cloud build supports: ${SUPPORTED_FRAMEWORKS}.`
+    );
+  }
+  if (framework === "nextjs") {
+    const next = checkNextjs(rootDir);
+    issues.push(...next.issues);
+    warnings.push(...next.warnings);
+  }
+  return { framework, issues, warnings };
+}
+
+// src/lib/buildStatus.ts
+init_branding();
+var DIAGNOSIS_MAX_AGE_MS = 15 * 60 * 1e3;
+var CLOCK_SKEW_MS = 60 * 1e3;
+function parseTimestamp(ts) {
+  if (!ts) return null;
+  const ms = Date.parse(ts);
+  return Number.isNaN(ms) ? null : ms;
+}
+async function fetchBuildStatus(token, userId, projectId) {
+  return request(
+    `${API_URL}/api/workspaces/${userId}/${projectId}/build-status`,
+    { token }
+  );
+}
+function renderBuildFailure(b) {
+  const head = [
+    "Cloud build failed",
+    b.framework && `framework: ${b.framework}`,
+    b.phase && `phase: ${b.phase}`,
+    b.timestamp && `recorded: ${b.timestamp}`
+  ].filter(Boolean).join(" \u2014 ");
+  ui.warn(head);
+  if (b.error) ui.info(b.error);
+  if (b.details && b.details !== b.error) ui.info(String(b.details).slice(0, 4e3));
+}
+
 // src/commands/push.ts
 function brandPreviewUrl(previewUrl, projectId) {
   const fallback = `https://preview-${projectId}.${PREVIEW_DOMAIN}/`;
@@ -4677,6 +5650,24 @@ function brandPreviewUrl(previewUrl, projectId) {
 }
 async function pushCommand(opts) {
   console.log(banner());
+  const mode = opts.prebuilt ? "dist" : "source";
+  const rootDir = opts.prebuilt ? detectDistDir(process.cwd(), opts.dir) : process.cwd();
+  if (mode === "source") {
+    const pre = runPreflight(process.cwd());
+    for (const warning of pre.warnings) ui.warn(warning);
+    if (pre.issues.length > 0) {
+      if (opts.force) {
+        ui.warn(`Preflight found ${pre.issues.length} blocking issue(s) \u2014 continuing because of --force:`);
+        for (const issue of pre.issues) ui.info(issue);
+      } else {
+        throw new ApiError(
+          0,
+          "preflight_failed",
+          "This project cannot run on the platform as pushed:\n" + pre.issues.map((issue) => `\u2022 ${issue}`).join("\n") + "\nPush with --force to attempt the cloud build anyway."
+        );
+      }
+    }
+  }
   const auth = await ensureAuth();
   let project = readProjectConfig();
   if (!project) {
@@ -4692,12 +5683,17 @@ async function pushCommand(opts) {
       `This project belongs to another account (${userId}); you are logged in as ${auth.email}.`
     );
   }
-  const mode = opts.prebuilt ? "dist" : "source";
-  const rootDir = opts.prebuilt ? detectDistDir(process.cwd(), opts.dir) : process.cwd();
   ui.step(mode === "source" ? "Packing source tree\u2026" : `Packing built output (${rootDir})\u2026`);
   const files = collectFiles(rootDir, mode);
   const zip = zipToBase64(files);
   ui.info(`${zip.count} files, ${(zip.bytes / 1024).toFixed(0)} KB compressed`);
+  if (zip.bytes > MAX_ZIP_UPLOAD_BYTES) {
+    throw new ApiError(
+      0,
+      "zip_too_large",
+      `Packed ${(zip.bytes / 1024 / 1024).toFixed(1)} MB compressed \u2014 the platform caps uploads at ${Math.floor(MAX_ZIP_UPLOAD_BYTES / (1024 * 1024))} MB. Remove large media or generated files from the source tree (node_modules, dist and .git are excluded automatically); large assets belong in the platform asset flow.`
+    );
+  }
   ui.step("Uploading to your workspace\u2026");
   const upload = await request(
     `${API_URL}/api/workspaces/${userId}/${projectId}/source-zip`,
@@ -4706,6 +5702,7 @@ async function pushCommand(opts) {
   ui.info(`${upload.files_written} files written`);
   if (mode === "source") {
     ui.step("Building in the cloud (this can take a few minutes)\u2026");
+    const buildStartedAt = Date.now();
     try {
       await request(`${PB_URL}/api/workspaces/${userId}/${projectId}/build`, {
         method: "POST",
@@ -4717,8 +5714,11 @@ async function pushCommand(opts) {
     } catch (err2) {
       if (err2 instanceof ApiError && err2.code === "network_error") {
         ui.warn("Connection dropped during the build \u2014 polling for the result\u2026");
-        await pollBuild(auth.pb_token, userId, projectId);
+        await pollBuild(auth.pb_token, userId, projectId, buildStartedAt);
       } else {
+        if (err2 instanceof ApiError && !err2.details) {
+          await printBuildDiagnosis(auth.pb_token, userId, projectId);
+        }
         throw err2;
       }
     }
@@ -4733,22 +5733,28 @@ async function pushCommand(opts) {
   ui.ok(`Live preview: ${ui.url(url)}`);
   ui.info(`Manage in the browser: ${ui.url(`https://app.agentful.dev/workspace/${userId}/${projectId}`)}`);
 }
-async function pollBuild(token, userId, projectId) {
+async function pollBuild(token, userId, projectId, startedAtMs) {
   const deadline = Date.now() + 10 * 60 * 1e3;
+  const cutoff = startedAtMs - CLOCK_SKEW_MS;
   while (Date.now() < deadline) {
     await new Promise((r) => setTimeout(r, 5e3));
     try {
-      const status = await request(
-        `${API_URL}/api/workspaces/${userId}/${projectId}/build-status`,
-        { token }
-      );
-      const s = status.build?.status;
-      if (s === "success" || status.dist_ready && !s) {
+      const status = await fetchBuildStatus(token, userId, projectId);
+      const b = status.build;
+      const recordTs = parseTimestamp(b?.timestamp);
+      const fresh = recordTs !== null && recordTs >= cutoff;
+      if (fresh && b?.status === "success") {
         ui.info("Build finished");
         return;
       }
-      if (s === "failed") {
-        throw new ApiError(0, "build_failed", `Cloud build failed: ${status.build?.error || "see workspace logs"}`);
+      if (fresh && b?.status === "failed") {
+        renderBuildFailure(b);
+        throw new ApiError(0, "build_failed", `Cloud build failed: ${b?.error || "see workspace logs"}`);
+      }
+      const distTs = parseTimestamp(status.dist_last_modified);
+      if (!b?.status && status.dist_ready && distTs !== null && distTs >= cutoff) {
+        ui.info("Build finished");
+        return;
       }
     } catch (err2) {
       if (err2 instanceof ApiError && err2.code === "build_failed") throw err2;
@@ -4756,8 +5762,63 @@ async function pollBuild(token, userId, projectId) {
   }
   throw new ApiError(0, "build_timeout", "Build did not finish within 10 minutes. Check the workspace in the browser.");
 }
+async function printBuildDiagnosis(token, userId, projectId) {
+  try {
+    const status = await fetchBuildStatus(token, userId, projectId);
+    const b = status.build;
+    if (!b || b.status && b.status !== "failed") return;
+    const recordTs = parseTimestamp(b.timestamp);
+    if (recordTs !== null && Date.now() - recordTs > DIAGNOSIS_MAX_AGE_MS) {
+      ui.info(`Last recorded cloud build result is from ${b.timestamp} \u2014 too old to explain this failure. Check the workspace in the browser.`);
+      return;
+    }
+    renderBuildFailure(b);
+  } catch {
+  }
+}
+
+// src/commands/buildStatus.ts
+init_branding();
+async function buildStatusCommand() {
+  console.log(banner());
+  const project = readProjectConfig();
+  if (!project) {
+    throw new ApiError(
+      0,
+      "not_linked",
+      "No Agentful project here \u2014 nothing has been deployed from this directory yet. Run `agentful push` first."
+    );
+  }
+  const auth = await ensureAuth();
+  const status = await fetchBuildStatus(auth.pb_token, project.userId, project.projectId);
+  const b = status.build;
+  if (!b) {
+    ui.info("No cloud build recorded for this project yet.");
+    if (status.dist_ready) ui.info("A built site exists (dist/ is present), so the preview should work.");
+    return;
+  }
+  if (b.status === "failed") {
+    renderBuildFailure(b);
+  } else {
+    const head = [
+      `Last cloud build: ${b.status || "unknown"}`,
+      b.framework && `framework: ${b.framework}`,
+      b.phase && `phase: ${b.phase}`,
+      b.timestamp && `recorded: ${b.timestamp}`
+    ].filter(Boolean).join(" \u2014 ");
+    ui.ok(head);
+  }
+  const recordTs = parseTimestamp(b.timestamp);
+  if (recordTs !== null && Date.now() - recordTs > DIAGNOSIS_MAX_AGE_MS) {
+    ui.info(paint.dim("Note: this record is older than 15 minutes \u2014 it describes an earlier build, not one still running."));
+  }
+  if (status.dist_ready && status.dist_last_modified) {
+    ui.info(paint.dim(`Published output last updated: ${status.dist_last_modified}`));
+  }
+}
 
 // src/commands/open.ts
+init_branding();
 async function openCommand() {
   const project = requireProject();
   const auth = await ensureAuth();
@@ -4772,15 +5833,15 @@ async function openCommand() {
 
 // src/commands/tui.ts
 var import_node_child_process5 = require("child_process");
-var import_node_path13 = require("path");
+var import_node_path16 = require("path");
 
 // src/lib/binWrapper.ts
-var import_node_fs4 = require("fs");
-var import_node_path6 = require("path");
+var import_node_fs6 = require("fs");
+var import_node_path8 = require("path");
 var import_node_os3 = require("os");
 function ensureCliOnPath() {
-  const binDir = (0, import_node_path6.join)((0, import_node_os3.homedir)(), ".local", "share", "agentful", "bin");
-  (0, import_node_fs4.mkdirSync)(binDir, { recursive: true });
+  const binDir = (0, import_node_path8.join)((0, import_node_os3.homedir)(), ".local", "share", "agentful", "bin");
+  (0, import_node_fs6.mkdirSync)(binDir, { recursive: true });
   const entry = process.argv[1];
   if (!entry) return binDir;
   const restore = (name) => {
@@ -4789,8 +5850,8 @@ function ensureCliOnPath() {
 ` : `export ${name}=${JSON.stringify(original)}
 `;
   };
-  const wrapper = (0, import_node_path6.join)(binDir, "agentful");
-  (0, import_node_fs4.writeFileSync)(
+  const wrapper = (0, import_node_path8.join)(binDir, "agentful");
+  (0, import_node_fs6.writeFileSync)(
     wrapper,
     `#!/bin/sh
 # Generated by the Agentful CLI so the coding agent can run \`agentful \u2026\`.
@@ -4800,22 +5861,26 @@ function ensureCliOnPath() {
     "utf8"
   );
   try {
-    (0, import_node_fs4.chmodSync)(wrapper, 493);
+    (0, import_node_fs6.chmodSync)(wrapper, 493);
   } catch {
   }
   return binDir;
 }
 
+// src/commands/tui.ts
+init_branding();
+
 // src/lib/engine.ts
-var import_node_fs5 = require("fs");
+var import_node_fs7 = require("fs");
 var import_node_crypto = require("crypto");
-var import_node_path7 = require("path");
+var import_node_path9 = require("path");
 var import_node_os4 = require("os");
 var import_node_child_process3 = require("child_process");
 var import_node_stream = require("stream");
 var import_promises2 = require("stream/promises");
+init_branding();
 var ENGINE_BINARY = "agentful-engine";
-var FALLBACK_ENGINE_VERSION = "v1.18.3";
+var FALLBACK_ENGINE_VERSION = "v1.18.18";
 function compareVersions(a, b) {
   const pa = a.replace(/^v/, "").split(".").map((n) => parseInt(n, 10) || 0);
   const pb = b.replace(/^v/, "").split(".").map((n) => parseInt(n, 10) || 0);
@@ -4849,8 +5914,8 @@ function platformKey() {
   );
 }
 function cacheDir(version) {
-  const base = process.env.XDG_CACHE_HOME || (0, import_node_path7.join)((0, import_node_os4.homedir)(), ".cache");
-  return (0, import_node_path7.join)(base, "agentful", "engine", version);
+  const base = process.env.XDG_CACHE_HOME || (0, import_node_path9.join)((0, import_node_os4.homedir)(), ".cache");
+  return (0, import_node_path9.join)(base, "agentful", "engine", version);
 }
 async function fetchManifest() {
   try {
@@ -4861,7 +5926,7 @@ async function fetchManifest() {
 }
 async function sha256File(path) {
   const hash = (0, import_node_crypto.createHash)("sha256");
-  await (0, import_promises2.pipeline)((0, import_node_fs5.createReadStream)(path), hash);
+  await (0, import_promises2.pipeline)((0, import_node_fs7.createReadStream)(path), hash);
   return hash.digest("hex");
 }
 async function ensureEngine() {
@@ -4870,12 +5935,12 @@ async function ensureEngine() {
   noticeIfOutdated(manifest);
   const version = manifest?.engine_version || FALLBACK_ENGINE_VERSION;
   const dir = cacheDir(version);
-  const binPath = (0, import_node_path7.join)(dir, ENGINE_BINARY);
-  if ((0, import_node_fs5.existsSync)(binPath)) return binPath;
+  const binPath = (0, import_node_path9.join)(dir, ENGINE_BINARY);
+  if ((0, import_node_fs7.existsSync)(binPath)) return binPath;
   const artifact = manifest?.artifacts?.[key];
   const url = artifact?.url || `${APP_URL}/cli/engine/${version}/${key}${key.startsWith("darwin") ? ".zip" : ".tar.gz"}`;
-  (0, import_node_fs5.mkdirSync)(dir, { recursive: true });
-  const archivePath = (0, import_node_path7.join)(dir, key.startsWith("darwin") ? "engine.zip" : "engine.tar.gz");
+  (0, import_node_fs7.mkdirSync)(dir, { recursive: true });
+  const archivePath = (0, import_node_path9.join)(dir, key.startsWith("darwin") ? "engine.zip" : "engine.tar.gz");
   ui.step(`Preparing the ${brand.displayName} engine (first run only)\u2026`);
   const resp = await fetch(url, {
     redirect: "follow",
@@ -4889,11 +5954,11 @@ async function ensureEngine() {
       `Could not download the engine (HTTP ${resp.status}). Check your connection and try again.`
     );
   }
-  await (0, import_promises2.pipeline)(import_node_stream.Readable.fromWeb(resp.body), (0, import_node_fs5.createWriteStream)(archivePath));
+  await (0, import_promises2.pipeline)(import_node_stream.Readable.fromWeb(resp.body), (0, import_node_fs7.createWriteStream)(archivePath));
   if (artifact?.sha256) {
     const actual = await sha256File(archivePath);
     if (actual !== artifact.sha256) {
-      (0, import_node_fs5.rmSync)(archivePath, { force: true });
+      (0, import_node_fs7.rmSync)(archivePath, { force: true });
       throw new ApiError(
         0,
         "engine_checksum_mismatch",
@@ -4902,7 +5967,7 @@ async function ensureEngine() {
     }
   }
   const extract = archivePath.endsWith(".zip") ? (0, import_node_child_process3.spawnSync)("unzip", ["-oq", archivePath], { cwd: dir, stdio: "ignore" }) : (0, import_node_child_process3.spawnSync)("tar", ["-xzf", archivePath], { cwd: dir, stdio: "ignore" });
-  (0, import_node_fs5.rmSync)(archivePath, { force: true });
+  (0, import_node_fs7.rmSync)(archivePath, { force: true });
   if (extract.status !== 0) {
     throw new ApiError(
       0,
@@ -4910,24 +5975,24 @@ async function ensureEngine() {
       `Could not unpack the engine (needs ${archivePath.endsWith(".zip") ? "unzip" : "tar"} on PATH).`
     );
   }
-  const extracted = (0, import_node_path7.join)(dir, "opencode");
-  if ((0, import_node_fs5.existsSync)(extracted) && !(0, import_node_fs5.existsSync)(binPath)) (0, import_node_fs5.renameSync)(extracted, binPath);
-  if (!(0, import_node_fs5.existsSync)(binPath)) {
+  const extracted = (0, import_node_path9.join)(dir, "opencode");
+  if ((0, import_node_fs7.existsSync)(extracted) && !(0, import_node_fs7.existsSync)(binPath)) (0, import_node_fs7.renameSync)(extracted, binPath);
+  if (!(0, import_node_fs7.existsSync)(binPath)) {
     throw new ApiError(0, "engine_extract_failed", "Engine archive did not contain the expected binary.");
   }
-  (0, import_node_fs5.chmodSync)(binPath, 493);
+  (0, import_node_fs7.chmodSync)(binPath, 493);
   ui.ok(`Engine ready.`);
   console.log(paint.dim("  powered by opencode (MIT) \xB7 run `agentful licenses` for details"));
   return binPath;
 }
 
 // src/lib/gatewayToken.ts
-var import_node_fs6 = require("fs");
-var import_node_path8 = require("path");
-var cachePath = () => (0, import_node_path8.join)(configDir(), "gateway.json");
+var import_node_fs8 = require("fs");
+var import_node_path10 = require("path");
+var cachePath = () => (0, import_node_path10.join)(configDir(), "gateway.json");
 async function ensureGatewaySession(auth, projectId) {
   try {
-    const cached = JSON.parse((0, import_node_fs6.readFileSync)(cachePath(), "utf8"));
+    const cached = JSON.parse((0, import_node_fs8.readFileSync)(cachePath(), "utf8"));
     if (cached?.token && cached.expires_at - Date.now() / 1e3 > 3600) {
       return cached;
     }
@@ -4938,18 +6003,18 @@ async function ensureGatewaySession(auth, projectId) {
     body: projectId ? { project_id: projectId } : {},
     timeoutMs: 3e4
   });
-  (0, import_node_fs6.mkdirSync)(configDir(), { recursive: true });
-  (0, import_node_fs6.writeFileSync)(cachePath(), JSON.stringify(res, null, 2) + "\n", "utf8");
+  (0, import_node_fs8.mkdirSync)(configDir(), { recursive: true });
+  (0, import_node_fs8.writeFileSync)(cachePath(), JSON.stringify(res, null, 2) + "\n", "utf8");
   try {
-    (0, import_node_fs6.chmodSync)(cachePath(), 384);
+    (0, import_node_fs8.chmodSync)(cachePath(), 384);
   } catch {
   }
   return res;
 }
 
 // src/lib/engineConfig.ts
-var import_node_fs8 = require("fs");
-var import_node_path10 = require("path");
+var import_node_fs10 = require("fs");
+var import_node_path12 = require("path");
 var import_node_os5 = require("os");
 
 // src/branding/agentful-theme.json
@@ -5042,60 +6107,8 @@ var agentful_theme_default = {
   }
 };
 
-// src/branding/logo.txt
-var logo_default = "      \u2584\u2588\u2588\u2588\u2588\u2584    \u2584\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\n      \u2588\u2588\u2588\u2588\u2588\u2588\u2584  \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2580\n     \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2584 \u2588\u2588\u2588\u2588\n    \u2588\u2588\u2588\u2588  \u2588\u2588\u2588\u2588\u2584\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\n   \u2588\u2588\u2588\u2588\u2580   \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2580\n  \u2588\u2588\u2588\u2588\u2580    \u2580\u2588\u2588\u2588\u2588\u2588\u2588\u2588\n \u2588\u2588\u2588\u2588\u2580      \u2580\u2588\u2588\u2588\u2588\u2588\u2588\n\u2588\u2588\u2588\u2588\u2580        \u2580\u2588\u2588\u2588\u2588\u2588\n";
-
-// src/branding/plugin.ts
-function brandingPluginSource() {
-  const logoLiteral = JSON.stringify(logo_default.replace(/\n+$/, "").split("\n"));
-  return `// Generated by ${brand.name} v${VERSION} \u2014 do not edit; rewritten on every start.
-const LOGO = ${logoLiteral}
-
-const plugin = {
-  id: 'agentful-branding',
-  tui(api) {
-    api.slots.register({
-      order: 1,
-      slots: {
-        home_logo(ctx) {
-          const accent = ctx && ctx.theme ? ctx.theme.primary : undefined
-          const muted = ctx && ctx.theme ? ctx.theme.textMuted : undefined
-          return (
-            <box flexDirection="column">
-              {LOGO.map((line) => (
-                <text fg={accent}>{line}</text>
-              ))}
-              <text> </text>
-              <text fg={muted}>${brand.tagline}</text>
-            </box>
-          )
-        },
-        home_footer(ctx) {
-          const muted = ctx && ctx.theme ? ctx.theme.textMuted : undefined
-          return <text fg={muted}>${brand.name} v${VERSION}</text>
-        },
-        // Bottom of the sidebar \u2014 this is where the engine prints its own
-        // name and version ("OpenCode 1.18.3"); ours replaces it.
-        sidebar_footer(ctx) {
-          const accent = ctx && ctx.theme ? ctx.theme.primary : undefined
-          const muted = ctx && ctx.theme ? ctx.theme.textMuted : undefined
-          return (
-            <text>
-              <span fg={accent}>${brand.displayName}</span>
-              <span fg={muted}> v${VERSION}</span>
-            </text>
-          )
-        },
-      },
-    })
-  },
-}
-
-export default plugin
-`;
-}
-
 // src/branding/commands.ts
+init_branding();
 var NEEDS_A_PUSH = 'If the command reports "No Agentful project here", nothing has been deployed from this directory yet \u2014 run `agentful push` first (it creates the project and a preview), then retry.';
 var SLASH_COMMANDS = {
   setup: {
@@ -5104,7 +6117,11 @@ var SLASH_COMMANDS = {
   },
   push: {
     description: `${brand.displayName}: deploy this project and get a preview URL`,
-    template: "Run `agentful push` from the project root using the bash tool. It creates the project automatically if this directory is not linked yet. Stream what it prints, and when it finishes report the preview URL on its own line. If it fails, show the error and suggest the fix \u2014 do not modify project files unless I ask."
+    template: "Run `agentful push` from the project root using the bash tool. It creates the project automatically if this directory is not linked yet. Stream what it prints, and when it finishes report the preview URL on its own line. If it fails: quote the printed error verbatim, and if the failure happened in the cloud (not in the pre-upload preflight), also run `agentful build-status` and quote its phase/error/details as the cause. Diagnose ONLY from those records \u2014 never invent causes, env vars, or settings they do not show. Do not modify project files unless I ask."
+  },
+  "build-status": {
+    description: `${brand.displayName}: show the last cloud build result`,
+    template: "Run `agentful build-status` from the project root using the bash tool and report what it prints: status, phase, framework, when it was recorded, and the error/details verbatim if it failed. That record is the only source of truth about the cloud build \u2014 do not speculate beyond it. " + NEEDS_A_PUSH
   },
   preview: {
     description: `${brand.displayName}: open the live preview in the browser`,
@@ -5128,7 +6145,7 @@ function commandMarkdown(name) {
   const description = JSON.stringify(cmd.description);
   return `---
 description: ${description}
-agent: build
+agent: ${cmd.agent ?? "agentful-build"}
 ---
 
 ${cmd.template}
@@ -5136,36 +6153,171 @@ ${cmd.template}
 }
 
 // src/lib/tools.ts
-var import_node_fs7 = require("fs");
-var import_node_path9 = require("path");
+var import_node_fs9 = require("fs");
+var import_node_path11 = require("path");
 function assetsDir() {
-  const here = (0, import_node_path9.dirname)(process.argv[1] || "");
-  for (const candidate of [(0, import_node_path9.join)(here, "..", "assets"), (0, import_node_path9.join)(here, "assets")]) {
-    if ((0, import_node_fs7.existsSync)((0, import_node_path9.join)(candidate, "tools", "imagegen.ts"))) return candidate;
+  const here = (0, import_node_path11.dirname)(process.argv[1] || "");
+  for (const candidate of [(0, import_node_path11.join)(here, "..", "assets"), (0, import_node_path11.join)(here, "assets")]) {
+    if ((0, import_node_fs9.existsSync)((0, import_node_path11.join)(candidate, "tools", "imagegen.ts"))) return candidate;
   }
   return null;
 }
 function installEngineTools(configDir2) {
   const assets = assetsDir();
   if (!assets) return false;
-  const target = (0, import_node_path9.join)(configDir2, "tools");
-  (0, import_node_fs7.mkdirSync)(target, { recursive: true });
+  const target = (0, import_node_path11.join)(configDir2, "tools");
+  (0, import_node_fs9.mkdirSync)(target, { recursive: true });
   try {
-    (0, import_node_fs7.cpSync)((0, import_node_path9.join)(assets, "tools"), target, { recursive: true });
+    (0, import_node_fs9.cpSync)((0, import_node_path11.join)(assets, "tools"), target, { recursive: true });
     return true;
   } catch {
     return false;
   }
 }
 
+// src/lib/cloudTarget.ts
+var CLOUD_INSTRUCTIONS_FILENAME = "AGENTFUL_CLOUD.md";
+var FRAMEWORKS = contract_default.frameworks;
+function frameworkDisplayName(framework) {
+  if (framework === "unknown") return "no supported framework";
+  return FRAMEWORKS.find((f) => f.id === framework)?.display_name ?? framework;
+}
+function frameworkTable() {
+  const rows = FRAMEWORKS.map((f) => {
+    const build = f.build_command ? `\`${f.build_command}\`` : "no build step";
+    const req = f.requires_config ? ` \u2014 requires ${f.requires_config}` : "";
+    return `- **${f.display_name}** (build: ${build}, output: \`${f.output_dir}\`)${req}`;
+  });
+  return rows.join("\n");
+}
+function sessionLine(framework) {
+  const name = frameworkDisplayName(framework);
+  switch (framework) {
+    case "nextjs":
+      return `Detected framework in this directory: **${name}** \u2014 next.config must keep \`output: 'export'\`; no route handlers/middleware/server actions.`;
+    case "unknown":
+      return "Detected framework in this directory: **none of the supported ones** \u2014 a push would be rejected. Fine for local-only work; for a deployable project use one of the frameworks above.";
+    default:
+      return `Detected framework in this directory: **${name}**.`;
+  }
+}
+function renderCloudInstructions(framework) {
+  return `# Agentful Cloud target (platform contract)
+
+${contract_default.contract_statement}
+
+This directory can be deployed to Agentful Cloud with \`agentful push\`. When
+the user wants this project on the platform, everything you build must satisfy
+this contract. If the user explicitly wants local-only development, any stack
+is fine \u2014 but then say clearly that \`agentful push\` cannot deploy it.
+
+## What the platform ships (hard rules)
+
+- Published apps are **static files** (the framework's build output, published
+  under \`${contract_default.publish.published_prefix}\`) served over HTTPS. There is no server process, no
+  cron, and no native binaries at runtime.
+- The canonical build output is a root-level \`index.html\` inside the
+  framework's output directory.
+- There are **no build-time env vars**: the cloud build injects nothing beyond
+  NODE_ENV. There is no settings tab for build secrets \u2014 do not invent one.
+  Backend-tab secrets are runtime-only for Managed Server Actions and never
+  reach a build; the workspace executor injects only allowlisted PUBLIC client
+  vars (\`database.anon_key\`/\`publishable_key\` expanded as
+  \`VITE_\`/\`PUBLIC_\`/\`NEXT_PUBLIC_\`). Never rely on \`.env*\` files reaching the
+  cloud \u2014 the CLI and server both strip them.
+
+## Supported frameworks (the cloud build table)
+
+${frameworkTable()}
+
+Anything else (SvelteKit, Astro, Express, a custom server, \u2026) is **not
+buildable** on the platform \u2014 do not scaffold it for a cloud-target project.
+
+## Forbidden in cloud-target Next.js projects
+
+\`pages/api/**\` routes, \`middleware.*\`/\`proxy.*\`, \`getServerSideProps\`, and
+\`'use server'\` actions all need a server runtime \u2014 the push preflight rejects
+them. App-Router route handlers survive \`output: 'export'\` only when they are
+statically evaluable; prefer client-side fetch or Managed Server Actions.
+
+## Where server logic belongs
+
+(a) Managed Server Actions on the platform (runtime secrets live there), or
+(b) an external backend called from the client. Never a bundled server
+process, and never a script the user must run locally to produce the result.
+
+## Diagnosing failed pushes and cloud builds (hard rule)
+
+Diagnose **only from evidence**: the preflight output of \`agentful push\`, and
+\`agentful build-status\` (the cloud's own build record \u2014 phase, error, details,
+timestamp). Quote the record; never invent causes, env vars, or settings that
+the record does not show. If there is no evidence yet, fetch it first.
+
+## This session
+
+${sessionLine(framework)}
+`;
+}
+
 // src/lib/engineConfig.ts
 var PROVIDER_ID = "agentful";
+var CLOUD_AGENT = "agentful-build";
+var LOCAL_AGENT = "local-only";
+var CLOUD_AGENT_PROMPT = `You are the Agentful Cloud build agent: everything you build in this directory targets deployment on Agentful Cloud via \`agentful push\`. Follow the platform contract in AGENTFUL_CLOUD.md strictly \u2014 static files only, no server process, no build-time env vars or secrets. When a push or cloud build fails, diagnose ONLY from the \`agentful push\` output and \`agentful build-status\`; quote the record and never invent causes or settings it does not show. If the user wants development that is not meant for the platform, suggest the ${LOCAL_AGENT} agent (Tab).`;
+var LOCAL_AGENT_PROMPT = "You are in local-only mode: free local development with no cloud deployment target \u2014 any stack is fine. Be clear that this directory will NOT be deployable with `agentful push` unless it satisfies the platform contract in AGENTFUL_CLOUD.md (static files only). If the user asks to deploy or push, check the contract first and say honestly whether the project can ship on the platform; never claim cloud deployability without evidence.";
+function buildEngineConfig(opts) {
+  const models = {};
+  for (const entry of opts.catalog.models) models[entry.id] = { name: entry.name };
+  return {
+    model: `${PROVIDER_ID}/${opts.catalog.defaultModel}`,
+    permission: { imagegen: opts.imagegenAvailable ? "allow" : "deny" },
+    theme: "agentful",
+    // We gate engine versions through our own manifest — the engine must not
+    // check for or announce upstream releases behind our back.
+    autoupdate: false,
+    // The platform contract rides `instructions` (ABSOLUTE paths — relative
+    // entries silently load nothing) so it survives agent switches, session
+    // recovery and compaction. Project-side AGENTS.md files are combined by
+    // the engine, never overridden.
+    instructions: opts.instructionPaths,
+    agent: {
+      // The built-in build agent would sit ambiguously next to the cloud
+      // agent ("which one is right?") — hide it. If an older engine ignores
+      // `disable`, it stays visible, which is harmless.
+      build: { disable: true },
+      [CLOUD_AGENT]: {
+        description: "Agentful Cloud \u2014 builds deployable for the platform (default)",
+        mode: "primary",
+        prompt: CLOUD_AGENT_PROMPT
+      },
+      [LOCAL_AGENT]: {
+        description: "Local only \u2014 free local development, not deployable via push",
+        mode: "primary",
+        prompt: LOCAL_AGENT_PROMPT
+      }
+    },
+    // Verified against engine v1.18.18 (binary carries the key; an engine
+    // without it falls back to the built-in default with a warning).
+    default_agent: CLOUD_AGENT,
+    provider: {
+      // User-owned providers first, so the reserved Agentful entry below wins
+      // if a local file tries to claim the same id.
+      ...opts.localProviders,
+      [PROVIDER_ID]: {
+        npm: "@ai-sdk/openai-compatible",
+        name: "Agentful",
+        options: { baseURL: opts.session.gateway_url, apiKey: opts.session.token },
+        models
+      }
+    }
+  };
+}
 function engineXdg() {
-  const root = (0, import_node_path10.join)((0, import_node_os5.homedir)(), ".local", "share", "agentful");
+  const root = (0, import_node_path12.join)((0, import_node_os5.homedir)(), ".local", "share", "agentful");
   return {
-    configHome: (0, import_node_path10.join)(root, "engine-config"),
-    dataHome: (0, import_node_path10.join)(root, "engine-data"),
-    stateHome: (0, import_node_path10.join)(root, "engine-state")
+    configHome: (0, import_node_path12.join)(root, "engine-config"),
+    dataHome: (0, import_node_path12.join)(root, "engine-data"),
+    stateHome: (0, import_node_path12.join)(root, "engine-state")
   };
 }
 async function resolveTheme() {
@@ -5182,61 +6334,119 @@ async function resolveTheme() {
   }
   return agentful_theme_default;
 }
-async function writeEngineSession(session, catalog, localProviders = {}) {
+async function writeEngineSession(session, catalog, localProviders = {}, framework = "unknown", skillsInstruction = null) {
   const xdg = engineXdg();
-  const configDir2 = (0, import_node_path10.join)(xdg.configHome, "opencode");
-  const dataDir = (0, import_node_path10.join)(xdg.dataHome, "opencode");
-  const themesDir = (0, import_node_path10.join)(configDir2, "themes");
-  const pluginsDir = (0, import_node_path10.join)(configDir2, "plugins");
-  const commandsDir = (0, import_node_path10.join)(configDir2, "commands");
-  for (const dir of [themesDir, pluginsDir, commandsDir, dataDir, (0, import_node_path10.join)(xdg.stateHome, "opencode")]) {
-    (0, import_node_fs8.mkdirSync)(dir, { recursive: true });
+  const configDir2 = (0, import_node_path12.join)(xdg.configHome, "opencode");
+  const dataDir = (0, import_node_path12.join)(xdg.dataHome, "opencode");
+  const themesDir = (0, import_node_path12.join)(configDir2, "themes");
+  const pluginsDir = (0, import_node_path12.join)(configDir2, "plugins");
+  const commandsDir = (0, import_node_path12.join)(configDir2, "commands");
+  for (const dir of [themesDir, pluginsDir, commandsDir, dataDir, (0, import_node_path12.join)(xdg.stateHome, "opencode")]) {
+    (0, import_node_fs10.mkdirSync)(dir, { recursive: true });
   }
-  const models = {};
-  for (const entry of catalog.models) models[entry.id] = { name: entry.name };
   const imagegenAvailable = installEngineTools(configDir2) && session.img_on !== false;
-  const config = {
-    model: `${PROVIDER_ID}/${catalog.defaultModel}`,
-    permission: { imagegen: imagegenAvailable ? "allow" : "deny" },
-    theme: "agentful",
-    // We gate engine versions through our own manifest — the engine must not
-    // check for or announce upstream releases behind our back.
-    autoupdate: false,
-    provider: {
-      // User-owned providers first, so the reserved Agentful entry below wins
-      // if a local file tries to claim the same id.
-      ...localProviders,
-      [PROVIDER_ID]: {
-        npm: "@ai-sdk/openai-compatible",
-        name: "Agentful",
-        options: { baseURL: session.gateway_url, apiKey: session.token },
-        models
-      }
-    }
-  };
-  (0, import_node_fs8.writeFileSync)((0, import_node_path10.join)(configDir2, "config.json"), JSON.stringify(config, null, 2));
-  (0, import_node_fs8.writeFileSync)((0, import_node_path10.join)(dataDir, "auth.json"), JSON.stringify({
+  const cloudInstructionsPath = (0, import_node_path12.join)(configDir2, CLOUD_INSTRUCTIONS_FILENAME);
+  (0, import_node_fs10.writeFileSync)(cloudInstructionsPath, renderCloudInstructions(framework));
+  const skillsPath = (0, import_node_path12.join)(configDir2, "AGENTFUL_SKILLS.md");
+  const instructionPaths = [cloudInstructionsPath];
+  if (skillsInstruction) {
+    (0, import_node_fs10.writeFileSync)(skillsPath, skillsInstruction);
+    instructionPaths.push(skillsPath);
+  } else {
+    (0, import_node_fs10.rmSync)(skillsPath, { force: true });
+  }
+  const config = buildEngineConfig({
+    session,
+    catalog,
+    localProviders,
+    imagegenAvailable,
+    instructionPaths
+  });
+  (0, import_node_fs10.writeFileSync)((0, import_node_path12.join)(configDir2, "config.json"), JSON.stringify(config, null, 2));
+  (0, import_node_fs10.writeFileSync)((0, import_node_path12.join)(dataDir, "auth.json"), JSON.stringify({
     [PROVIDER_ID]: { apiKey: session.token }
   }, null, 2));
-  const pluginPath = (0, import_node_path10.join)(pluginsDir, "agentful-branding.tsx");
-  (0, import_node_fs8.writeFileSync)(pluginPath, brandingPluginSource());
-  (0, import_node_fs8.writeFileSync)((0, import_node_path10.join)(configDir2, "tui.json"), JSON.stringify({
+  const { brandingPluginSource: brandingPluginSource2 } = await Promise.resolve().then(() => (init_plugin(), plugin_exports));
+  const pluginPath = (0, import_node_path12.join)(pluginsDir, "agentful-branding.tsx");
+  (0, import_node_fs10.writeFileSync)(pluginPath, brandingPluginSource2());
+  (0, import_node_fs10.writeFileSync)((0, import_node_path12.join)(configDir2, "tui.json"), JSON.stringify({
     theme: "agentful",
     plugin: [`file://${pluginPath}`]
   }, null, 2));
-  (0, import_node_fs8.writeFileSync)((0, import_node_path10.join)(themesDir, "agentful.json"), JSON.stringify(await resolveTheme(), null, 2));
+  (0, import_node_fs10.writeFileSync)((0, import_node_path12.join)(themesDir, "agentful.json"), JSON.stringify(await resolveTheme(), null, 2));
   for (const name of Object.keys(SLASH_COMMANDS)) {
-    (0, import_node_fs8.writeFileSync)((0, import_node_path10.join)(commandsDir, `${name}.md`), commandMarkdown(name));
+    (0, import_node_fs10.writeFileSync)((0, import_node_path12.join)(commandsDir, `${name}.md`), commandMarkdown(name));
   }
   for (const legacy of ["xdg-config", "xdg-data", "xdg-state"]) {
     try {
-      (0, import_node_fs8.rmSync)((0, import_node_path10.join)((0, import_node_os5.homedir)(), ".local", "share", "agentful", legacy), { recursive: true, force: true });
+      (0, import_node_fs10.rmSync)((0, import_node_path12.join)((0, import_node_os5.homedir)(), ".local", "share", "agentful", legacy), { recursive: true, force: true });
     } catch {
     }
   }
   return xdg;
 }
 
+// src/lib/skills.ts
+var import_node_fs11 = require("fs");
+var import_node_path13 = require("path");
+
+// src/generated/skills.json
+var skills_default = {
+  $comment: "GENERATED by cli/scripts/sync-skills.mjs from opencode-lambda/executor/runtime/.opencode/skills/ \u2014 do not edit by hand. platform-contract/check-parity.py guards drift.",
+  schema_version: 1,
+  skills: {
+    "agentful-template-contract": "---\nname: agentful-template-contract\ndescription: Agentful generated-project and template contract for static preview/publish compatibility, scaffold-safe file structure, host-agnostic assets, backend honesty, and no unsupported dependencies. Use when creating a new project, customizing a scaffold/template, editing generated app structure, or fixing preview/publish issues.\n---\n\n# Agentful Template Contract\n\n## Contract\n\nGenerate and edit projects for Agentful's existing platform:\n\n- Static preview and publish serve built files from S3/CloudFront/Cloudflare.\n- Package projects must build to `dist/`, `out/`, or `build/`.\n- Vanilla projects must work without a package install or build step.\n- Managed database and managed actions are configured in the Backend tab, not invented in code.\n\nDo not add server-first framework runtime dependencies (for example Remix / `@remix-run/*`, or a Next.js server). A referenced example repo may inform structure or styling, but this platform serves static builds and does not run those servers.\n\n## File Shape\n\n- Preserve the current stack and file layout unless the user explicitly asks for a migration.\n- For empty workspaces, follow the loaded scaffold skill exactly.\n- Put route- or feature-local UI near the feature. Create shared folders only after real reuse exists.\n- Avoid dumping grounds such as `helpers`, `misc`, or broad `lib` folders when ownership is clear.\n- Keep generated documentation short and accurate; do not describe features that do not exist.\n\n## Hosting Rules\n\n- Asset paths for project-owned files: SPAs with a client-side (history-mode)\n  router use root-absolute paths (`base: '/'`, `/assets/...`); router-less or\n  multi-page projects use relative paths.\n- Use `/api/...` only for platform runtime APIs.\n- Do not hardcode `mainmvp.com`, `agentful.dev`, preview domains, or user subdomains into app code.\n- Do not add a `<base>` tag.\n- For canonical, Open Graph, sitemap, and manifest URLs, use relative URLs or omit the origin.\n- For SPAs on static hosting, use history-mode routing with `base: '/'` (never\n  hash routing) \u2014 the platform falls unknown deep-links back to `index.html`, so\n  routes resolve on hard refresh with clean URLs (no `#`).\n\n## Backend Honesty\n\n- When a backend is configured (`status: active`), use it for real data, auth, and actions.\n- When no backend is configured, still build the requested UI from clearly-labeled sample/demo data (one replaceable module). Do not refuse or stop \u2014 surface the Backend-tab note in your final response instead.\n- Sample data must read as sample. Do NOT fake auth that \"logs in\", saves that claim to persist across reloads, or payment/webhook flows that pretend to fire \u2014 those mislead the user. Presentation data (example metrics, sample listings) is fine; a fake real-backend contract is not.\n- Never store secret keys in frontend code, templates, `.env`, or committed files.\n- Public client keys may be placeholders only when the target integration actually uses public keys.\n\n## Content Honesty\n\nDo not invent:\n\n- customer logos, testimonials, reviews, awards, revenue, user counts, certifications, compliance claims, or legal assurances\n- real prices, policies, medical/financial claims, or guarantees unless the user supplies them\n\nUse neutral placeholder copy or proof-ready sections instead.\n\n## Before Finishing\n\n- Verify imports, references, asset paths, and routes are defined.\n- Run the relevant build when a build script exists.\n- Confirm the expected output folder contains an `index.html`.\n- For UI work, include responsive behavior and basic loading, empty, error, and success states where the feature implies them.\n",
+    "nextjs-scaffold": '---\nname: nextjs-scaffold\ndescription: Next.js 15 static export scaffold with React 19, TypeScript, and Tailwind CSS v4 generated manually without create-next-app. Use only for explicit Next.js requests or justified static export app needs.\n---\n\n# Next.js Scaffold\n\n## Stack Briefing\n\nNext.js 15 **static export** (`output: \'export\'`) + React 19 + TypeScript +\nTailwind v4, written manually (never `create-next-app`). Static export only \u2014\nno server actions, API routes, dynamic server rendering, or image optimization\ndependency. Build produces `out/` (not `dist/`). Use only for explicit Next or\njustified static multi-page React needs.\n\n## When To Use\n\nUse this skill when `selected_stack` is Next.js. Prefer Next.js only when the user explicitly asks for Next.js, asks for Next-specific features, or needs a React app architecture with static export and file-based routing.\n\nDo not use Next.js for a simple landing page or portfolio unless requested.\n\n## When Not To Use\n\n- Simple landing pages/portfolios \u2192 `vanilla-scaffold`.\n- General React app UI without Next-specific needs \u2192 `react-scaffold`.\n- Anything needing server actions, API routes, or SSR \u2014 unsupported here.\n\n## HARD STOP: Never Re-Scaffold An Existing App\n\nBefore writing ANY scaffold file, check the workspace. If `package.json` (or\nan existing `index.html` app shell for vanilla projects) and source files\nalready exist, this project already has an app \u2014 scaffolding is DONE and this\nskill must not overwrite it. Read the existing entry points and source tree\nfirst, then build ON TOP of the existing files: keep the entry points,\nrouting, and dependency choices already in place. Overwriting the scaffold\nfiles on an existing project destroys the user\'s app (this happened in\nproduction). If the existing code seems inconsistent with the request, ask\nthe user \u2014 never replace silently.\n\n## Required File Shape\n\nThis is the shape a Next.js project has here. Depending on how the project\nstarted, these files may already exist in the workspace \u2014 check first:\n\n```text\npackage.json        build = `next build`; `npm run verify` runs the full gate\nnext.config.ts      output: \'export\', trailingSlash, images.unoptimized\ntsconfig.json       paths "@/*" -> ./src/*\neslint.config.mjs   the only ESLint config in the project\npostcss.config.mjs\nnext-env.d.ts\npublic/\n  favicon.svg       keep it \u2014 without a favicon every page logs a 404\nsrc/\n  app/\n    layout.tsx      owns <html>/<body> and the metadata\n    page.tsx        the root route: this IS the landing page\n    globals.css     THE global stylesheet \u2014 Tailwind by default\n.gitignore\n```\n\n**Empty workspace** \u2014 create exactly this shape.\n\n**Files already present** \u2014 **edit them, do not recreate them.** A project\nfrom `create-next-app` is close to this already; the usual gaps are the\n`Create Next App` metadata in `layout.tsx`, the demo SVGs in `public/`, and\nan `app/` directory at the root instead of under `src/`.\n\nThe build output is `out/`, not `dist/` \u2014 that is expected and the platform\naccepts it. Do not rename it.\n\nDo not use `next/font/google` by default because it can add build-time network dependency. Use system fonts unless the user explicitly requests custom fonts.\n\n## package.json\n\n```json\n{\n  "name": "project-name",\n  "private": true,\n  "version": "0.1.0",\n  "scripts": {\n    "dev": "next dev",\n    "build": "next build",\n    "start": "next start",\n    "verify": "tsc --noEmit && eslint . --max-warnings 0 && next build"\n  },\n  "dependencies": {\n    "next": "16.2.9",\n    "react": "19.2.4",\n    "react-dom": "19.2.4"\n  },\n  "devDependencies": {\n    "@tailwindcss/postcss": "^4",\n    "@types/node": "^20",\n    "@types/react": "^19",\n    "@types/react-dom": "^19",\n    "eslint": "^9",\n    "eslint-config-next": "16.2.9",\n    "tailwindcss": "^4",\n    "typescript": "^5"\n  }\n}\n```\n\n## next.config.ts\n\n```ts\nimport type { NextConfig } from \'next\'\n\nconst nextConfig: NextConfig = {\n  // Static export \u2014 the platform serves files, there is no Next.js server.\n  output: \'export\',\n  // Emits `about/index.html` instead of `about.html`, which a plain static\n  // host can resolve without rewrite rules.\n  trailingSlash: true,\n  // next/image needs a server to optimise; without this the export fails.\n  images: {\n    unoptimized: true,\n  },\n}\n\nexport default nextConfig\n```\n\n## postcss.config.mjs\n\n```js\nconst config = {\n  plugins: {\n    \'@tailwindcss/postcss\': {},\n  },\n}\n\nexport default config\n```\n\n## App Files\n\n`src/app/layout.tsx`:\n\n```tsx\nimport type { Metadata } from \'next\'\nimport \'./globals.css\'\n\nexport const metadata: Metadata = {\n  title: \'Replace this title\',\n  description: \'Replace this with a one-sentence description of the site.\',\n  icons: { icon: \'/favicon.svg\' },\n}\n\nexport default function RootLayout({\n  children,\n}: Readonly<{\n  children: React.ReactNode\n}>) {\n  return (\n    <html lang="en" className="h-full antialiased">\n      <body className="min-h-full flex flex-col">{children}</body>\n    </html>\n  )\n}\n```\n\n`src/app/globals.css`:\n\n```css\n@import "tailwindcss";\n\n/* Design tokens. Tailwind v4 turns every entry here into a utility\n   (--color-brand -> bg-brand/text-brand), so restyle the project by editing\n   these values rather than sprinkling hex codes through the components. */\n@theme {\n  --color-brand: #0070f3;\n  --color-brand-contrast: #ffffff;\n  --color-surface: #ffffff;\n  --color-surface-muted: #f5f5f7;\n  --color-ink: #111827;\n  --color-ink-muted: #6b7280;\n  --radius-card: 0.75rem;\n}\n\n:root {\n  color-scheme: light;\n  font-family: Inter, ui-sans-serif, system-ui, sans-serif;\n  --app-bg: #ffffff;\n  --app-fg: #111827;\n}\n\n/* An opaque background on html, body is mandatory \u2014 the page is never\n   transparent. Keep this rule when you restyle. */\nhtml, body {\n  margin: 0;\n  min-height: 100%;\n  min-width: 320px;\n  background: var(--app-bg);\n  color: var(--app-fg);\n}\n\n/* Keyboard focus baseline. Components may override it, but never remove it:\n   the platform appends a generic fallback to any project whose CSS contains\n   no `:focus` rule at all, and a real one belongs here. */\n:focus-visible {\n  outline: 2px solid var(--color-brand, currentColor);\n  outline-offset: 2px;\n}\n```\n\n## TypeScript Config\n\n`tsconfig.json`:\n\n```json\n{\n  "compilerOptions": {\n    "target": "ES2017",\n    "lib": ["dom", "dom.iterable", "esnext"],\n    "allowJs": true,\n    "skipLibCheck": true,\n    "strict": true,\n    "noEmit": true,\n    "esModuleInterop": true,\n    "module": "esnext",\n    "moduleResolution": "bundler",\n    "resolveJsonModule": true,\n    "isolatedModules": true,\n    "jsx": "react-jsx",\n    "incremental": true,\n    "plugins": [{ "name": "next" }],\n    "paths": { "@/*": ["./src/*"] }\n  },\n  "include": [\n    "next-env.d.ts",\n    "**/*.ts",\n    "**/*.tsx",\n    "**/*.mts",\n    ".next/types/**/*.ts",\n    ".next/dev/types/**/*.ts"\n  ],\n  "exclude": ["node_modules"]\n}\n```\n\n`next-env.d.ts`:\n\n```ts\n/// <reference types="next" />\n/// <reference types="next/image-types/global" />\n```\n\n## Routing Rules\n\nUse file-based routing under `src/app/` with static export. Do not add\n`middleware`, dynamic server routes, or `generateStaticParams` that depend on a\nserver. All routes must be statically renderable.\n\n## Data And Backend Rules\n\n- No API routes or server actions (static export forbids them). For data/auth,\n  use the platform backend via client `fetch()` \u2014 respect the STOP gate.\n- `images.unoptimized: true` is required; do not add the image optimization\n  server dependency.\n\n## Asset Path Rules\n\n- Keep output host-agnostic; reference the project\'s own assets/routes\n  relatively. Do not set an absolute `assetPrefix`/`basePath`. No `<base>` tag.\n\n## Common Failure Modes\n\n- Adding server actions/API routes \u2192 static export build fails.\n- Using `next/font/google` \u2192 build-time network dependency.\n- Renaming `out/` to `dist/` or adding postbuild move scripts.\n- Optimized `<Image>` without `unoptimized: true`.\n\n## ESLint Config\n\nEvery scaffold ships `eslint.config.mjs` (flat config) so the platform lint\ngate and the live ESLint diagnostics work from the very first turn. Next uses\n`eslint-config-next` rather than the hand-rolled rule set of `react-scaffold`\n\u2014 measured 2026-08-04, it covers strictly more:\n\n| canary | `eslint-config-next` |\n| --- | --- |\n| `useEffect(() => setV(item), [item])` | error \u2014 *"Calling setState synchronously within an effect"* (the react-scaffold class) |\n| `<img src="/x.png">` | error \u2014 `@next/next/no-img-element` (which the hand-rolled config never sees) |\n\n`eslint.config.mjs`:\n\n```js\nimport { defineConfig, globalIgnores } from "eslint/config";\nimport nextVitals from "eslint-config-next/core-web-vitals";\nimport nextTs from "eslint-config-next/typescript";\n\nconst eslintConfig = defineConfig([\n  ...nextVitals,\n  ...nextTs,\n  // Override default ignores of eslint-config-next.\n  globalIgnores([\n    // Default ignores of eslint-config-next:\n    ".next/**",\n    "out/**",\n    "build/**",\n    "next-env.d.ts",\n  ]),\n]);\n\nexport default eslintConfig;\n```\n\nThe platform runs `npx eslint . --max-warnings 0` before every build, so any\nviolation blocks the build. Do not add or remove rules, and never "fix" a\nviolation with `eslint-disable` or config edits \u2014 fix the code.\n\n## Verification\n\nRun install, then the full platform verification contract (see the build\nagent\'s "Build And Preview Rules"): typecheck, `npx eslint . --max-warnings 0`\n(the scaffold ships `eslint.config.mjs`, so this check ALWAYS applies and\ndecides acceptance), `npm run\nbuild`, and finally verify that `out/index.html` exists. Do not rename `out/`\nto `dist/`. `npm run build` alone is not what the platform gate checks \u2014 and\nNext\'s own build only surfaces lint when configured to. Never make the lint\nstep pass by disabling rules.\n',
+    "react-scaffold": '---\nname: react-scaffold\ndescription: React 19 with Vite, TypeScript, and Tailwind CSS v4 scaffold generated manually without npm create. Use for app UIs, dashboards, auth flows, CRUD interfaces, or explicit React requests.\n---\n\n# React Scaffold\n\n## Stack Briefing\n\nReact 19 + Vite + TypeScript, written manually (never `npm create`), with\nTailwind v4 as the default styling layer. Use it for app-like UIs where\ncomponent state and interaction justify a framework. Output must stay\nstatic-hostable: `base: \'/\'`, history routing (clean URLs, no `#`), build to\n`dist/`. Do not over-split into dozens of trivial components \u2014 keep the tree\npragmatic and typed.\n\n## When To Use\n\nUse this skill when `selected_stack` is React. React is appropriate for app-like interfaces, dashboard/admin UIs, authenticated user flows, complex client state, CRUD screens, and explicit React requests.\n\nDo not use React just because the workspace is empty. Static marketing/content sites should usually use `vanilla-scaffold`.\n\n## When Not To Use\n\n- Static marketing/content/portfolio sites \u2192 `vanilla-scaffold`.\n- Content-heavy multi-page sites better served by Astro \u2192 `astro-scaffold`.\n- Anything requiring SSR/server rendering \u2014 output here is static export only.\n\n## HARD STOP: Never Re-Scaffold An Existing App\n\nBefore writing ANY scaffold file, check the workspace. If `package.json` and\n`src/` already exist, this project already has an app \u2014 scaffolding is DONE\nand this skill must not overwrite it. Read the existing `package.json`,\n`src/App.tsx` and the `src/` tree first, then build ON TOP of the existing\nfiles: keep the entry points, routing, and dependency choices already in\nplace. Overwriting `package.json`/`App.tsx`/`main.tsx` on an existing project\ndestroys the user\'s app (this happened in production). If the existing code\nseems inconsistent with the request, ask the user \u2014 never replace silently.\n\n**Rewriting a file must never drop an `import "./x.css"` it carried.** Nothing\ncatches it: tsc/eslint do not read CSS, an unimported stylesheet is legal so\nthe bundler is silent, and the page renders unstyled (prod 2026-08-01: 38 of\n85 class names left the bundle, all gates green). Prefer `edit` over a full\n`write`; if you rewrite, carry the original import block over.\n\n## Required File Shape\n\nThis is the shape a React project has here. Depending on how the project\nstarted, these files may already exist in the workspace \u2014 check first:\n\n```text\nindex.html          entry: favicon link, #root, module script\npackage.json        build = `vite build`; `npm run verify` runs the full gate\nvite.config.ts      base: \'/\', tailwindcss() + react()\ntsconfig.json       ONE flat config, include: ["src"]\neslint.config.mjs   the only ESLint config in the project\npublic/\n  favicon.svg       keep it \u2014 without a favicon every page logs a 404\nsrc/\n  App.tsx           placeholder shell: header/nav, hero, cards, footer\n  main.tsx          entry, imports ./index.css\n  index.css         THE stylesheet \u2014 Tailwind by default, see Styling\n  vite-env.d.ts\n.gitignore\n```\n\n**Empty workspace** \u2014 create exactly this shape.\n\n**Files already present** \u2014 **edit them, do not recreate them.** Rewrite the\ncopy, restyle the `@theme` tokens, add components and routes, but keep the\nshape. Each part of it prevents a defect that has shipped to real users.\n\n**A project that came from an older `create-vite` starter** carries config\nthat silently disables checks the platform believes it ran. Repair config\nonly \u2014 never a full-file `write` of `App.tsx`, `main.tsx` or `package.json`,\nand never as a pretext to re-scaffold:\n\n| found | do |\n| --- | --- |\n| `tsconfig.json` with `"files": []` + `references` | always replace with the one flat config below and delete `tsconfig.app.json`/`tsconfig.node.json` \u2014 otherwise nothing is type-checked at all |\n| `eslint.config.js` | leave it alone if it is the only config. If you need the rule set below, move its contents into `eslint.config.mjs` and **delete the `.js`** \u2014 never let both exist |\n| `src/App.css` | leave a working import alone. If you rewrite `App.tsx`, carry `import \'./App.css\'` over, or fold the rules into `index.css` in the same edit \u2014 never drop it silently |\n\nSay in your summary which of these you changed and why.\n\n### One Stylesheet, Not Two\n\n`src/index.css` is the only stylesheet. Do **not** add `src/App.css`.\n\nA second stylesheet has to be imported from a component, and that import is\nthe single most fragile line in the project: one full-file `write` of\n`App.tsx` drops it, and nothing notices (prod `0njsblk0lye2vsx`, 2026-08-01 \u2014\nthe layout stylesheet left the bundle, every gate stayed green). With one\nstylesheet imported once from `main.tsx`, the failure has nowhere to happen.\n\nPut component styles wherever the chosen approach puts them \u2014 Tailwind\nclasses by default \u2014 and shared values in `index.css`.\n\n## package.json\n\n```json\n{\n  "name": "project-name",\n  "private": true,\n  "version": "0.1.0",\n  "type": "module",\n  "scripts": {\n    "dev": "vite",\n    "build": "vite build",\n    "preview": "vite preview",\n    "verify": "tsc --noEmit && eslint . --max-warnings 0 && vite build"\n  },\n  "dependencies": {\n    "react": "^19.0.0",\n    "react-dom": "^19.0.0"\n  },\n  "devDependencies": {\n    "@tailwindcss/vite": "^4.0.0",\n    "@types/react": "^19.0.0",\n    "@types/react-dom": "^19.0.0",\n    "@vitejs/plugin-react": "^4.3.4",\n    "eslint": "^9.0.0",\n    "eslint-plugin-react-hooks": "^6.0.0",\n    "tailwindcss": "^4.0.0",\n    "typescript": "^5.0.0",\n    "typescript-eslint": "^8.0.0",\n    "vite": "^6.0.0"\n  }\n}\n```\n\n`build` is `vite build` alone \u2014 no `tsc` in front of it. The platform runs the\ntype check itself before the build, and a `tsc` inside the build script also\nblocks the one-time build that runs when a starter is imported. `verify` is\nthe gate in one command; run it, not just `npm run build`.\n\n## vite.config.ts\n\n```ts\nimport { defineConfig } from \'vite\'\nimport react from \'@vitejs/plugin-react\'\nimport tailwindcss from \'@tailwindcss/vite\'\n\nexport default defineConfig({\n  base: \'/\',\n  plugins: [tailwindcss(), react()],\n})\n```\n\n## Entry Files\n\n`index.html`:\n\n```html\n<!doctype html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8" />\n    <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n    <meta name="description" content="Replace this with a one-sentence description of the app." />\n    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />\n    <title>Replace this title</title>\n  </head>\n  <body>\n    <div id="root"></div>\n    <script type="module" src="./src/main.tsx"></script>\n  </body>\n</html>\n```\n\nKeep the favicon link and keep `public/favicon.svg`. Without them the browser\nrequests `/favicon.ico` on every page load and the render check records a\nfailed request on an otherwise healthy project.\n\n`src/main.tsx`:\n\n```tsx\nimport React from \'react\'\nimport ReactDOM from \'react-dom/client\'\nimport App from \'./App\'\nimport \'./index.css\'\n\nReactDOM.createRoot(document.getElementById(\'root\')!).render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n)\n```\n\n`src/index.css` as the starter ships it \u2014 Tailwind first, then tokens, then\nthe opaque page baseline:\n\n```css\n@import "tailwindcss";\n\n/* Design tokens. Tailwind v4 turns every entry here into a utility\n   (--color-brand -> bg-brand/text-brand), so restyle the project by editing\n   these values rather than sprinkling hex codes through the components. */\n@theme {\n  --color-brand: #4f46e5;\n  --color-brand-contrast: #ffffff;\n  --color-surface: #ffffff;\n  --color-surface-muted: #f5f5f7;\n  --color-ink: #111827;\n  --color-ink-muted: #6b7280;\n  --radius-card: 0.75rem;\n}\n\n:root {\n  color-scheme: light;\n  font-family: Inter, ui-sans-serif, system-ui, sans-serif;\n  --app-bg: #ffffff;\n  --app-fg: #111827;\n}\n\n/* An opaque background on html, body is mandatory \u2014 the page is never\n   transparent. Keep this rule when you restyle. */\nhtml, body {\n  margin: 0;\n  min-height: 100%;\n  min-width: 320px;\n  background: var(--app-bg);\n  color: var(--app-fg);\n}\n\n/* Keyboard focus baseline. Components may override it, but never remove it:\n   the platform appends a generic fallback to any project whose CSS contains\n   no `:focus` rule at all, and a real one belongs here. */\n:focus-visible {\n  outline: 2px solid var(--color-brand, currentColor);\n  outline-offset: 2px;\n}\n```\n\nEvery `@theme` entry becomes a utility (`--color-brand` \u2192 `bg-brand`), so\nrestyle by editing tokens instead of scattering hex codes through components.\nIf the user chose a non-Tailwind approach, keep `:root` and the `html, body`\nrule and replace the rest \u2014 the opaque background is not optional.\n\n`src/vite-env.d.ts`:\n\n```ts\n/// <reference types="vite/client" />\n```\n\n## TypeScript Config\n\nOne flat `tsconfig.json` with `include`, no project references and no\n`tsconfig.app.json`/`tsconfig.node.json`.\n\nThis is not a style preference. The platform gate runs `tsc --noEmit` against\nthe root `tsconfig.json`. A `create-vite`-style root \u2014 `"files": []` plus\n`references` \u2014 makes that command compile **zero files**: it exits 0 on a\nproject full of type errors, and the gate reports a pass it never performed.\nMeasured 2026-08-04: a deliberate type error passes the referenced shape and\nfails the flat one. `vite.config.ts` is deliberately not type-checked.\n\n`tsconfig.json`:\n\n```json\n{\n  "compilerOptions": {\n    "target": "ES2020",\n    "useDefineForClassFields": true,\n    "lib": ["ES2020", "DOM", "DOM.Iterable"],\n    "module": "ESNext",\n    "skipLibCheck": true,\n    "moduleResolution": "bundler",\n    "allowImportingTsExtensions": true,\n    "resolveJsonModule": true,\n    "isolatedModules": true,\n    "noEmit": true,\n    "jsx": "react-jsx",\n    "strict": true\n  },\n  "include": ["src"]\n}\n```\n\n## ESLint Config\n\nEvery scaffold ships **exactly one** ESLint config, `eslint.config.mjs` (flat\nconfig), so the platform lint gate and the live ESLint diagnostics work from\nthe first turn. Keep it exactly this minimal \u2014 correctness rules only, no\nstylistic rules, nothing that fights Prettier:\n\n`eslint.config.mjs`:\n\n```js\nimport tseslint from \'typescript-eslint\'\nimport reactHooks from \'eslint-plugin-react-hooks\'\n\nexport default tseslint.config(\n  { ignores: [\'dist\'] },\n  {\n    files: [\'**/*.{ts,tsx}\'],\n    extends: [tseslint.configs.base],\n    plugins: { \'react-hooks\': reactHooks },\n    rules: {\n      \'react-hooks/rules-of-hooks\': \'error\',\n      \'react-hooks/exhaustive-deps\': \'error\',\n      \'react-hooks/set-state-in-effect\': \'error\',\n      \'react-hooks/no-deriving-state-in-effects\': \'error\',\n      \'@typescript-eslint/no-unused-vars\': [\n        \'error\',\n        { argsIgnorePattern: \'^_\', varsIgnorePattern: \'^_\' },\n      ],\n    },\n  },\n)\n```\n\n**Never add a second config file.** ESLint resolves `eslint.config.js` before\n`eslint.config.mjs` and uses only the first one it finds, silently. A stray\n`.js` next to the `.mjs` therefore disables every rule above without a\nwarning \u2014 measured on ESLint 9: a violation that fails with the `.mjs` alone\npasses when both files exist. So in an existing project, either keep its\n`eslint.config.js` as the single config, or migrate it into\n`eslint.config.mjs` and delete the `.js` \u2014 never leave both behind.\n\nThe platform runs `npx eslint . --max-warnings 0` before every build, so any\nviolation blocks the build. Do not add rules, do not remove rules, and never\n"fix" a violation with `eslint-disable` or config edits \u2014 fix the code (see\nthe hooks patterns below).\n\n## Allowed Complexity\n\n- Add `src/components/`, `src/pages/`, `src/lib/`, `src/hooks/` only when a\n  feature needs them \u2014 do not scaffold empty folders.\n- Introduce state libraries or data-fetching only when real shared state or\n  server data exists; local `useState`/`useReducer` covers most cases.\n- Keep components typed (props/return types); avoid `any`.\n\n## CSS And Styling Expectations\n\nThe starter ships Tailwind v4 via `@tailwindcss/vite`, and that is the\ndefault: keep it and tokenize theme values in `@theme`.\n\n**The user\'s request wins.** If they ask for a different styling approach,\nfollow them and adjust the setup in the same turn:\n\n- **shadcn/ui** \u2014 is built ON Tailwind. Keep Tailwind, add the components.\n  Never remove Tailwind to "make room" for it.\n- **A CSS-in-JS library** (Chakra, MUI, styled-components, Emotion) \u2014 add it\n  and build with it. Leaving Tailwind installed is harmless (v4 emits only\n  the classes you use), so remove it only if the user asks.\n- **Plain CSS / CSS Modules** \u2014 drop `@tailwindcss/vite` and `tailwindcss`\n  from `package.json`, remove the plugin from `vite.config.ts`, and replace\n  `@import "tailwindcss"` in `index.css` with your own base styles. Keep the\n  `:root` tokens and the opaque `html, body` rule.\n\nWhatever the approach, these hold:\n\n- **One stylesheet** \u2014 the rule below is about losing an import, not about\n  Tailwind. It applies to plain CSS just as much.\n- Mobile-first, responsive layouts; visible focus states; WCAG AA contrast.\n- The loaded `style-*` skill governs the visual language \u2014 apply its recipe.\n  It is written to be independent of the styling technology.\n\n## Routing Rules\n\nIf adding React Router, use `BrowserRouter` (history mode) with `base: \'/\'` in\n`vite.config.ts`. The platform serves at the domain root and falls unknown\ndeep-links back to `index.html`, so routes resolve on hard refresh with clean\nURLs (no `#`). Never use `HashRouter`. Add `react-router-dom` only when routing\nis actually needed.\n\n## Data And Backend Rules\n\n- No database/server calls unless a backend is configured (respect the build\n  agent\'s STOP gate). Do not invent mock backends or fake data arrays.\n- Keep secrets out of client code; only public keys via `.env.local`.\n\n## Asset Path Rules\n\n- Set `base: \'/\'` in `vite.config.ts`. The platform serves the project at the\n  domain root, and history-mode routes need root-absolute assets.\n- Reference the project\'s own assets/routes with root-absolute paths (`/assets/...`);\n  no `<base>` tag, no hardcoded platform URLs.\n\n## Verification\n\nRun install, then the full platform verification contract (see the build\nagent\'s "Build And Preview Rules"), not just `npm run build`:\n\n1. `npx tsc --noEmit`\n2. `npx eslint . --max-warnings 0` \u2014 a project scaffolded from this skill\n   ships `eslint.config.mjs`, so this check ALWAYS applies and decides\n   acceptance.\n3. `npm run build`\n4. `dist/index.html` exists\n\n`npm run verify` runs 1\u20133 in order. Never make step 2 pass by disabling rules\nor adding `eslint-disable`.\n\n## React Hooks Rules That Fail The Gate\n\nThe scaffold\'s `eslint.config.mjs` enables `eslint-plugin-react-hooks` rules\nthat reject patterns which compile and build fine. These are the ones that\nactually show up \u2014 avoid them while writing, not after:\n\n- **Never sync props into state inside an effect**\n  (`useEffect(() => setForm(props.item), [props.item])` \u2192 `set-state-in-effect`).\n  Derive the value during render, lift the state up, or remount the subtree\n  with a `key` when the edited record changes \u2014 that is usually the intended\n  "reset the form" semantic anyway.\n- **Do not open dialogs/editors from an effect that watches the URL.** Derive\n  the open state from the route during render, or set it in the event handler\n  that triggered the navigation.\n- **Do not bootstrap an external store from a render-time side effect.** Read\n  it with `useSyncExternalStore`, or initialize it in the store module itself.\n- **Async loads:** only update state after an await when the effect has not\n  been cleaned up (cancellation flag or `AbortController`).\n- **No impure render calls** \u2014 no `Math.random()`, `Date.now()`, or mutation\n  during render. Move them into a lazy initializer or an event handler.\n- **Fast Refresh:** a module that exports a component must not also export\n  unrelated non-component values (`react-refresh/only-export-components`).\n\nA `setTimeout`/microtask wrapper that only hides the violation from the linter\nis not a fix \u2014 it hides the same bug behind a race.\n\n## Common Failure Modes\n\n- Recreating the starter\'s files instead of editing them.\n- Adding `src/App.css` (or any second stylesheet) \u2014 see "One Stylesheet".\n- Adding `eslint.config.js` beside `eslint.config.mjs`, which silently\n  disables the rule set.\n- Restoring the `create-vite` tsconfig trio, which makes the type check inert.\n- Putting `tsc` back into the `build` script.\n- Deleting `public/favicon.svg` or its `<link rel="icon">`.\n- Using `HashRouter` \u2192 ugly `#` URLs; use `BrowserRouter` (history mode).\n- Keeping relative `base: \'./\'` with history routing \u2192 assets 404 on a deep-link\n  hard refresh; use `base: \'/\'`.\n- Leaving the starter\'s placeholder copy ("Replace this headline", "Brand",\n  "First point") in the shipped page.\n- Over-splitting into trivial components; untyped `any` props.\n- Treating pre-install JSX type errors as source bugs (install deps first).\n',
+    "vue-scaffold": '---\nname: vue-scaffold\ndescription: Vue 3.5 with Vite, TypeScript, and Tailwind CSS v4 scaffold generated manually without npm create. Use for explicit Vue requests or existing Vue projects.\n---\n\n# Vue Scaffold\n\n## Stack Briefing\n\nVue 3.5 + Vite + TypeScript + Tailwind v4, written manually (never `npm create`).\nUse it for app-like Vue UIs. Output must stay static-hostable: `base: \'/\'`,\nhistory mode (clean URLs, no `#`), build to `dist/`. Use the Composition API; add Pinia or Vue Router\nonly when real shared state or routing actually exists.\n\n## When To Use\n\nUse this skill when `selected_stack` is Vue. Prefer Vue only when requested, when the existing project uses Vue, or when the user clearly wants a Vue-style app.\n\n## When Not To Use\n\n- Static marketing/content/portfolio sites \u2192 `vanilla-scaffold`.\n- Content-heavy multi-page sites \u2192 `astro-scaffold`.\n- Anything needing SSR \u2014 output here is static only.\n\n## HARD STOP: Never Re-Scaffold An Existing App\n\nBefore writing ANY scaffold file, check the workspace. If `package.json` (or\nan existing `index.html` app shell for vanilla projects) and source files\nalready exist, this project already has an app \u2014 scaffolding is DONE and this\nskill must not overwrite it. Read the existing entry points and source tree\nfirst, then build ON TOP of the existing files: keep the entry points,\nrouting, and dependency choices already in place. Overwriting the scaffold\nfiles on an existing project destroys the user\'s app (this happened in\nproduction). If the existing code seems inconsistent with the request, ask\nthe user \u2014 never replace silently.\n\n## Required File Shape\n\nThis is the shape a Vue project has here. Depending on how the project\nstarted, these files may already exist in the workspace \u2014 check first:\n\n```text\nindex.html          entry: favicon link, #app, module script\npackage.json        build = `vite build`; `npm run verify` runs the full gate\nvite.config.ts      base: \'/\', tailwindcss() + vue()\ntsconfig.json       ONE flat config, no references\neslint.config.mjs   the only ESLint config in the project\npublic/\n  favicon.svg       keep it \u2014 without a favicon every page logs a 404\nsrc/\n  App.vue           placeholder shell: header/nav, hero, cards, footer\n  main.ts           entry, imports ./style.css\n  style.css         THE stylesheet \u2014 Tailwind by default\n  env.d.ts          vite/client types (inside src/, so the include glob covers it)\n  shims-vue.d.ts    lets plain `tsc` resolve *.vue \u2014 see below, load-bearing\n.gitignore\n```\n\n**Empty workspace** \u2014 create exactly this shape.\n\n**Files already present** \u2014 **edit them, do not recreate them.** Rewrite the\ncopy, restyle the `@theme` tokens, add components and routes, but keep the\nshape.\n\n**A project from an older `create-vue` starter** ships config that silently\ndisables checks the platform believes it ran. Repair config only \u2014 never a\nfull-file `write` of `App.vue`, `main.ts` or `package.json`:\n\n| found | do |\n| --- | --- |\n| `tsconfig.json` with `"files": []` + `references` | replace with the flat config below, delete `tsconfig.app.json`/`tsconfig.node.json`, and add `src/shims-vue.d.ts` \u2014 the trio makes the type check inert, but removing it without the shim makes it fail |\n| no ESLint config at all | add `eslint.config.mjs` below \u2014 without it the lint gate is inert and never sees a template bug |\n| `src/router/index.ts` with `routes: []`, an unused store | delete them, or give them real routes/state |\n\nCreate `src/components/`, `src/views/`, `src/router/`, or `src/stores/` only when needed.\n\n## package.json\n\n```json\n{\n  "name": "project-name",\n  "private": true,\n  "version": "0.1.0",\n  "type": "module",\n  "scripts": {\n    "dev": "vite",\n    "build": "vite build",\n    "preview": "vite preview",\n    "verify": "vue-tsc --noEmit && eslint . --max-warnings 0 && vite build"\n  },\n  "dependencies": {\n    "vue": "^3.5.0"\n  },\n  "devDependencies": {\n    "@tailwindcss/vite": "^4.0.0",\n    "@vitejs/plugin-vue": "^6.0.0",\n    "eslint": "^9.0.0",\n    "eslint-plugin-vue": "^10.0.0",\n    "tailwindcss": "^4.0.0",\n    "typescript": "^5.0.0",\n    "typescript-eslint": "^8.0.0",\n    "vite": "^6.0.0",\n    "vue-tsc": "^2.2.0"\n  }\n}\n```\n\n## vite.config.ts\n\n```ts\nimport { defineConfig } from \'vite\'\nimport vue from \'@vitejs/plugin-vue\'\nimport tailwindcss from \'@tailwindcss/vite\'\n\nexport default defineConfig({\n  base: \'/\',\n  plugins: [tailwindcss(), vue()],\n})\n```\n\n## Entry Files\n\n`index.html`:\n\n```html\n<!doctype html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8" />\n    <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n    <meta name="description" content="Replace this with a one-sentence description of the app." />\n    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />\n    <title>Replace this title</title>\n  </head>\n  <body>\n    <div id="app"></div>\n    <script type="module" src="./src/main.ts"></script>\n  </body>\n</html>\n```\n\n`src/main.ts`:\n\n```ts\nimport { createApp } from \'vue\'\nimport App from \'./App.vue\'\nimport \'./style.css\'\n\ncreateApp(App).mount(\'#app\')\n```\n\n`src/style.css`:\n\n```css\n@import "tailwindcss";\n\n/* Design tokens. Tailwind v4 turns every entry here into a utility\n   (--color-brand -> bg-brand/text-brand), so restyle the project by editing\n   these values rather than sprinkling hex codes through the components. */\n@theme {\n  --color-brand: #41b883;\n  --color-brand-contrast: #ffffff;\n  --color-surface: #ffffff;\n  --color-surface-muted: #f5f5f7;\n  --color-ink: #111827;\n  --color-ink-muted: #6b7280;\n  --radius-card: 0.75rem;\n}\n\n:root {\n  color-scheme: light;\n  font-family: Inter, ui-sans-serif, system-ui, sans-serif;\n  --app-bg: #ffffff;\n  --app-fg: #111827;\n}\n\n/* An opaque background on html, body is mandatory \u2014 the page is never\n   transparent. Keep this rule when you restyle. */\nhtml, body {\n  margin: 0;\n  min-height: 100%;\n  min-width: 320px;\n  background: var(--app-bg);\n  color: var(--app-fg);\n}\n\n/* Keyboard focus baseline. Components may override it, but never remove it:\n   the platform appends a generic fallback to any project whose CSS contains\n   no `:focus` rule at all, and a real one belongs here. */\n:focus-visible {\n  outline: 2px solid var(--color-brand, currentColor);\n  outline-offset: 2px;\n}\n```\n\nTailwind is the **default**, not a mandate \u2014 the same rule as elsewhere: if\nthe user asks for a different styling approach, follow them and adjust the\nsetup in the same turn. Vue SFC `<style scoped>` blocks are idiomatic and fine\nalongside it; the thing to avoid is a second global stylesheet imported from a\ncomponent, because one full-file rewrite drops that import silently.\n\n## TypeScript Config\n\nOne flat `tsconfig.json` with `include`, no project references and no\n`tsconfig.app.json`/`tsconfig.node.json`.\n\nThis is not a style preference. The platform gate runs `tsc --noEmit` against\nthe root `tsconfig.json`. A `create-vue`-style root \u2014 `"files": []` plus\n`references` \u2014 makes that command compile **zero files**: it exits 0 on a\nproject full of type errors and the gate reports a pass it never performed.\n\n`vite.config.ts` is deliberately not type-checked.\n\n### `src/shims-vue.d.ts` Is Load-Bearing\n\nThe gate runs `tsc`, **never `vue-tsc`** \u2014 and plain `tsc` cannot resolve an\nimport of a `.vue` file. Without the shim the very first line of `main.ts`\nfails the gate on a phantom error (measured 2026-08-04):\n\n```text\nsrc/main.ts(2,17): error TS2307: Cannot find module \'./App.vue\'\n```\n\nSo the flat tsconfig and the shim are one change: applying either alone is\nworse than the broken state it replaces. Ship both.\n\n`src/shims-vue.d.ts`:\n\n```ts\n/* Lets plain `tsc` resolve `*.vue` imports.\n *\n * Load-bearing: the platform\'s prebuild gate runs `tsc --noEmit`, never\n * `vue-tsc`. Without this shim it stops at\n *   src/main.ts: error TS2307: Cannot find module \'./App.vue\'\n * and every build fails on a phantom error.\n *\n * The shim types an SFC as a generic component, so `tsc` checks all `.ts`\n * files properly but not the internals of a `.vue` file. `npm run verify`\n * runs `vue-tsc --noEmit`, which does check those \u2014 use it before finishing.\n */\ndeclare module \'*.vue\' {\n  import type { DefineComponent } from \'vue\'\n  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>\n  export default component\n}\n```\n\nWhat this buys and what it does not \u2014 all three measured:\n\n| | `tsc` (the gate) | `vue-tsc` (`npm run verify`) |\n| --- | --- | --- |\n| type error in a `.ts` file | caught | caught |\n| type error inside a `.vue` SFC | **missed** \u2014 the shim types it generically | caught |\n\nThat is why `verify` runs `vue-tsc` and why passing the gate is not the same\nas being done.\n\n`tsconfig.json`:\n\n```json\n{\n  "compilerOptions": {\n    "target": "ES2020",\n    "useDefineForClassFields": true,\n    "module": "ESNext",\n    "lib": ["ES2020", "DOM", "DOM.Iterable"],\n    "skipLibCheck": true,\n    "moduleResolution": "bundler",\n    "allowImportingTsExtensions": true,\n    "resolveJsonModule": true,\n    "isolatedModules": true,\n    "noEmit": true,\n    "jsx": "preserve",\n    "strict": true\n  },\n  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]\n}\n```\n\n## Routing Rules\n\nIf adding Vue Router, use `createWebHistory()` (history mode) with `base: \'/\'` in\n`vite.config.ts`. The platform serves at the domain root and falls unknown\ndeep-links back to `index.html`, so routes resolve on hard refresh with clean\nURLs (no `#`). Never use `createWebHashHistory()`. Add `vue-router` only when\nrouting is needed.\n\n## Data And Backend Rules\n\n- No database/server calls unless a backend is configured (respect the build\n  agent\'s STOP gate). Do not invent mock backends or fake data arrays.\n- Keep secrets out of client code; only public keys via `.env.local`.\n\n## Asset Path Rules\n\n- Set `base: \'/\'`. The platform serves the project at the domain root, and\n  history-mode routes need root-absolute assets. Reference the project\'s own\n  assets/routes with root-absolute paths. No `<base>` tag, no hardcoded platform URLs.\n\n## Common Failure Modes\n\n- Using `createWebHashHistory()` \u2192 ugly `#` URLs; use `createWebHistory()`.\n- Keeping relative `base: \'./\'` with history routing \u2192 assets 404 on a deep-link\n  hard refresh; use `base: \'/\'`.\n- Leaving starter boilerplate in `App.vue`.\n- Adding Pinia/Router with no real need.\n\n## ESLint Config\n\nEvery scaffold ships `eslint.config.mjs` (flat config) so the platform lint\ngate and the live ESLint diagnostics work from the very first turn. Verified\nempirically 2026-08-02: `flat/essential` catches real template bugs\n(`vue/require-v-for-key` etc.); `vue/multi-word-component-names` is switched\nOFF because with `--max-warnings 0` it would block every `Hero.vue`-style\nsingle-word component \u2014 a naming convention, not a correctness rule:\n\n`eslint.config.mjs`:\n\n```js\nimport tseslint from \'typescript-eslint\'\nimport vue from \'eslint-plugin-vue\'\n\nexport default tseslint.config(\n  { ignores: [\'dist\'] },\n  {\n    files: [\'**/*.ts\'],\n    extends: [tseslint.configs.base],\n    rules: {\n      \'@typescript-eslint/no-unused-vars\': [\n        \'error\',\n        { argsIgnorePattern: \'^_\', varsIgnorePattern: \'^_\' },\n      ],\n    },\n  },\n  ...vue.configs[\'flat/essential\'],\n  {\n    files: [\'**/*.vue\'],\n    languageOptions: { parserOptions: { parser: tseslint.parser } },\n    rules: {\n      \'vue/multi-word-component-names\': \'off\',\n    },\n  },\n)\n```\n\nThe platform runs `npx eslint . --max-warnings 0` before every build, so any\nviolation blocks the build. Do not add or remove rules, and never "fix" a\nviolation with `eslint-disable` or config edits \u2014 fix the code.\n\n## Verification\n\nRun install, then the full platform verification contract (see the build\nagent\'s "Build And Preview Rules"): typecheck, `npx eslint . --max-warnings 0`\n(the scaffold ships `eslint.config.mjs`, so this check ALWAYS applies and\ndecides acceptance), `npm run build`, and finally verify that\n`dist/index.html` exists. `npm run build` alone is not what the platform gate\nchecks. Never make the lint step pass by disabling rules.\n',
+    "vanilla-scaffold": '---\nname: vanilla-scaffold\ndescription: Vanilla HTML, CSS, and JavaScript scaffold for static landing pages, portfolios, brochure sites, personal brands, simple editorial/media sites, and static catalogs without a build step.\n---\n\n# Vanilla Scaffold\n\n## Stack Briefing\n\nVanilla means static HTML/CSS/JS served as-is \u2014 no framework, no bundler, no\nbuild step. It can still look premium: modern CSS (custom properties, grid,\n`clamp()`, container queries) and small progressive JS carry polished, fully\nresponsive sites. Reach for a framework only when real app state, routing,\nauth, or data demands it.\n\n## When To Use\n\nUse this skill when `selected_stack` is Vanilla or when the request is a static\nwebsite that does not need framework state, routing, auth, database, cart,\ncheckout, CMS, or admin UI.\n\nCommon matches:\n\n- landing page\n- portfolio\n- personal brand\n- service or brochure website\n- waitlist page\n- event page\n- simple static news/media/editorial site without CMS/admin/feed\n- static product catalog without checkout/cart/accounts\n\n## When Not To Use\n\n- Dashboards, admin panels, or CRUD screens \u2192 `react-scaffold`.\n- Authenticated user flows or complex client state \u2192 a framework scaffold.\n- Cart/checkout/accounts/inventory \u2192 framework + backend guidance.\n- Many generated pages from a data source/CMS \u2192 Astro or a framework.\n\n## HARD STOP: Never Re-Scaffold An Existing App\n\nBefore writing ANY scaffold file, check the workspace. If `package.json` (or\nan existing `index.html` app shell for vanilla projects) and source files\nalready exist, this project already has an app \u2014 scaffolding is DONE and this\nskill must not overwrite it. Read the existing entry points and source tree\nfirst, then build ON TOP of the existing files: keep the entry points,\nrouting, and dependency choices already in place. Overwriting the scaffold\nfiles on an existing project destroys the user\'s app (this happened in\nproduction). If the existing code seems inconsistent with the request, ask\nthe user \u2014 never replace silently.\n\n## Required File Shape\n\nA vanilla project is created from a starter, so these files usually ALREADY\nEXIST in the workspace:\n\n```text\nindex.html          entry page: skip link, header/main/footer, module script\ncss/\n  tokens.css        design tokens (colour, spacing, type, radius) + dark mode\n  style.css         reset, base type, layout primitives, components\njs/\n  main.js           entry MODULE: sets the `js` flag, calls the init functions\n  ui.js             named exports: initNav, initReveal, setCurrentYear\nassets/\n  favicon.svg\n.gitignore\n```\n\n**Edit these files. Do not recreate them.** Rewrite the copy, restyle the\ntokens, add sections and pages \u2014 but keep the shape: the token/style split,\nthe `type="module"` entry script, the `js`-flag reveal guard. They are there\nbecause each one prevents a defect that has shipped to real users.\n\nIf the workspace is empty (no `index.html`), create the same shape yourself.\n\nDo not create:\n\n- `package.json`\n- `src/`\n- `vite.config.*`\n- `node_modules/`\n- a build script\n\n## Allowed Complexity\n\n- Multiple `.html` pages when the user asks for more than one page.\n- Small JS modules for navigation, filtering, validation, and enhancement.\n- No framework, no bundler, no TypeScript build. If the project starts needing\n  real app state, routing, or backend data, reconsider the stack rather than\n  bolting complexity onto Vanilla.\n\n## HTML Rules\n\n- Use semantic landmarks: `header`, `main`, `section`, `article`, `footer`.\n- Use relative paths: `./css/style.css`, `./js/main.js`, `./assets/...`.\n- Include real content from the user prompt. Do not leave generic framework starter text.\n- Include SEO basics: title, description, viewport, social metadata when useful.\n- Use forms only as static/client-side UI unless a backend is configured.\n\nMinimal entry:\n\n```html\n<!doctype html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8" />\n    <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n    <meta name="description" content="Project description" />\n    <link rel="icon" href="./assets/favicon.svg" type="image/svg+xml" />\n    <link rel="stylesheet" href="./css/tokens.css" />\n    <link rel="stylesheet" href="./css/style.css" />\n    <title>Project Name</title>\n  </head>\n  <body>\n    <header>...</header>\n    <main>...</main>\n    <footer>...</footer>\n    <script type="module" src="./js/main.js"></script>\n  </body>\n</html>\n```\n\n### `type="module"` Is Not Optional\n\nAny script that uses `import` or `export` MUST be loaded with\n`type="module"`. A classic `<script src>` throws\n\n```text\nSyntaxError: Cannot use import statement outside a module\n```\n\nbefore its first statement runs \u2014 the whole page stops working. This shipped\nto a real user: the product grid stayed empty and every other check was green.\n`type="module"` implies `defer`, so you do not need both.\n\nSplit JavaScript across files by exporting and importing NAMES, and keep the\ntwo sides in agreement:\n\n```js\n// js/ui.js\nexport function initNav() { /* \u2026 */ }\n\n// js/main.js\nimport { initNav } from \'./ui.js\';\ninitNav();\n```\n\nIf the name on one side does not exist on the other, the browser throws\n`does not provide an export named \'\u2026\'` and, again, nothing runs.\n\n### Never Hand-Roll Cache-Busting\n\nReference local assets by their plain path \u2014 exactly as above. Do **not** append\na version or timestamp query (`?v=`, `?t=`, `?v=1.0`), and never build one from\nan expression.\n\nThe platform already serves un-hashed assets with `Cache-Control: no-cache`, so\na rebuilt file is picked up on the next load. A hand-rolled buster is redundant\nat best; the attempts that get written are HTML-invalid:\n\n```html\n<!-- WRONG: JS syntax cannot execute inside an HTML attribute. The browser\n     reads src="js/main.js?v=" and turns the rest into junk attributes. -->\n<script src="js/main.js?v=" + new Date().getTime()></script>\n\n<!-- RIGHT -->\n<script src="./js/main.js" defer></script>\n```\n\nHTML attributes are inert text: there is no scope in which `+ new Date()...`\nruns. If you ever want a value computed at runtime, set it from JavaScript in\n`js/main.js`, never inline in the tag.\n\n## CSS And Styling Expectations\n\n- Start `css/style.css` with the design-system baseline (see ui-generation-core):\n  ```css\n  :root { --app-bg: #ffffff; --app-fg: #111827; }\n  html, body { min-height: 100%; margin: 0; background: var(--app-bg); color: var(--app-fg); }\n  ```\n  An opaque `--app-bg` on `html, body` is mandatory \u2014 the page is never transparent.\n- Use modern CSS: custom properties, grid/flex, `clamp()`, container-friendly sizing.\n- Tokenize color, spacing, radius, and type scale with custom properties \u2014\n  `css/tokens.css` in the starter is that file; put derived values there too.\n\n### Arithmetic Needs `calc()`\n\nCSS has no implicit maths. A token multiplied inline is not "mostly right",\nit is INVALID \u2014 the browser discards the entire declaration and the element\nsilently loses that property:\n\n```css\n/* WRONG: the whole rule\'s padding is dropped, the button renders flush */\n.button { padding: var(--space-3) var(--space-3) * 2; }\n\n/* RIGHT */\n.button { padding: var(--space-3) calc(var(--space-3) * 2); }\n```\n\nThis shipped to a real user across ten declarations: navigation, call-to-action\nand hero spacing all vanished while the stylesheet loaded fine and every gate\nstayed green. Nothing catches it \u2014 a linter cannot check inside `var()`.\nWrap every `*`, `/`, `+`, `-` between values in `calc()`.\n\n### Never Hide Content Without A JS Guard\n\nIf something starts at `opacity: 0` and only JavaScript reveals it, a script\nfailure leaves a blank page. Gate the hidden state on the `js` class that\n`js/main.js` sets:\n\n```css\n.js .reveal { opacity: 0; transition: opacity .5s ease; }\n.js .reveal.is-visible { opacity: 1; }\n```\n- Keep the visual language specific to the prompt, not generic SaaS boilerplate.\n- Mobile-first responsive rules; no horizontal scroll at any breakpoint.\n- Provide visible focus states and sufficient color contrast (WCAG AA).\n- Avoid unused CSS frameworks or resets unless needed.\n\n## JavaScript Rules\n\n- Keep JavaScript small and progressive.\n- Use it for navigation toggles, small filters, form validation, animations, and enhancement.\n- If the project starts needing complex state, routing, or backend data, reconsider the stack before expanding Vanilla too far.\n\n## Routing Rules\n\n- Prefer real multi-page navigation with separate `.html` files and normal links.\n- Use in-page anchor links for single-page sites.\n- Do not build a client-side SPA router in Vanilla; if that is needed, the stack\n  is wrong.\n\n## Data And Backend Rules\n\n- No database or server calls unless a backend is configured (see the STOP gate\n  in the build agent). Do not fabricate mock backends or fake data arrays.\n- Forms are static/client-side only unless a managed backend exists.\n\n## Asset Path Rules\n\n- Reference the project\'s own assets with paths relative to the file containing\n  the reference so output works under any host. From root `index.html`, use\n  `./css/...`, `./js/...`, and `./assets/...`. Inside `css/style.css`, an asset\n  under the project-root `assets/` directory is `../assets/...` because CSS\n  `url(...)` resolves relative to the stylesheet, not to the HTML document.\n- No `<base>` tag; no absolute platform URLs for the project\'s own content.\n\n## Verification\n\nNo dependency install or `npm run build` is required. Verify every local HTML\nand CSS reference by resolving it from the file that contains the reference.\n\n## Common Failure Modes\n\n- Leaving the starter\'s placeholder copy ("Replace this headline", "Card\n  heading", "Brand") in the shipped page.\n- Recreating the starter\'s files instead of editing them.\n- `import`/`export` in a script loaded without `type="module"`.\n- Arithmetic between values without `calc()`.\n- Creating `package.json`/`src/`/`vite.config.*` out of habit.\n- Low-contrast text or missing focus states.\n- Horizontal scroll on mobile from fixed widths.\n- Absolute/hardcoded platform URLs for the project\'s own assets.\n'
+  }
+};
+
+// src/lib/skills.ts
+var SKILLS = skills_default.skills;
+var CONTRACT_SKILL = "agentful-template-contract";
+var SCAFFOLD_BY_FRAMEWORK = {
+  nextjs: "nextjs-scaffold",
+  vanilla: "vanilla-scaffold"
+  // vite resolves per dependency below (react vs vue).
+  // cra/nuxt get no scaffold skill: the react/vue skills are Vite-specific
+  // and would teach the wrong shape — the template contract still applies.
+};
+function hasVueDependency(rootDir) {
+  try {
+    const pkg = JSON.parse((0, import_node_fs11.readFileSync)((0, import_node_path13.join)(rootDir, "package.json"), "utf8"));
+    return Boolean({ ...pkg.dependencies, ...pkg.devDependencies }["vue"]);
+  } catch {
+    return false;
+  }
+}
+function selectSkills(framework, rootDir) {
+  const names = [CONTRACT_SKILL];
+  if (framework === "vite") {
+    names.push(hasVueDependency(rootDir) ? "vue-scaffold" : "react-scaffold");
+  } else {
+    const scaffold = SCAFFOLD_BY_FRAMEWORK[framework];
+    if (scaffold) names.push(scaffold);
+  }
+  return names.filter((name) => name in SKILLS);
+}
+function skillBody(name) {
+  const raw = SKILLS[name];
+  const match = raw.match(/^---\n[\s\S]*?\n---\n/);
+  return (match ? raw.slice(match[0].length) : raw).trim();
+}
+function renderSkillsInstruction(names) {
+  const known = names.filter((name) => name in SKILLS);
+  if (known.length === 0) return null;
+  const sections = known.map((name) => skillBody(name));
+  return "# Platform deployment skills (mandatory)\n\nThese are the same skills the cloud build agent loads for this stack.\nFollow them when scaffolding or editing \u2014 they are not optional hints.\n\n" + sections.join("\n\n---\n\n") + "\n";
+}
+function skillsInstructionFor(framework, rootDir) {
+  if (!(0, import_node_fs11.existsSync)(rootDir)) return null;
+  return renderSkillsInstruction(selectSkills(framework, rootDir));
+}
+
 // src/lib/models.ts
 async function fetchModelCatalog(auth, fallback) {
   const regionDefaultsToBedrock = fallback.ai_region === "eu" || fallback.ai_region === "de";
@@ -5348,15 +6558,15 @@ function decideLocalProviders(policy) {
 }
 
 // src/lib/localProviders.ts
-var import_node_fs9 = require("fs");
-var import_node_path11 = require("path");
+var import_node_fs12 = require("fs");
+var import_node_path14 = require("path");
 var LOCAL_PROVIDERS_FILE = "local-providers.json";
 function localProvidersPath() {
-  return (0, import_node_path11.join)(configDir(), LOCAL_PROVIDERS_FILE);
+  return (0, import_node_path14.join)(configDir(), LOCAL_PROVIDERS_FILE);
 }
 function readLocalProviders() {
   try {
-    const raw = JSON.parse((0, import_node_fs9.readFileSync)(localProvidersPath(), "utf8"));
+    const raw = JSON.parse((0, import_node_fs12.readFileSync)(localProvidersPath(), "utf8"));
     if (raw && typeof raw === "object" && !Array.isArray(raw)) {
       const map = raw.providers && typeof raw.providers === "object" ? raw.providers : raw;
       const usable = {};
@@ -5391,8 +6601,8 @@ function resolveLocalProviders(policy) {
 }
 function writeLocalProvidersExample() {
   const path = localProvidersPath();
-  if ((0, import_node_fs9.existsSync)(path)) return path;
-  (0, import_node_fs9.mkdirSync)(configDir(), { recursive: true });
+  if ((0, import_node_fs12.existsSync)(path)) return path;
+  (0, import_node_fs12.mkdirSync)(configDir(), { recursive: true });
   const example = {
     _comment: 'Providers with your own API key, running locally. Requests go directly to the provider \u2014 no Agentful credits, no platform region guarantee. Remove the leading underscore from "_anthropic" and fill in your key to enable it.',
     _anthropic: {
@@ -5402,21 +6612,21 @@ function writeLocalProvidersExample() {
       models: { "claude-sonnet-4-5": { name: "Claude Sonnet 4.5 (my key)" } }
     }
   };
-  (0, import_node_fs9.writeFileSync)(path, JSON.stringify(example, null, 2) + "\n", "utf8");
+  (0, import_node_fs12.writeFileSync)(path, JSON.stringify(example, null, 2) + "\n", "utf8");
   try {
-    (0, import_node_fs9.chmodSync)(path, 384);
+    (0, import_node_fs12.chmodSync)(path, 384);
   } catch {
   }
   return path;
 }
 
 // src/lib/sessions.ts
-var import_node_fs10 = require("fs");
-var import_node_path12 = require("path");
+var import_node_fs13 = require("fs");
+var import_node_path15 = require("path");
 var import_node_child_process4 = require("child_process");
 function lastSessionForDirectory(cwd = process.cwd()) {
-  const dbPath = (0, import_node_path12.join)(engineXdg().dataHome, "opencode", "opencode.db");
-  if (!(0, import_node_fs10.existsSync)(dbPath)) return null;
+  const dbPath = (0, import_node_path15.join)(engineXdg().dataHome, "opencode", "opencode.db");
+  if (!(0, import_node_fs13.existsSync)(dbPath)) return null;
   const escaped = cwd.replace(/'/g, "''");
   const res = (0, import_node_child_process4.spawnSync)(
     "sqlite3",
@@ -5456,10 +6666,21 @@ async function tuiCommand(opts = {}) {
     fetchLocalProviderPolicy(auth)
   ]);
   const local = resolveLocalProviders(policy);
-  const xdg = await writeEngineSession(session, catalog, local.providers);
+  const framework = detectFramework(process.cwd());
+  const skills = skillsInstructionFor(framework, process.cwd());
+  const xdg = await writeEngineSession(session, catalog, local.providers, framework, skills);
   const binDir = ensureCliOnPath();
   ui.info(`Signed in as ${auth.email} \u2014 usage runs on your Agentful credits.`);
   if (project) ui.info(`Linked project: ${project.title} (\`agentful push\` for a live preview)`);
+  if (framework === "unknown") {
+    ui.info(paint.dim(
+      `Mode: ${CLOUD_AGENT} (cloud target) \u2014 no supported framework detected here; a push would be rejected. Tab switches to ${LOCAL_AGENT} for free local work.`
+    ));
+  } else {
+    ui.info(paint.dim(
+      `Mode: ${CLOUD_AGENT} \u2014 building for Agentful Cloud (${frameworkDisplayName(framework)}). Tab switches to ${LOCAL_AGENT} for work that is not meant to deploy.`
+    ));
+  }
   const localCount = Object.keys(local.providers).length;
   ui.info(`${catalog.models.length + localCount} models available \u2014 switch with /model.`);
   if (localCount) {
@@ -5484,7 +6705,7 @@ async function tuiCommand(opts = {}) {
   }
   console.log("");
   if (process.stdout.isTTY) process.stdout.write(`\x1B]0;${brand.displayName}\x07`);
-  const code = await new Promise((resolve) => {
+  const code = await new Promise((resolve2) => {
     const engineArgs = opts.session ? ["--session", opts.session] : [];
     const child = (0, import_node_child_process5.spawn)(binPath, engineArgs, {
       stdio: "inherit",
@@ -5493,7 +6714,7 @@ async function tuiCommand(opts = {}) {
         ...process.env,
         // Slash commands run `agentful …` through the agent's bash tool, which
         // has no access to the user's shell aliases.
-        PATH: `${binDir}${import_node_path13.delimiter}${process.env.PATH || ""}`,
+        PATH: `${binDir}${import_node_path16.delimiter}${process.env.PATH || ""}`,
         XDG_CONFIG_HOME: xdg.configHome,
         XDG_DATA_HOME: xdg.dataHome,
         XDG_STATE_HOME: xdg.stateHome,
@@ -5511,10 +6732,10 @@ async function tuiCommand(opts = {}) {
         ...session.image_model ? { IMAGE_MODEL: session.image_model } : {}
       }
     });
-    child.on("exit", (c) => resolve(c ?? 0));
+    child.on("exit", (c) => resolve2(c ?? 0));
     child.on("error", (err2) => {
       ui.fail(`Could not start the engine: ${err2.message}`);
-      resolve(1);
+      resolve2(1);
     });
   });
   try {
@@ -5540,6 +6761,7 @@ async function tuiCommand(opts = {}) {
 }
 
 // src/commands/publish.ts
+init_branding();
 var SUBDOMAIN_RE = /^[a-z0-9](?:[a-z0-9-]{1,61}[a-z0-9])?$/;
 async function publishCommand(subdomain) {
   console.log(banner());
@@ -5578,6 +6800,7 @@ async function publishCommand(subdomain) {
 }
 
 // src/commands/share.ts
+init_branding();
 async function shareCommand(opts) {
   const auth = await ensureAuth();
   const project = requireProject();
@@ -5596,26 +6819,28 @@ async function shareCommand(opts) {
 }
 
 // src/commands/pull.ts
-var import_node_fs11 = require("fs");
-var import_node_path14 = require("path");
+var import_node_fs14 = require("fs");
+var import_node_path17 = require("path");
+init_branding();
+init_branding();
 function isProbablyBase64Binary(path) {
   return /\.(png|jpe?g|gif|webp|ico|woff2?|ttf|otf|eot|pdf|zip|mp[34]|webm|avif)$/i.test(path);
 }
 function writeEntry(root, rel, value) {
-  const target = (0, import_node_path14.join)(root, rel);
-  (0, import_node_fs11.mkdirSync)((0, import_node_path14.dirname)(target), { recursive: true });
+  const target = (0, import_node_path17.join)(root, rel);
+  (0, import_node_fs14.mkdirSync)((0, import_node_path17.dirname)(target), { recursive: true });
   const content = typeof value === "object" && value !== null && "content" in value ? String(value.content) : String(value ?? "");
   if (isProbablyBase64Binary(rel)) {
-    (0, import_node_fs11.writeFileSync)(target, Buffer.from(content, "base64"));
+    (0, import_node_fs14.writeFileSync)(target, Buffer.from(content, "base64"));
   } else {
-    (0, import_node_fs11.writeFileSync)(target, content, "utf8");
+    (0, import_node_fs14.writeFileSync)(target, content, "utf8");
   }
 }
 async function pullCommand(opts) {
   console.log(banner());
   const auth = await ensureAuth();
   const project = requireProject();
-  const nonHidden = (0, import_node_fs11.readdirSync)(process.cwd()).filter((n) => n !== ".agentful" && !n.startsWith("."));
+  const nonHidden = (0, import_node_fs14.readdirSync)(process.cwd()).filter((n) => n !== ".agentful" && !n.startsWith("."));
   if (nonHidden.length > 0 && !opts.force) {
     throw new ApiError(
       0,
@@ -5639,9 +6864,9 @@ async function pullCommand(opts) {
         ui.warn(`Skipped ${rel} (HTTP ${resp.status})`);
         continue;
       }
-      const target = (0, import_node_path14.join)(process.cwd(), rel);
-      (0, import_node_fs11.mkdirSync)((0, import_node_path14.dirname)(target), { recursive: true });
-      (0, import_node_fs11.writeFileSync)(target, Buffer.from(await resp.arrayBuffer()));
+      const target = (0, import_node_path17.join)(process.cwd(), rel);
+      (0, import_node_fs14.mkdirSync)((0, import_node_path17.dirname)(target), { recursive: true });
+      (0, import_node_fs14.writeFileSync)(target, Buffer.from(await resp.arrayBuffer()));
       written++;
     }
   } else if (data.files) {
@@ -5659,6 +6884,7 @@ async function pullCommand(opts) {
 var THIRD_PARTY_LICENSES_default = 'Third-party software distributed with the Agentful CLI\n======================================================\n\n## Agentful engine (opencode)\n\nThe Agentful CLI downloads and runs the opencode engine\n(https://github.com/anomalyco/opencode) as its local coding engine.\nIt is distributed under the MIT License, reproduced below.\n\nMIT License\n\nCopyright (c) 2025 opencode\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the "Software"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n\n## Bundled npm dependencies\n\ncommander (MIT), fflate (MIT), ignore (MIT) \u2014 see their repositories\nfor the full license texts.\n';
 
 // src/commands/licenses.ts
+init_branding();
 async function licensesCommand() {
   console.log(paint.bold(`${brand.name} v${VERSION}`));
   console.log("");
@@ -5666,6 +6892,7 @@ async function licensesCommand() {
 }
 
 // src/commands/models.ts
+init_branding();
 async function modelsCommand(opts) {
   console.log(banner());
   const auth = await ensureAuth();
@@ -5725,6 +6952,7 @@ async function modelsCommand(opts) {
 
 // src/commands/upgrade.ts
 var import_node_child_process6 = require("child_process");
+init_branding();
 async function upgradeCommand() {
   console.log(banner());
   let latest = "";
@@ -5781,8 +7009,9 @@ program2.name("agentful").description("Agentful in your terminal \u2014 local de
 program2.command("login").description("Sign in to your Agentful account (device flow)").option("--no-browser", "do not open the browser automatically").action(run((opts) => loginCommand({ browser: opts.browser !== false })));
 program2.command("logout").description("Remove the stored credentials").action(run(logoutCommand));
 program2.command("whoami").description("Show the signed-in account").action(run(whoamiCommand));
-program2.command("init").description("Create (or link) the Agentful cloud project for this directory").option("--link <projectId>", "link an existing project instead of creating one").option("--title <title>", "project title (skips the prompt)").action(run((opts) => initCommand(opts)));
-program2.command("push").description("Upload this project and get a live preview URL").option("--prebuilt", "upload a locally built output instead of building in the cloud").option("--dir <path>", "built-output directory for --prebuilt (default: auto-detect)").action(run((opts) => pushCommand(opts)));
+program2.command("init").description("Create (or link) the Agentful cloud project for this directory").argument("[directory]", "with --template: new folder to scaffold into (created for you)").option("--link <projectId>", "link an existing project instead of creating one").option("--title <title>", "project title (skips the prompt)").option("--template <framework>", "scaffold from a platform starter (nextjs, react, vue, vanilla)").action(run((directory, opts) => initCommand(opts, directory)));
+program2.command("push").description("Upload this project and get a live preview URL").option("--prebuilt", "upload a locally built output instead of building in the cloud").option("--dir <path>", "built-output directory for --prebuilt (default: auto-detect)").option("--force", "push even when the pre-upload compatibility check finds blocking issues").action(run((opts) => pushCommand(opts)));
+program2.command("build-status").description("Show the cloud's record of the last build (the real error on failures)").action(run(buildStatusCommand));
 program2.command("open").description("Open the live preview in the browser").action(run(openCommand));
 program2.command("tui").description("Start the Agentful coding TUI with your Agentful account").option("-s, --session <id>", "resume a previous session").action(run((opts) => tuiCommand(opts)));
 program2.command("publish <subdomain>").description("Publish the built project at https://<subdomain>.agentful.dev").action(run(publishCommand));