@autono/create-open-pages 0.6.0 → 0.8.0

package/dist/cli.js

@@ -1,18 +1,18 @@
 #!/usr/bin/env node
+import * as p from "@clack/prompts";
+import { S_ERROR } from "@clack/prompts";
 import chalk from "chalk";
 import { cp, mkdir, readFile, readdir, rm, symlink, writeFile } from "node:fs/promises";
-import { basename, dirname, join, resolve, sep } from "node:path";
+import { basename, dirname, join, relative, resolve, sep } from "node:path";
 import { fileURLToPath } from "node:url";
 import { Command } from "commander";
-import prompts from "prompts";
 import { spawn } from "node:child_process";
 import { createHash } from "node:crypto";
 import { existsSync } from "node:fs";
-
 //#region src/git.ts
 const IS_WINDOWS$1 = process.platform === "win32";
 async function run$1(cmd, args, cwd) {
-	return new Promise((resolve$1, reject) => {
+	return new Promise((resolve, reject) => {
 		const child = spawn(cmd, args, {
 			cwd,
 			stdio: [
@@ -31,7 +31,7 @@ async function run$1(cmd, args, cwd) {
 			stderr += d.toString();
 		});
 		child.on("error", reject);
-		child.on("close", (code) => resolve$1({
+		child.on("close", (code) => resolve({
 			code,
 			stdout,
 			stderr
@@ -40,8 +40,7 @@ async function run$1(cmd, args, cwd) {
 }
 async function isGitAvailable() {
 	try {
-		const res = await run$1("git", ["--version"], process.cwd());
-		return res.code === 0;
+		return (await run$1("git", ["--version"], process.cwd())).code === 0;
 	} catch {
 		return false;
 	}
@@ -63,10 +62,10 @@ async function gitInitAndCommit(target) {
 		status: "skipped-nested",
 		message: "target is already inside a git work tree; leaving parent repo alone"
 	};
-	const init$1 = await run$1("git", ["init"], target);
-	if (init$1.code !== 0) return {
+	const init = await run$1("git", ["init"], target);
+	if (init.code !== 0) return {
 		status: "failed",
-		message: `git init failed: ${init$1.stderr.trim() || init$1.stdout.trim()}`
+		message: `git init failed: ${init.stderr.trim() || init.stdout.trim()}`
 	};
 	const add = await run$1("git", ["add", "-A"], target);
 	if (add.code !== 0) return {
@@ -84,7 +83,6 @@ async function gitInitAndCommit(target) {
 	};
 	return { status: "committed" };
 }
-
 //#endregion
 //#region src/init.ts
 const HERE = dirname(fileURLToPath(import.meta.url));
@@ -99,11 +97,10 @@ function sanitizeDirName(value) {
 }
 async function isDirNonEmpty(target) {
 	if (!existsSync(target)) return false;
-	const entries = await readdir(target);
-	return entries.some((e) => !e.startsWith("."));
+	return (await readdir(target)).some((e) => !e.startsWith("."));
 }
 function coreVersionRange() {
-	return `^0.6.0`;
+	return `^0.8.0`;
 }
 async function linkOrCopy(relSrc, dst) {
 	await rm(dst, {
@@ -155,21 +152,9 @@ async function collectFiles(dir, prefix = "") {
 	}
 	return out;
 }
-async function runInstall(pm, cwd) {
-	await new Promise((res, rej) => {
-		const child = spawn(pm, ["install"], {
-			cwd,
-			stdio: "inherit",
-			shell: IS_WINDOWS
-		});
-		child.on("error", rej);
-		child.on("close", (code) => code === 0 ? res() : rej(new Error(`${pm} install exited with code ${code}`)));
-	});
-}
-async function init(opts) {
-	const { dir, force, name, packageManager, install, git } = opts;
+async function scaffold(opts) {
+	const { target, force, name } = opts;
 	if (!existsSync(TEMPLATE_DIR)) throw new Error(`Template missing at ${TEMPLATE_DIR}. If you are running from source, run \`pnpm --filter @autono/create-open-pages build\` first.`);
-	const target = resolve(process.cwd(), dir);
 	await mkdir(target, { recursive: true });
 	if (await isDirNonEmpty(target) && !force) throw new Error(`Target ${target} is not empty. Pass --force to scaffold into it anyway.`);
 	await cp(TEMPLATE_DIR, target, { recursive: true });
@@ -185,34 +170,38 @@ async function init(opts) {
 		await writeFile(pkgPath, `${JSON.stringify(pkg, null, 2)}\n`);
 	}
 	await writeFile(join(target, ".gitignore"), "node_modules\ndist\nexport\n.DS_Store\n");
-	const cdTarget = dir === "." ? basename(target) : dir;
-	process.stdout.write(`\n${chalk.green.bold("✔ Created open-pages workspace")} ${chalk.dim(`in ${target}`)}\n`);
-	let installed = false;
-	if (install) {
-		process.stdout.write(`\n${chalk.bold(`Installing dependencies with ${packageManager}…`)}\n\n`);
-		try {
-			await runInstall(packageManager, target);
-			installed = true;
-		} catch (err) {
-			const msg = err instanceof Error ? err.message : String(err);
-			process.stdout.write(`\n${chalk.yellow("! Dependency install failed:")} ${chalk.dim(msg)}\n` + chalk.dim(`  You can retry manually with \`${packageManager} install\`.\n`));
-		}
-	}
-	if (git) {
-		const result = await gitInitAndCommit(target);
-		if (result.status === "committed") process.stdout.write(`${chalk.green("✔")} Initialized git repository with first commit.\n`);
-		else if (result.status === "skipped-nested") process.stdout.write(`${chalk.yellow("!")} Skipped ${chalk.bold("git init")}: ${chalk.dim(result.message ?? "")}\n`);
-		else if (result.status === "skipped-no-git") process.stdout.write(`${chalk.yellow("!")} Skipped git setup: ${chalk.dim(result.message ?? "")}\n`);
-		else process.stdout.write(`${chalk.yellow("!")} Git setup failed: ${chalk.dim(result.message ?? "")}\n` + chalk.dim("  You can initialize the repo manually.\n"));
-	}
-	process.stdout.write(`\n${chalk.bold("Next steps:")}\n`);
-	process.stdout.write(`  ${chalk.cyan(`cd ${cdTarget}`)}\n`);
-	if (!installed && install) process.stdout.write(`  ${chalk.cyan(`${packageManager} install`)}\n`);
-	else if (!install) process.stdout.write(`  ${chalk.cyan(`${packageManager} install`)}    ${chalk.dim("# install was skipped")}\n`);
-	const devCommand = packageManager === "npm" ? "npm run dev" : `${packageManager} dev`;
-	process.stdout.write(`  ${chalk.cyan(devCommand)}\n`);
 }
-
+function installDependencies(pm, cwd) {
+	return new Promise((res) => {
+		let output = "";
+		const child = spawn(pm, ["install"], {
+			cwd,
+			stdio: [
+				"ignore",
+				"pipe",
+				"pipe"
+			],
+			shell: IS_WINDOWS
+		});
+		child.stdout?.on("data", (chunk) => {
+			output += chunk.toString();
+		});
+		child.stderr?.on("data", (chunk) => {
+			output += chunk.toString();
+		});
+		child.on("error", (err) => res({
+			ok: false,
+			output: err.message
+		}));
+		child.on("close", (code) => {
+			if (code === 0) res({ ok: true });
+			else res({
+				ok: false,
+				output: output.trim() || `${pm} install exited with code ${code}`
+			});
+		});
+	});
+}
 //#endregion
 //#region src/package-manager.ts
 const PACKAGE_MANAGERS = [
@@ -228,17 +217,18 @@ function detectPackageManager() {
 	if (ua.startsWith("bun")) return "bun";
 	return "npm";
 }
-
 //#endregion
 //#region src/index.ts
 async function readVersion() {
 	const here = dirname(fileURLToPath(import.meta.url));
-	const pkg = JSON.parse(await readFile(join(here, "..", "package.json"), "utf8"));
-	return pkg.version;
+	return JSON.parse(await readFile(join(here, "..", "package.json"), "utf8")).version;
 }
-function onCancel() {
-	process.stdout.write(chalk.dim("\nCancelled.\n"));
-	process.exit(130);
+function unwrap(value) {
+	if (p.isCancel(value)) {
+		p.cancel("Cancelled.");
+		process.exit(130);
+	}
+	return value;
 }
 function packageManagerFromFlags(flags) {
 	const picks = [];
@@ -246,94 +236,134 @@ function packageManagerFromFlags(flags) {
 	if (flags.usePnpm) picks.push("pnpm");
 	if (flags.useYarn) picks.push("yarn");
 	if (flags.useBun) picks.push("bun");
-	if (picks.length > 1) throw new Error(`Only one of --use-npm / --use-pnpm / --use-yarn / --use-bun may be specified (got ${picks.map((p) => `--use-${p}`).join(", ")}).`);
+	if (picks.length > 1) throw new Error(`Only one of --use-npm / --use-pnpm / --use-yarn / --use-bun may be specified (got ${picks.map((pm) => `--use-${pm}`).join(", ")}).`);
 	return picks[0];
 }
+function displayPath(target) {
+	const rel = relative(process.cwd(), target);
+	if (rel === "" || rel.startsWith("..")) return target;
+	return rel;
+}
+function step(label, isTTY) {
+	const spinner = isTTY ? p.spinner() : void 0;
+	if (spinner) spinner.start(label);
+	else p.log.step(label);
+	return {
+		done(message) {
+			if (spinner) spinner.stop(message);
+			else p.log.step(message);
+		},
+		fail(message) {
+			if (spinner) spinner.error(message);
+			else p.log.error(message);
+		}
+	};
+}
+function tail(output, lines = 12) {
+	return output.split("\n").slice(-lines).join("\n");
+}
 async function runInit(dirArg, flags) {
 	const isTTY = Boolean(process.stdin.isTTY && process.stdout.isTTY);
+	let packageManager = packageManagerFromFlags(flags);
 	let dir = dirArg;
-	const name = flags.name;
 	let force = flags.force ?? false;
-	let packageManager = packageManagerFromFlags(flags);
-	if (isTTY && dir === void 0) {
-		const answers = await prompts({
-			type: "text",
-			name: "dir",
-			message: "Target directory",
-			initial: "."
-		}, { onCancel });
-		dir = answers.dir;
-	}
+	const install = flags.install !== false;
+	const git = flags.git !== false;
+	if (isTTY && dir === void 0) dir = unwrap(await p.text({
+		message: "Where should we create your workspace?",
+		placeholder: ".",
+		defaultValue: "."
+	}));
 	if (dir !== void 0) {
 		const safe = sanitizeDirName(dir);
 		if (safe !== dir) {
 			if (!isTTY) throw new Error(`Target directory "${dir}" contains characters that break shell commands (spaces, quotes, etc.). Try "${safe}" instead.`);
-			process.stdout.write(`${chalk.yellow("!")} ${chalk.bold(`"${dir}"`)} has characters that confuse shells.\n  Suggested: ${chalk.cyan(`"${safe}"`)}\n`);
-			const answers = await prompts({
-				type: "text",
-				name: "dir",
+			p.log.warn(`${chalk.bold(`"${dir}"`)} has characters that confuse shells.`);
+			dir = sanitizeDirName(unwrap(await p.text({
 				message: "Directory name",
-				initial: safe
-			}, { onCancel });
-			dir = sanitizeDirName(answers.dir ?? safe);
+				initialValue: safe,
+				validate: (value) => value?.trim() ? void 0 : "Enter a directory name."
+			})));
 		}
 	}
-	if (isTTY && packageManager === void 0 && flags.install !== false) {
+	if (isTTY && packageManager === void 0 && install) {
 		const detected = detectPackageManager();
-		const answers = await prompts({
-			type: "select",
-			name: "packageManager",
+		packageManager = unwrap(await p.select({
 			message: "Package manager",
-			choices: PACKAGE_MANAGERS.map((pm) => ({
-				title: pm,
-				value: pm
+			options: PACKAGE_MANAGERS.map((pm) => ({
+				value: pm,
+				label: pm,
+				hint: pm === detected ? "detected" : void 0
 			})),
-			initial: PACKAGE_MANAGERS.indexOf(detected)
-		}, { onCancel });
-		packageManager = answers.packageManager;
+			initialValue: detected
+		}));
 	}
 	const resolvedDir = dir ?? ".";
 	const target = resolve(process.cwd(), resolvedDir);
 	if (!force && await isDirNonEmpty(target)) {
 		if (!isTTY) throw new Error(`Target ${target} is not empty. Pass --force to scaffold into it anyway.`);
-		const { overwrite } = await prompts({
-			type: "confirm",
-			name: "overwrite",
-			message: `${chalk.yellow(target)} is not empty. Scaffold into it anyway?`,
-			initial: false
-		}, { onCancel });
-		if (!overwrite) {
-			process.stdout.write(chalk.dim("Aborted.\n"));
+		if (!unwrap(await p.confirm({
+			message: `${chalk.yellow(displayPath(target))} is not empty. Scaffold into it anyway?`,
+			initialValue: false
+		}))) {
+			p.outro(chalk.dim("Nothing written."));
 			return;
 		}
 		force = true;
 	}
-	const opts = {
-		dir: resolvedDir,
+	const pm = packageManager ?? detectPackageManager();
+	await scaffold({
+		target,
 		force,
-		name,
-		packageManager: packageManager ?? detectPackageManager(),
-		install: flags.install !== false,
-		git: flags.git !== false
-	};
-	await init(opts);
+		name: flags.name
+	});
+	p.log.step(`Created workspace ${chalk.dim(`in ${displayPath(target)}`)}`);
+	let installed = false;
+	if (install) {
+		const task = step(`Installing dependencies with ${pm}`, isTTY);
+		const result = await installDependencies(pm, target);
+		if (result.ok) {
+			installed = true;
+			task.done(`Installed dependencies with ${pm}`);
+		} else {
+			task.fail("Dependency install failed");
+			p.log.message(chalk.dim(tail(result.output)));
+		}
+	}
+	if (git) {
+		const result = await gitInitAndCommit(target);
+		if (result.status === "committed") p.log.step("Initialized git repository");
+		else if (result.status === "failed") p.log.warn(`Git setup failed ${chalk.dim(`· ${result.message ?? ""}`)}`);
+		else p.log.info(`Skipped git init ${chalk.dim(`· ${result.message ?? ""}`)}`);
+	}
+	const next = [];
+	if (target !== process.cwd()) next.push(`cd ${resolvedDir}`);
+	if (!installed) next.push(`${pm} install`);
+	next.push(pm === "npm" ? "npm run dev" : `${pm} dev`);
+	p.note(next.map((line) => chalk.cyan(line)).join("\n"), "Next steps");
+	p.outro(`All set! ${chalk.dim("Docs: https://docs.openpages.sh")}`);
 }
 async function run(argv) {
 	const version = await readVersion();
 	const program = new Command();
 	program.name("create-open-pages").description("Scaffold and manage open-pages workspaces.").version(version, "-v, --version", "print version").helpOption("-h, --help", "show help").showHelpAfterError(chalk.dim("(run `create-open-pages --help` for usage)"));
 	program.command("init", { isDefault: true }).description("Create a new open-pages workspace").argument("[dir]", "target directory", void 0).option("-f, --force", "overwrite non-empty target directory", false).option("-n, --name <name>", "override package name (defaults to folder name)").option("--use-npm", "use npm to install dependencies").option("--use-pnpm", "use pnpm to install dependencies").option("--use-yarn", "use yarn to install dependencies").option("--use-bun", "use bun to install dependencies").option("--no-install", "skip dependency installation").option("--no-git", "skip git init and initial commit").action(async (dir, flags) => {
-		await runInit(dir, flags);
+		p.intro(`${chalk.inverse.bold(" open-pages ")} ${chalk.dim(`v${version}`)}`);
+		try {
+			await runInit(dir, flags);
+		} catch (err) {
+			p.cancel(err instanceof Error ? err.message : String(err));
+			process.exit(1);
+		}
 	});
 	await program.parseAsync(argv, { from: "user" });
 }
-
 //#endregion
 //#region src/cli.ts
 run(process.argv.slice(2)).catch((err) => {
 	const message = err instanceof Error ? err.message : String(err);
-	process.stderr.write(`${chalk.red("error:")} ${message}\n`);
+	process.stderr.write(`\n  ${chalk.red(S_ERROR)} ${message}\n`);
 	process.exit(1);
 });
-
-//#endregion
+//#endregion
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autono/create-open-pages",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "Scaffold an open-pages workspace — agent skills preconfigured, live real-PDF preview out of the box.",
   "type": "module",
   "bin": {
@@ -18,7 +18,7 @@
     "prepack": "pnpm build"
   },
   "engines": {
-    "node": ">=18"
+    "node": "^20.19.0 || >=22.12.0"
   },
   "keywords": [
     "pdf",
@@ -45,14 +45,13 @@
     "access": "public"
   },
   "dependencies": {
+    "@clack/prompts": "^1.7.0",
     "chalk": "^6.0.0",
-    "commander": "^15.0.0",
-    "prompts": "^2.4.2"
+    "commander": "^15.0.0"
   },
   "devDependencies": {
-    "@types/node": "^22.19.17",
-    "@types/prompts": "^2.4.9",
-    "tsdown": "^0.9.9",
-    "typescript": "^5.9.3"
+    "@types/node": "^26.6.2",
+    "tsdown": "^0.23.0",
+    "typescript": "^7.0.2"
   }
 }

package/template/.agents/skills/apply-comments/SKILL.md

@@ -56,6 +56,7 @@ Your job: read those markers, perform the described edits, and delete the marker
    - After all edits, re-read the file and confirm the only remaining markers are ones you reported as skipped.
    - Confirm the edited JSX is well-formed (balanced tags, no dangling attributes) and that changed `className` strings are literal Tailwind utilities. If the project's `package.json` has typecheck/lint scripts, run them with the project's package manager; scaffolded projects ship neither TypeScript nor a linter — there, rely on the running dev server (or the `build` script) to surface compile errors. Fix any errors you introduced.
    - For layout changes, mentally check the Mobile viewport (390px): did the edit introduce a fixed width or a grid with no stacking fallback?
+   - When a comment changed interactive elements, forms, motion, or layout, run the `web-design-guidelines` skill on the page and fix any regression it reports before you report.
 
 7. **Report.**
    - Summarise: `N applied, M skipped` plus a one-line description of each change (including the page id).

package/template/.agents/skills/create-page/SKILL.md

@@ -94,7 +94,11 @@ Read the **`page-authoring`** skill before writing — file contract, `@/ui/*` c
 
 ## Step 7 — Self-review
 
-Run the checklist in `page-authoring` ("Self-review before finishing"): every button/input/card/dialog/tab is a `@/ui` component, colors are tokens, nothing under `ui/` changed. Check all three viewports.
+Run the checklist in `page-authoring` ("Self-review before finishing"): every button/input/card/dialog/tab is a `@/ui` component, colors are tokens, nothing under `ui/` changed. Check all three viewports. Pay particular attention to the CTA and motion items: one label per intent, no wrapped button text at desktop, every animation answers "what does this communicate?".
+
+## Step 7b — Guidelines review
+
+Run the `web-design-guidelines` skill on `pages/<id>/` (it fetches Vercel's current Web Interface Guidelines and reports `file:line` findings). Fix what it finds in the page files, re-run until clean or until only findings you can justify remain, and mention any you left in the hand-off.
 
 ## Step 8 — Hand off to the user
 

package/template/.agents/skills/create-theme/SKILL.md

@@ -25,6 +25,7 @@ A theme can be derived from any combination of:
 - **Image references / brand guidelines** — paths or URLs to screenshots, mood boards, logo files, a brand PDF. You will translate them into OKLCH tokens.
 - **Free-text description** — prose describing the desired palette, weight, feel.
 - **An existing page** — `pages/<id>/index.tsx` whose look should become reusable.
+- **A `DESIGN.md`** — a design-system document in the Google-spec shape (YAML frontmatter, then Overview, Colors, Typography, Layout, Elevation, Shapes, Components, Do's and Don'ts). [designmd.supply](https://designmd.supply) generates one from any public domain, so "match our brand" is: run the site through it, drop the file at `themes/<id>.design.md` (or paste the path), and ask for a theme.
 
 If the user's original message already specifies the inputs unambiguously, skip the question and proceed. Otherwise call `AskUserQuestion` (multi-select) so they can pick one or more sources, and ask follow-ups (paths, preset code, page id, prose) only as needed.
 
@@ -34,6 +35,7 @@ If the user's original message already specifies the inputs unambiguously, skip
 - **Images**: read each path with the `Read` tool (it accepts images). Note dominant colors (write them as hex, then convert to OKLCH), type family feel, corner radius, surface treatment (flat vs. cards vs. borders), light or dark default, and chrome (nav style, footer).
 - **Text**: extract explicit values (hex codes, font names, "rounded", "sharp", "dense") and resolve vague language into concrete decisions before writing.
 - **Existing page**: read `pages/<id>/index.tsx` (and `components/`) and pull any raw palette classes or hex values into token roles (the page's `bg-[#0b0b10]` root → `--background`; its CTA fill → `--primary`; its card border → `--border`), plus fonts and radius.
+- **`DESIGN.md`**: read it and map sections onto tokens — **Colors** gives `--background`/`--foreground`, `--primary`, `--secondary`, `--accent`, `--muted`, `--destructive` (primary = the brand's main action color, not its logo color, when they differ); **Typography** gives `--font-sans` / `--font-heading` and the type-scale feel; **Shapes** gives `--radius`; **Elevation** decides flat vs. card-with-shadow treatment in the component notes; **Layout** informs container widths and density in the demo; **Components** and **Do's and Don'ts** become the "Components in this theme" guidance. Colors may arrive as hex, `rgb()`, `hsl()`, `oklch()`, or CSS named colors — parse each by its own syntax, then convert to OKLCH. A single light palette is normal; derive the `.dark` block from it (invert lightness, keep hue and chroma) and say so in the `.md`.
 
 Every color ends up as `oklch(L C H)` — the same format as `styles/globals.css`. When inputs disagree (images use blue but the description says green), ask the user which to honor.
 

package/template/.agents/skills/page-authoring/SKILL.md

@@ -187,7 +187,10 @@ A theme is `themes/<id>.md` (direction and component notes) + `themes/<id>.css`
 - [ ] One coherent type scale across the page; contrast holds on dark sections.
 - [ ] Designed repeats are explicit component instances; data lists are a `.map` over a typed const.
 - [ ] No `window`/`document` access at module top level; effects clean up.
+- [ ] One label per CTA intent across the page ("Get started" in the nav, hero, and footer — not "Get started" / "Sign up free" / "Try it"), and no primary button label wraps at desktop width.
+- [ ] Every animation is motivated: it shows hierarchy, sequence, feedback, or a state change. If you cannot say which in one sentence, remove it. `motion-safe:` / `motion-reduce:` variants respect the user's preference.
 - [ ] Nothing outside `pages/<id>/` was edited.
+- [ ] Ran the `web-design-guidelines` skill on the page and resolved or justified its findings.
 
 ## Anti-patterns
 

package/template/.agents/skills/web-design-guidelines/SKILL.md

@@ -0,0 +1,41 @@
+---
+name: web-design-guidelines
+description: Review page code against Vercel's Web Interface Guidelines — accessibility, focus and keyboard handling, forms, motion, layout, typography, and performance. Use when asked to "review my page", "check accessibility", "audit the design", "review UX", or as the review pass at the end of `create-page` and `apply-comments`.
+metadata:
+  author: vercel
+  version: "1.0.0"
+  argument-hint: <page-id or file-or-pattern>
+---
+
+# Web Interface Guidelines
+
+Review page files for compliance with Vercel's [Web Interface Guidelines](https://github.com/vercel-labs/web-interface-guidelines) (MIT). Vendored from the [vercel-labs/agent-skills](https://github.com/vercel-labs/agent-skills) `web-design-guidelines` skill and scoped to an open-pages workspace.
+
+## How it works
+
+1. Fetch the latest guidelines from the source URL below.
+2. Read the files to review.
+3. Check them against every rule in the fetched guidelines.
+4. Report findings in the terse `file:line` format the guidelines specify.
+
+## Guidelines source
+
+Fetch fresh guidelines before each review:
+
+```
+https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
+```
+
+Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and the output format. If the fetch fails (offline, blocked), say so and fall back to the self-review checklist in the `page-authoring` skill instead of guessing at rules.
+
+## What to review
+
+- Given a page id, review the page's entry (`pages/<id>/index.tsx` or `pages/<id>/index.html`), everything under `pages/<id>/components/`, and any `styles.css`, `style.css`, or `main.js` beside the entry.
+- Given a file or glob, review those files.
+- Given nothing, resolve the current page with the `current-page` skill; if that yields nothing, ask which page to review.
+
+Never review or report on files under `ui/`, `lib/`, `hooks/`, or `styles/`. Those are the shared shadcn set and are not edited for one page; a finding there is a `create-theme` or upstream matter, not a page fix.
+
+## Applying findings
+
+Report first. When the user asks you to fix, or the review runs inside `create-page` or `apply-comments`, apply the fixes to the page files only, following the `page-authoring` skill: keep `@/ui/*` components, keep semantic tokens, keep the type scale. Do not add dependencies to satisfy a rule.

package/template/AGENTS.md

@@ -18,6 +18,7 @@ You are authoring **web pages** in this repo. Every page is a React component re
 - **Applying inspector comments** (`@page-comment` markers in a page) — use the `apply-comments` skill.
 - **Creating or extracting a theme** — use the `create-theme` skill. A theme is `themes/<id>.md` plus `themes/<id>.css` (shadcn token overrides) and a `<id>.demo.tsx` preview; `create-page` reads it before authoring and a page opts in with `meta.theme`.
 - **shadcn CLI, registries, presets, component docs** — the bundled `shadcn` skill (the official one) covers `npx shadcn@latest search / view / docs / add / apply`.
+- **Reviewing a page for accessibility and interaction quality** — the bundled `web-design-guidelines` skill (Vercel's, vendored) checks a page against the current Web Interface Guidelines. `create-page` runs it before hand-off; run it on its own when asked to "review my page" or "check accessibility".
 - **Resolving "this page" / "this element"** — when the user references the current page or selection without naming it, consult the `current-page` skill. It reads the dev server's `node_modules/.open-pages/current.json` to find which page and inspector-picked element they mean.
 - **Any other page edit** — read the `page-authoring` skill before writing. It is the technical reference for everything inside `pages/<id>/`: file contract, styling with Tailwind, layout and responsiveness, interactivity, assets and fonts, self-review checklist. `create-page` and `apply-comments` both defer to it for the *how*.
 

package/template/netlify.toml

@@ -1,3 +1,7 @@
+[build]
+  command = "npm run build"
+  publish = "dist"
+
 [[redirects]]
   from = "/*"
   to = "/index.html"

package/template/package.json

@@ -17,7 +17,7 @@
     "react-dom": "^19.2.0",
     "@base-ui/react": "^1.7.0",
     "@fontsource-variable/geist": "^5.3.0",
-    "@shadcn/react": "^0.3.0",
+    "@shadcn/react": "^0.3.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -39,7 +39,6 @@
   "devDependencies": {
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
-    "vite": "^6.4.3",
     "tailwindcss": "^4.3.3",
     "typescript": "^5.9.3"
   }

package/template/tsconfig.json

@@ -12,7 +12,6 @@
     "strict": true,
     "skipLibCheck": true,
     "types": ["@autono/open-pages/env"],
-    "baseUrl": ".",
     "paths": {
       "@/*": ["./*"]
     }

package/template/vercel.json

@@ -1,3 +1,5 @@
 {
+  "buildCommand": "npm run build",
+  "outputDirectory": "dist",
   "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
 }