ship-create 1.5.0 → 1.6.0

package/create.mjs

@@ -10,18 +10,6 @@
  *
  * Usage:
  *   npx ship-create
- *
- * All templates (starter-kit app, agent rule files, Claude skill) are
- * bundled inside this package's own templates/ folder — nothing is read
- * from outside, so it works standalone via npx.
- *
- * What changed from v1.3.1 → v1.4.0:
- *  - Removed the AI-tool picker (no longer needed)
- *  - Added 4 idea questions so PROJECT.md + HUMAN_FLOW.md are pre-filled
- *    with real content (no [bracket placeholders] in the core sections)
- *  - Runs `npm install` automatically so the project is ready to open
- *  - End message tells the user exactly how to start building in their
- *    AI coding tool — no intermediate manual steps
  */
 
 import fs from "node:fs";
@@ -34,19 +22,105 @@ import { spawnSync } from "node:child_process";
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const TEMPLATES_DIR = path.join(__dirname, "templates");
 
+// ─── ANSI helpers ────────────────────────────────────────────────────────────
+
+const C = {
+  reset:  "\x1b[0m",
+  bold:   "\x1b[1m",
+  dim:    "\x1b[2m",
+  cyan:   "\x1b[36m",
+  green:  "\x1b[32m",
+  white:  "\x1b[37m",
+  hideCursor: "\x1b[?25l",
+  showCursor: "\x1b[?25h",
+  clearLine:  "\x1b[2K",
+  up: (n) => `\x1b[${n}A`,
+};
+
+// ─── Data ─────────────────────────────────────────────────────────────────────
+
 const PRODUCT_TYPES = [
-  { key: "SAAS",          label: "SaaS product",                   file: "SAAS_TEMPLATE.md" },
-  { key: "CRM",           label: "CRM system",                     file: "CRM_TEMPLATE.md" },
-  { key: "MEMBERSHIP",    label: "Membership site",                 file: "MEMBERSHIP_TEMPLATE.md" },
-  { key: "LEADGEN",       label: "Lead generation website",         file: "LEADGEN_TEMPLATE.md" },
-  { key: "DIRECTORY",     label: "Directory website",               file: "DIRECTORY_TEMPLATE.md" },
-  { key: "DASHBOARD",     label: "Dashboard / internal analytics",  file: "DASHBOARD_TEMPLATE.md" },
-  { key: "INTERNAL_TOOL", label: "Internal tool",                   file: "INTERNAL_TOOL_TEMPLATE.md" },
-  { key: "MARKETPLACE",   label: "Marketplace",                     file: "MARKETPLACE_TEMPLATE.md" },
+  { key: "SAAS",          name: "Web app / SaaS",              desc: "users sign up and use a tool online",                              file: "SAAS_TEMPLATE.md" },
+  { key: "CRM",           name: "CRM / Sales pipeline",        desc: "track leads, deals, and customers",                               file: "CRM_TEMPLATE.md" },
+  { key: "MEMBERSHIP",    name: "Membership / community",      desc: "paid access to content or a community",                           file: "MEMBERSHIP_TEMPLATE.md" },
+  { key: "LEADGEN",       name: "Landing page / lead capture", desc: "get visitors to fill a form or book a call",                      file: "LEADGEN_TEMPLATE.md" },
+  { key: "DIRECTORY",     name: "Directory / listing site",    desc: "browse and find providers, products, or places",                  file: "DIRECTORY_TEMPLATE.md" },
+  { key: "DASHBOARD",     name: "Dashboard / analytics",       desc: "visualise data and KPIs for a team or business",                  file: "DASHBOARD_TEMPLATE.md" },
+  { key: "INTERNAL_TOOL", name: "Internal tool",               desc: "replaces a manual or spreadsheet-based process inside a company", file: "INTERNAL_TOOL_TEMPLATE.md" },
+  { key: "MARKETPLACE",   name: "Marketplace",                 desc: "connects buyers and sellers; transactions happen on the platform", file: "MARKETPLACE_TEMPLATE.md" },
+];
+
+const LANGUAGES = [
+  { code: "en", name: "English",         desc: "UI text, labels, and copy in English" },
+  { code: "th", name: "Thai (ภาษาไทย)",  desc: "ข้อความ label และ copy ในระบบเป็นภาษาไทย" },
 ];
 
-// Pre-seeded journey stages per product type so HUMAN_FLOW.md has real
-// content the moment the project is created.
+const I18N = {
+  en: {
+    sectionIdea:     "── About your idea ────────────────────────────",
+    qName:           "Project name?",
+    qNameDefault:    "My Product",
+    qIdea:           "Describe it in 1–3 sentences (who it's for and what it does)",
+    qUser:           "Who is your primary user? (e.g. 'freelance designers', 'gym owners')",
+    qUserDefault:    "small business owners",
+    qProblem:        "What is the #1 problem they face today?",
+    qValue:          "What makes them say 'I need this'? (the aha moment)",
+    scaffolding:     (slug) => `Scaffolding ./${slug} ...`,
+    installing:      "Installing packages (this takes ~30 seconds)...",
+    installFail:     (slug) => `npm install failed. Run it manually:\n  cd ${slug} && npm install`,
+    folderExists:    (slug) => `Folder ./${slug} already exists — pick a different name and run again.`,
+    templatesMissing:"Bundled templates missing. Try: npx ship-create@latest",
+    done:            (slug) => `
+  ✔ Done!  Your project is at ./${slug}/
+
+  docs/PROJECT.md          — product spec (pre-filled)
+  docs/HUMAN_FLOW.md       — UX flow (pre-filled)
+  docs/DESIGN_SYSTEM.md    — design tokens (filled by /build)
+
+  ──────────────────────────────────────────
+  Open in your AI coding tool and type /build
+
+  Claude Code  →  claude ./${slug}
+  Cursor       →  cursor ./${slug}
+  Windsurf     →  windsurf ./${slug}
+
+  Then type:  /build
+`,
+  },
+  th: {
+    sectionIdea:     "── เกี่ยวกับ idea ของคุณ ─────────────────────",
+    qName:           "ชื่อโปรเจค?",
+    qNameDefault:    "สินค้าของฉัน",
+    qIdea:           "อธิบายในไม่เกิน 1–3 ประโยค (สำหรับใคร และทำอะไร)",
+    qUser:           "ผู้ใช้หลักของคุณคือใคร? (เช่น 'ฟรีแลนซ์ดีไซเนอร์', 'เจ้าของยิม')",
+    qUserDefault:    "เจ้าของธุรกิจขนาดเล็ก",
+    qProblem:        "ปัญหาอันดับ 1 ที่พวกเขาเจออยู่ทุกวันคืออะไร?",
+    qValue:          "อะไรทำให้พวกเขาบอกว่า 'ฉันต้องการสิ่งนี้!'? (จุด aha moment)",
+    scaffolding:     (slug) => `กำลัง scaffold ./${slug} ...`,
+    installing:      "กำลังติดตั้ง packages (ใช้เวลาประมาณ 30 วินาที)...",
+    installFail:     (slug) => `npm install ล้มเหลว รันเองได้ที่:\n  cd ${slug} && npm install`,
+    folderExists:    (slug) => `โฟลเดอร์ ./${slug} มีอยู่แล้ว — เลือกชื่ออื่นแล้วรันใหม่`,
+    templatesMissing:"ไม่พบ template ที่ bundle ไว้ ลองรัน: npx ship-create@latest",
+    done:            (slug) => `
+  ✔ เสร็จแล้ว!  โปรเจคของคุณอยู่ที่ ./${slug}/
+
+  docs/PROJECT.md          — spec สินค้า (กรอกข้อมูลแล้ว)
+  docs/HUMAN_FLOW.md       — UX flow (กรอกข้อมูลแล้ว)
+  docs/DESIGN_SYSTEM.md    — design tokens (เติมโดย /build)
+
+  ──────────────────────────────────────────
+  เปิดใน AI coding tool แล้วพิมพ์ /build
+
+  Claude Code  →  claude ./${slug}
+  Cursor       →  cursor ./${slug}
+  Windsurf     →  windsurf ./${slug}
+
+  จากนั้นพิมพ์:  /build
+`,
+  },
+};
+
+// Pre-seeded journey stages per product type so HUMAN_FLOW.md has real content.
 const JOURNEY_SEEDS = {
   SAAS: {
     discovery: "Googles a pain they have, or sees a post about the tool from someone they follow",
@@ -98,19 +172,87 @@ const JOURNEY_SEEDS = {
   },
 };
 
-// ─── helpers ────────────────────────────────────────────────────────────────
+// ─── Interactive selector (arrow keys) ───────────────────────────────────────
+
+function selectInteractive(title, items) {
+  return new Promise((resolve) => {
+    let idx = 0;
+
+    const printItems = () => {
+      items.forEach((item, i) => {
+        const selected = i === idx;
+        process.stdout.write(C.clearLine + "\r");
+        if (selected) {
+          process.stdout.write(
+            `  ${C.cyan}${C.bold}❯ ${item.name}${C.reset}` +
+            `  ${C.dim}${item.desc}${C.reset}\n`
+          );
+        } else {
+          process.stdout.write(`  ${C.dim}  ${item.name}${C.reset}\n`);
+        }
+      });
+      // hint line (no trailing newline so cursor stays here)
+      process.stdout.write(
+        C.clearLine + `\r  ${C.dim}↑↓ navigate  ·  Enter to select${C.reset}`
+      );
+    };
+
+    // initial render
+    process.stdout.write(`\n  ${C.bold}${title}${C.reset}\n\n`);
+    process.stdout.write(C.hideCursor);
+    printItems();
+
+    process.stdin.setRawMode(true);
+    process.stdin.resume();
+    process.stdin.setEncoding("utf8");
+
+    const onData = (key) => {
+      if (key === "\x03") {                        // Ctrl+C
+        process.stdout.write(C.showCursor + "\n");
+        process.exit(0);
+      }
+      if (key === "\r" || key === "\n") {          // Enter
+        process.stdin.removeListener("data", onData);
+        process.stdin.setRawMode(false);
+        process.stdin.pause();
+        // replace hint line with confirmed selection
+        process.stdout.write(
+          "\r" + C.clearLine +
+          `  ${C.green}${C.bold}✔ ${items[idx].name}${C.reset}\n`
+        );
+        process.stdout.write(C.showCursor);
+        resolve(items[idx]);
+        return;
+      }
+      const prev = idx;
+      if (key === "\x1b[A") idx = Math.max(0, idx - 1);           // up
+      if (key === "\x1b[B") idx = Math.min(items.length - 1, idx + 1); // down
+      if (idx !== prev) {
+        process.stdout.write(C.up(items.length));
+        printItems();
+      }
+    };
+
+    process.stdin.on("data", onData);
+  });
+}
 
-function toKebabCase(str) {
-  return str
-    .trim()
-    .toLowerCase()
-    .replace(/[^a-z0-9]+/g, "-")
-    .replace(/(^-|-$)/g, "") || "my-product";
+// Fallback for non-TTY environments (CI, piped input)
+async function selectFallback(title, items, nextLine) {
+  console.log(`\n  ${title}`);
+  items.forEach((item, i) =>
+    console.log(`  ${i + 1}. ${item.name}  — ${item.desc}`)
+  );
+  while (true) {
+    const raw = await nextLine(`  Pick a number (1-${items.length}): `);
+    const n = parseInt(raw, 10) - 1;
+    if (n >= 0 && n < items.length) return items[n];
+    console.log("  Not a valid number, try again.");
+  }
 }
 
-// Use the readline async iterator rather than the `question()` API to avoid
-// a Node.js quirk where piped / non-TTY stdin stops delivering buffered
-// lines after the first question() call resolves.
+// ─── Text question helper ─────────────────────────────────────────────────────
+
 function makeLineReader(rl) {
   const it = rl[Symbol.asyncIterator]();
   return async function nextLine(promptText) {
@@ -122,22 +264,12 @@ function makeLineReader(rl) {
 }
 
 async function ask(nextLine, question, defaultValue) {
-  const suffix = defaultValue ? ` (${defaultValue})` : "";
-  const answer = await nextLine(`${question}${suffix}: `);
+  const suffix = defaultValue ? `  ${C.dim}(${defaultValue})${C.reset}` : "";
+  output.write(`  ${question}${suffix}\n  ${C.cyan}›${C.reset} `);
+  const answer = await nextLine("");
   return answer || defaultValue || "";
 }
 
-async function pickFromList(nextLine, title, items, labelFn) {
-  console.log(`\n${title}`);
-  items.forEach((item, i) => console.log(`  ${i + 1}. ${labelFn(item)}`));
-  while (true) {
-    const raw = await nextLine(`Pick a number (1-${items.length}): `);
-    const idx = parseInt(raw, 10) - 1;
-    if (idx >= 0 && idx < items.length) return items[idx];
-    console.log("  Not a valid number, try again.");
-  }
-}
-
 function copyRecursiveExcluding(src, dest, excludeNames) {
   fs.mkdirSync(dest, { recursive: true });
   for (const entry of fs.readdirSync(src, { withFileTypes: true })) {
@@ -152,9 +284,17 @@ function copyRecursiveExcluding(src, dest, excludeNames) {
   }
 }
 
-// ─── doc builders ───────────────────────────────────────────────────────────
+function toKebabCase(str) {
+  return str
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/(^-|-$)/g, "") || "my-product";
+}
 
-function buildProjectMd(projectName, productTypeLabel, { targetUser, problem, valueProp, idea }) {
+// ─── Doc builders ─────────────────────────────────────────────────────────────
+
+function buildProjectMd(projectName, productTypeName, { targetUser, problem, valueProp, idea, uiLanguage }) {
   return `# PROJECT.md
 
 **Phase:** S — Structure
@@ -164,7 +304,7 @@ function buildProjectMd(projectName, productTypeLabel, { targetUser, problem, va
 
 ## 1. Product Vision
 
-${projectName} is a ${productTypeLabel.toLowerCase()} that helps **${targetUser}** ${valueProp}.
+${projectName} is a ${productTypeName.toLowerCase()} that helps **${targetUser}** ${valueProp}.
 
 > *Expand this into a fuller paragraph before moving to HUMAN_FLOW.md — what does this product become in 2 years if it succeeds?*
 
@@ -242,7 +382,15 @@ ${projectName} is a ${productTypeLabel.toLowerCase()} that helps **${targetUser}
 
 ---
 
-## 9. Original Idea (keep for reference)
+## 9. Technical Decisions
+
+- **UI language:** ${uiLanguage || "English"}
+- **Auth method:** [magic link / OAuth / password — fill in]
+- **Hosting:** [Vercel / Railway / other — fill in]
+
+---
+
+## 10. Original Idea (keep for reference)
 
 > *Your words from when you scaffolded this project.*
 
@@ -336,94 +484,94 @@ function buildHumanFlowMd(projectName, productType, { targetUser, problem, value
 `;
 }
 
-// ─── main ───────────────────────────────────────────────────────────────────
+// ─── Main ──────────────────────────────────────────────────────────────────────
 
 async function main() {
+  const isTTY = process.stdin.isTTY;
+
+  // ── Banner ─────────────────────────────────────────────────────────────────
+  console.log("");
+  console.log(`${C.bold}${C.cyan}  ███████╗██╗  ██╗██╗██████╗ ${C.reset}`);
+  console.log(`${C.bold}${C.cyan}  ██╔════╝██║  ██║██║██╔══██╗${C.reset}`);
+  console.log(`${C.bold}${C.cyan}  ███████╗███████║██║██████╔╝${C.reset}`);
+  console.log(`${C.bold}${C.cyan}  ╚════██║██╔══██║██║██╔═══╝ ${C.reset}`);
+  console.log(`${C.bold}${C.cyan}  ███████║██║  ██║██║██║     ${C.reset}`);
+  console.log(`${C.bold}${C.cyan}  ╚══════╝╚═╝  ╚═╝╚═╝╚═╝     ${C.reset}`);
+  console.log("");
+  console.log(`  ${C.bold}The SHIP Method${C.reset}  ${C.dim}·  scaffold your project${C.reset}`);
+  console.log(`  ${C.dim}──────────────────────────────────────────${C.reset}`);
+  console.log("");
+
+  // ── Interactive selections (no readline needed) ────────────────────────────
+  let productType, uiLanguage;
+
+  if (isTTY) {
+    productType = await selectInteractive("What type of system are you building?", PRODUCT_TYPES);
+    uiLanguage  = await selectInteractive("UI language — what will your app display to users?", LANGUAGES);
+  }
+
+  // ── Text questions (readline) — switch language after uiLanguage is known ──
   const rl = readline.createInterface({ input, terminal: false });
   const nextLine = makeLineReader(rl);
 
-  console.log("===========================================");
-  console.log("  SHIP CLI — scaffold your project in 60 s");
-  console.log("===========================================\n");
-
-  // ── 1. Core questions ──────────────────────────────────────────────────
-  const projectNameRaw = await ask(nextLine, "Project name?", "My Product");
-  const projectSlug    = toKebabCase(projectNameRaw);
+  if (!isTTY) {
+    productType = await selectFallback("What type of system are you building?", PRODUCT_TYPES, nextLine);
+    uiLanguage  = await selectFallback("UI language — what will your app display to users?", LANGUAGES, nextLine);
+  }
 
-  const productType = await pickFromList(
-    nextLine,
-    "What are you building?",
-    PRODUCT_TYPES,
-    (t) => t.label
-  );
+  const t = I18N[uiLanguage.code] ?? I18N.en;
 
-  // ── 2. Idea questions (fills the docs without needing a separate AI step)
-  console.log("\n── About your idea ─────────────────────────");
-  const idea = await ask(
-    nextLine,
-    "Describe it in 1-3 sentences (who it's for and what it does)",
-    ""
-  );
-  const targetUser = await ask(
-    nextLine,
-    "Who is your primary user? (e.g. 'freelance designers', 'gym owners')",
-    "small business owners"
-  );
-  const problem = await ask(
-    nextLine,
-    "What is the #1 problem they face today?",
-    ""
-  );
-  const valueProp = await ask(
-    nextLine,
-    "What makes them say 'I need this'? (the aha moment)",
-    ""
-  );
+  console.log(`\n  ${C.dim}${t.sectionIdea}${C.reset}`);
+  const projectNameRaw = await ask(nextLine, t.qName, t.qNameDefault);
+  const projectSlug    = toKebabCase(projectNameRaw);
+  const idea       = await ask(nextLine, t.qIdea, "");
+  const targetUser = await ask(nextLine, t.qUser, t.qUserDefault);
+  const problem    = await ask(nextLine, t.qProblem, "");
+  const valueProp  = await ask(nextLine, t.qValue, "");
 
-  // Close readline before any child processes touch stdin
   rl.close();
 
-  // ── 3. Guard: don't overwrite an existing folder ───────────────────────
+  // ── Guard: don't overwrite an existing folder ──────────────────────────────
   const outDir = path.join(process.cwd(), projectSlug);
   if (fs.existsSync(outDir)) {
-    console.log(`\n  Folder ./${projectSlug} already exists — pick a different name and run again.`);
+    console.log(`\n  ${C.dim}${t.folderExists(projectSlug)}${C.reset}`);
     process.exit(1);
   }
 
-  console.log(`\nScaffolding ./${projectSlug} ...`);
+  console.log(`\n  ${C.dim}${t.scaffolding(projectSlug)}${C.reset}\n`);
 
   const starterKitSrc = path.join(TEMPLATES_DIR, "starter-kit");
   if (!fs.existsSync(starterKitSrc) || !fs.existsSync(path.join(TEMPLATES_DIR, "docs"))) {
-    console.log("\nBundled templates missing. Try: npx ship-create@latest\n");
+    console.log(`\n  ${t.templatesMissing}\n`);
     process.exit(1);
   }
 
-  // ── 4. Copy app shell ──────────────────────────────────────────────────
+  // ── Copy app shell ─────────────────────────────────────────────────────────
   copyRecursiveExcluding(
     starterKitSrc,
     outDir,
     new Set(["node_modules", ".next", "package-lock.json", "next-env.d.ts", "tsconfig.tsbuildinfo"])
   );
 
-  // ── 5. Copy agent rule files (CLAUDE.md, AGENTS.md, .cursorrules, etc.)
+  // ── Copy agent rule files ──────────────────────────────────────────────────
   for (const ruleFile of ["AGENTS.md", "CLAUDE.md", ".cursorrules", ".windsurfrules"]) {
     const src = path.join(TEMPLATES_DIR, ruleFile);
     if (fs.existsSync(src)) fs.copyFileSync(src, path.join(outDir, ruleFile));
   }
 
-  // ── 6. Copy Claude Code skill so agents can invoke it as a skill ───────
+  // ── Copy Claude Code skill ─────────────────────────────────────────────────
   const claudeSkillSrc = path.join(TEMPLATES_DIR, ".claude");
   if (fs.existsSync(claudeSkillSrc)) {
     copyRecursiveExcluding(claudeSkillSrc, path.join(outDir, ".claude"), new Set());
   }
 
-  // ── 7. Write pre-filled docs (no bracket placeholders in core sections)
+  // ── Write pre-filled docs ──────────────────────────────────────────────────
   const docsDir = path.join(outDir, "docs");
   fs.mkdirSync(docsDir, { recursive: true });
 
   fs.writeFileSync(
     path.join(docsDir, "PROJECT.md"),
-    buildProjectMd(projectNameRaw, productType.label, { targetUser, problem, valueProp, idea })
+    buildProjectMd(projectNameRaw, productType.name, { targetUser, problem, valueProp, idea, uiLanguage: uiLanguage.name })
   );
 
   fs.writeFileSync(
@@ -431,65 +579,49 @@ async function main() {
     buildHumanFlowMd(projectNameRaw, productType, { targetUser, problem, valueProp })
   );
 
-  // Product-type feature checklist
   const templateSrc = path.join(TEMPLATES_DIR, "docs", "product-types", productType.file);
   if (fs.existsSync(templateSrc)) {
     fs.copyFileSync(templateSrc, path.join(docsDir, productType.file));
   }
 
-  // Full prompt chain (Stages 3-6) for users who want it
   const promptsSrc = path.join(TEMPLATES_DIR, "docs", "PROMPTS.md");
   if (fs.existsSync(promptsSrc)) {
     fs.copyFileSync(promptsSrc, path.join(docsDir, "PROMPTS.md"));
   }
 
-  // Tech-stack reference — agent reads this when making stack decisions.
   const techStackSrc = path.join(TEMPLATES_DIR, "docs", "tech-stack");
   if (fs.existsSync(techStackSrc)) {
     copyRecursiveExcluding(techStackSrc, path.join(docsDir, "tech-stack"), new Set());
   }
 
-  // Design system + spec templates — filled by /build after user picks theme/font/trend.
   for (const f of ["DESIGN_SYSTEM.md", "DESIGN_SPEC.md"]) {
     const src = path.join(TEMPLATES_DIR, "docs", f);
     if (fs.existsSync(src)) fs.copyFileSync(src, path.join(docsDir, f));
   }
 
-  // ── 8. npm install ─────────────────────────────────────────────────────
-  console.log("\nInstalling packages (this takes ~30 seconds)...");
+  // ── npm install ────────────────────────────────────────────────────────────
+  console.log(`  ${C.dim}${t.installing}${C.reset}\n`);
   const install = spawnSync("npm", ["install"], {
     cwd: outDir,
     stdio: "inherit",
     shell: true,
   });
   if (install.status !== 0) {
-    console.log(`\n  npm install failed. Run it manually:\n  cd ${projectSlug} && npm install`);
+    console.log(`\n  ${t.installFail(projectSlug)}`);
   }
 
-  // ── 9. Done ────────────────────────────────────────────────────────────
-  console.log(`
-Done! Your project is at: ./${projectSlug}/
-
-  docs/PROJECT.md                           — product spec (pre-filled)
-  docs/HUMAN_FLOW.md                        — UX flow (pre-filled)
-  docs/DESIGN_SYSTEM.md                     — design tokens & decisions (filled by /build)
-  docs/DESIGN_SPEC.md                       — screen-by-screen design spec (filled by /build)
-  docs/tech-stack/STACK_DECISION_MATRIX.md  — stack choices reference
-
-── Open in your AI coding tool and type /build ─────────────────
-
-  Claude Code  →  claude ./${projectSlug}
-  Cursor       →  cursor ./${projectSlug}
-  Windsurf     →  windsurf ./${projectSlug}
-
-Then type:  /build
-
-The agent will read your docs, create the build spec, pick a theme,
-and start coding the MVP — no copy-paste, no extra setup.
-`);
+  // ── Done ───────────────────────────────────────────────────────────────────
+  const doneLines = t.done(projectSlug).split("\n");
+  const styledDone = doneLines.map((line, i) => {
+    if (i === 1) return `  ${C.green}${C.bold}${line.trim()}${C.reset}`;
+    if (line.includes("/build")) return line.replace("/build", `${C.cyan}${C.bold}/build${C.reset}`);
+    return `${C.dim}${line}${C.reset}`;
+  }).join("\n");
+  console.log(styledDone);
 }
 
 main().catch((err) => {
-  console.error("\nSomething went wrong:", err.message);
+  process.stdout.write(C.showCursor);
+  console.error(`\n  ${C.dim}Something went wrong:${C.reset}`, err.message);
   process.exit(1);
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ship-create",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Scaffold a new project the SHIP Method way — Structure, Human Flow, Instruction, Publish. No git clone, no API key, just one command.",
   "type": "module",
   "license": "MIT",

package/templates/.claude/skills/ship-method/SKILL.md

@@ -1,75 +1,48 @@
 ---
 name: ship-method
-description: Use when starting any new product, feature, or "build me an app" request — before writing any application code. Walks through Structure, Human Flow, Instruction, Publish in order, using this repo's templates. Also use when asked to review whether a project is "ready to build" or "ready to ship."
+description: Use when starting any new product, feature, or "build me an app" request — before writing any application code. Walks through Structure, Theme, Instruction, Publish in order, using this repo's templates. Also use when asked to review whether a project is "ready to build" or "ready to ship."
 ---
 
 # The SHIP Method
 
-You are operating inside a project built with **The SHIP Method OS**. The method has four phases, run strictly in order:
-
 ```
-S — STRUCTURE   →   H — HUMAN FLOW   →   I — INSTRUCTION   →   P — PUBLISH
-(what & why)         (the experience)     (AI-ready specs)      (ship it)
+S — STRUCTURE  →  H — HUMAN FLOW  →  I — INSTRUCTION  →  P — PUBLISH
 ```
 
-The single most common reason AI-built products end up broken, scope-creeped, or unshippable: someone skips Structure and Human Flow and goes straight to "build me an app." This skill exists to stop that.
-
-## When to Use This Skill
-
-- The user describes a new product/feature idea and wants something built
-- The user asks you to generate code for a feature that doesn't have a filled spec yet
-- The user asks "is this ready to build?" or "is this ready to ship?"
-- You're about to scaffold, design a schema, or write business logic and no `PROJECT.md` / `HUMAN_FLOW.md` exists yet for it
-- The user runs the `/ship` shortcut — drive them through the gates below one phase at a time, drafting their answers into the docs
+## When `/build` is invoked — do this immediately, in this order
 
-## The Checklist
+**Do not create a task list. Do not plan. Act.**
 
-Work through these gates in order. Do not let scope, urgency, or the user saying "just build it fast" skip a gate without at least naming what's being skipped.
+### 1. Read (no output, no tasks)
+Silently read `docs/PROJECT.md` and `docs/HUMAN_FLOW.md`. If core sections are empty, ask the user one question: *"Describe your idea in one sentence."* Fill the docs from their answer, then continue.
 
-- [ ] **Gate 1 — Structure exists.** Find or create `PROJECT.md` (template: `01-STRUCTURE/PROJECT.md` in this repo, or `docs/PROJECT.md` if this is a `ship-create`-generated project). Vision, Problem Statement, Target Audience, and MVP Scope must be filled — not placeholder brackets.
-- [ ] **Gate 2 — Human Flow exists.** Find or create `HUMAN_FLOW.md`. Every core screen needs a happy path and at least one error/empty state defined before it gets built.
-- [ ] **Gate 3 — Instruction exists.** Functional requirements, data model, and API contract are written somewhere concrete (`AI_BUILD_SPEC.md` / `docs/PROJECT.md`'s feature section) before you generate feature code.
-- [ ] **Gate 4 — Theme & First Screen.** Once Gates 1-3 pass and before final polish/ship: derive 2-3 business-appropriate themes from `PROJECT.md`, let the user pick one, apply it (`app/globals.css`, `app/layout.tsx`), and record it in the design system; then read `HUMAN_FLOW.md` and replace the starter's generic `app/page.tsx` ("Pick your area") with the real entry point. See `theme-guide.md` in this skill folder.
-- [ ] **Gate 5 — Publish readiness.** Before telling the user something is "done," check it against the relevant checklist (`QA_CHECKLIST.md`, `LAUNCH_CHECKLIST.md`) rather than declaring success from a clean build alone.
+### 2. Theme — first visible output
+Present 2–3 theme options (palette name + font, one line each). Wait for the user to pick. Apply the chosen theme to `app/globals.css` and `app/layout.tsx`. Record in `docs/DESIGN_SYSTEM.md`. **This is the first thing the user sees — it must happen before any feature code.**
 
-## How to Apply This
+### 3. Home screen — second visible output
+Read `HUMAN_FLOW.md`. Replace `app/page.tsx` with the real entry point for this product. The user should be able to run `npm run dev` and see their product, not the starter template.
 
-1. **If Gate 1 or 2 is missing or full of `[bracket placeholders]`:** stop, don't generate feature code. Instead, ask the user one specific question at a time to fill the gap — pull questions directly from the relevant template's section headers. Scaffolding, config, and boilerplate are fine to write anytime; business logic and feature code are gated.
-2. **If the user insists on skipping a gate** ("just build it, skip the docs"): comply, but say once, briefly, what's being skipped and the most likely thing that breaks later as a result. Don't refuse repeatedly or lecture.
-3. **If all gates are filled:** proceed normally — generate code straight from the spec, and flag if a code request contradicts what's already written in `PROJECT.md` or `HUMAN_FLOW.md` rather than silently overriding it.
-4. **When asked "is this ready to build/ship?":** walk the checklist above explicitly and report which gates pass/fail, rather than giving a vague yes/no.
+### 4. Ask one question
+*"Which feature do you want to build first?"* Then build just that one.
 
-## Theme & First Screen (Gate 4)
+---
 
-Run this once Gates 1-3 pass, before final polish or shipping. The agent already
-knows the business from `PROJECT.md`, so it can theme and build the front door
-accurately.
+**That's the entire flow.** Steps 1–3 are one session. Features are added one at a time after that.
 
-1. **Derive & choose a theme.** From `PROJECT.md`, produce 2-3 candidate themes
-   (palette as HSL token values + a font pairing). Present them and let the user
-   pick — never pick silently, never require brand assets the user didn't give.
-2. **Apply it.** Write the chosen tokens into `app/globals.css` (`:root` and
-   `.dark`), set fonts in `app/layout.tsx`, and record the choice in
-   `12-DESIGN-SYSTEM/DESIGN_SYSTEM.md` (or `docs/DESIGN_SYSTEM.md`).
-3. **Build the first screen.** Read `HUMAN_FLOW.md`, decide the real entry point
-   for this business, and replace the starter's `app/page.tsx` ("Pick your
-   area") with it — landing/sale for marketing-led products, app home/dashboard
-   redirect for tools. Adjust each area's main page to match.
+## Hard rules
 
-Full procedure and the business-type → palette/font table: `theme-guide.md` in
-this skill folder. (In this OS repo the app lives under `starter-kit/`.)
+- **No task list at start.** Create tasks only when building a specific feature, and only 1–2 at a time.
+- **No spec before theme.** `docs/AI_BUILD_SPEC.md` is written after the home screen exists, not before.
+- **No gates that block visible output.** The only thing that can pause the flow is a missing answer to a direct question.
+- **If the user says "skip docs":** comply. Say once what's skipped. Never repeat.
 
-## Reference Files (when present in this repo)
+## Reference files
 
 | Need | File |
 |---|---|
-| Business goals, scope, MVP | `01-STRUCTURE/PROJECT.md`, `01-STRUCTURE/MVP_SCOPE.md` |
-| User journeys, screens | `02-HUMAN-FLOW/HUMAN_FLOW.md`, `02-HUMAN-FLOW/SCREEN_PLANNING.md` |
-| Specs, prompt chain | `03-INSTRUCTION/AI_BUILD_SPEC.md`, `03-INSTRUCTION/PROMPTS.md` |
-| Pre-launch checks | `04-PUBLISH/QA_CHECKLIST.md`, `04-PUBLISH/LAUNCH_CHECKLIST.md` |
-| Product-type starter pack | `06-TEMPLATES/<TYPE>_TEMPLATE.md` |
-| Design consistency | `12-DESIGN-SYSTEM/DESIGN_SYSTEM.md` |
-| Business-type → palette/font theme guide | `theme-guide.md` (this skill folder) |
-| Stack decisions | `13-TECH-STACK/STACK_DECISION_MATRIX.md` |
-
-If this is a project generated by `ship-create`, the same files exist under `docs/` instead of the numbered folders above.
+| Vision, audience, MVP | `docs/PROJECT.md` |
+| User flow, screens | `docs/HUMAN_FLOW.md` |
+| Functional spec | `docs/AI_BUILD_SPEC.md` (written after home screen) |
+| Stack choices | `docs/tech-stack/STACK_DECISION_MATRIX.md` |
+| UI guidance | invoke `ui-ux-pro-max` skill |
+| Theme palette table | `theme-guide.md` (this skill folder) |

package/templates/.cursorrules

@@ -51,10 +51,12 @@ All docs live under `docs/`:
 
 6. **Never invent business facts** (market size, pricing, real metrics, real user quotes). Draft clearly-labeled `[TBD: ...]` placeholders or ask the user.
 
-7. **Once the spec is complete, apply white theme and replace the home screen — do this first, before any features.**
-   When `docs/PROJECT.md` and `docs/HUMAN_FLOW.md` are filled and `docs/AI_BUILD_SPEC.md` exists:
-   - **Home first:** Replace the starter kit's generic `app/page.tsx` immediately with the real entry point from `docs/HUMAN_FLOW.md`. This is always the first build output so the user sees something real right away.
-   - **Theme (shadcn/ui):** Use Tailwind CSS v4 + shadcn/ui. Apply the user's chosen shadcn color palette (zinc/slate/blue/green/orange/rose/violet) via its CSS variable block in `app/globals.css`. Always white background. Font: modern (Inter/Geist) or luxury (Playfair Display + DM Sans). Do not write custom HSL tokens manually.
+7. **When `/build` is invoked: act immediately, no planning, no task list.**
+   - **First:** read `docs/PROJECT.md` + `docs/HUMAN_FLOW.md` silently. If empty, ask one question: *"Describe your idea in one sentence."* Fill docs, then continue.
+   - **Second:** propose 2–3 theme options (one line each), let the user pick, apply to `app/globals.css` + `app/layout.tsx`. This is the first visible output.
+   - **Third:** replace `app/page.tsx` with the real home screen from `HUMAN_FLOW.md`. User runs `npm run dev` and sees their product.
+   - **Then:** ask "which feature first?" and build just that one.
+   - **No task list at start.** No spec before theme. No gate that blocks visible output.
    - See `.claude/skills/ship-method/theme-guide.md` for product-type → palette reference.
 
 ## Quick Orientation for a New Agent Session

package/templates/.windsurfrules

@@ -51,10 +51,12 @@ All docs live under `docs/`:
 
 6. **Never invent business facts** (market size, pricing, real metrics, real user quotes). Draft clearly-labeled `[TBD: ...]` placeholders or ask the user.
 
-7. **Once the spec is complete, apply white theme and replace the home screen — do this first, before any features.**
-   When `docs/PROJECT.md` and `docs/HUMAN_FLOW.md` are filled and `docs/AI_BUILD_SPEC.md` exists:
-   - **Home first:** Replace the starter kit's generic `app/page.tsx` immediately with the real entry point from `docs/HUMAN_FLOW.md`. This is always the first build output so the user sees something real right away.
-   - **Theme (shadcn/ui):** Use Tailwind CSS v4 + shadcn/ui. Apply the user's chosen shadcn color palette (zinc/slate/blue/green/orange/rose/violet) via its CSS variable block in `app/globals.css`. Always white background. Font: modern (Inter/Geist) or luxury (Playfair Display + DM Sans). Do not write custom HSL tokens manually.
+7. **When `/build` is invoked: act immediately, no planning, no task list.**
+   - **First:** read `docs/PROJECT.md` + `docs/HUMAN_FLOW.md` silently. If empty, ask one question: *"Describe your idea in one sentence."* Fill docs, then continue.
+   - **Second:** propose 2–3 theme options (one line each), let the user pick, apply to `app/globals.css` + `app/layout.tsx`. This is the first visible output.
+   - **Third:** replace `app/page.tsx` with the real home screen from `HUMAN_FLOW.md`. User runs `npm run dev` and sees their product.
+   - **Then:** ask "which feature first?" and build just that one.
+   - **No task list at start.** No spec before theme. No gate that blocks visible output.
    - See `.claude/skills/ship-method/theme-guide.md` for product-type → palette reference.
 
 ## Quick Orientation for a New Agent Session

package/templates/AGENTS.md

@@ -51,10 +51,12 @@ All docs live under `docs/`:
 
 6. **Never invent business facts** (market size, pricing, real metrics, real user quotes). Draft clearly-labeled `[TBD: ...]` placeholders or ask the user.
 
-7. **Once the spec is complete, apply white theme and replace the home screen — do this first, before any features.**
-   When `docs/PROJECT.md` and `docs/HUMAN_FLOW.md` are filled and `docs/AI_BUILD_SPEC.md` exists:
-   - **Home first:** Replace the starter kit's generic `app/page.tsx` immediately with the real entry point from `docs/HUMAN_FLOW.md`. This is always the first build output so the user sees something real right away.
-   - **Theme (shadcn/ui):** Use Tailwind CSS v4 + shadcn/ui. Apply the user's chosen shadcn color palette (zinc/slate/blue/green/orange/rose/violet) via its CSS variable block in `app/globals.css`. Always white background. Font: modern (Inter/Geist) or luxury (Playfair Display + DM Sans). Do not write custom HSL tokens manually.
+7. **When `/build` is invoked: act immediately, no planning, no task list.**
+   - **First:** read `docs/PROJECT.md` + `docs/HUMAN_FLOW.md` silently. If empty, ask one question: *"Describe your idea in one sentence."* Fill docs, then continue.
+   - **Second:** propose 2–3 theme options (one line each), let the user pick, apply to `app/globals.css` + `app/layout.tsx`. This is the first visible output.
+   - **Third:** replace `app/page.tsx` with the real home screen from `HUMAN_FLOW.md`. User runs `npm run dev` and sees their product.
+   - **Then:** ask "which feature first?" and build just that one.
+   - **No task list at start.** No spec before theme. No gate that blocks visible output.
    - See `.claude/skills/ship-method/theme-guide.md` for product-type → palette reference.
 
 ## Quick Orientation for a New Agent Session

package/templates/CLAUDE.md

@@ -51,10 +51,12 @@ All docs live under `docs/`:
 
 6. **Never invent business facts** (market size, pricing, real metrics, real user quotes). Draft clearly-labeled `[TBD: ...]` placeholders or ask the user.
 
-7. **Once the spec is complete, apply white theme and replace the home screen — do this first, before any features.**
-   When `docs/PROJECT.md` and `docs/HUMAN_FLOW.md` are filled and `docs/AI_BUILD_SPEC.md` exists:
-   - **Home first:** Replace the starter kit's generic `app/page.tsx` immediately with the real entry point from `docs/HUMAN_FLOW.md`. This is always the first build output so the user sees something real right away.
-   - **Theme (shadcn/ui):** Use Tailwind CSS v4 + shadcn/ui. Apply the user's chosen shadcn color palette (zinc/slate/blue/green/orange/rose/violet) via its CSS variable block in `app/globals.css`. Always white background. Font: modern (Inter/Geist) or luxury (Playfair Display + DM Sans). Do not write custom HSL tokens manually.
+7. **When `/build` is invoked: act immediately, no planning, no task list.**
+   - **First:** read `docs/PROJECT.md` + `docs/HUMAN_FLOW.md` silently. If empty, ask one question: *"Describe your idea in one sentence."* Fill docs, then continue.
+   - **Second:** propose 2–3 theme options (one line each), let the user pick, apply to `app/globals.css` + `app/layout.tsx`. This is the first visible output.
+   - **Third:** replace `app/page.tsx` with the real home screen from `HUMAN_FLOW.md`. User runs `npm run dev` and sees their product.
+   - **Then:** ask "which feature first?" and build just that one.
+   - **No task list at start.** No spec before theme. No gate that blocks visible output.
    - See `.claude/skills/ship-method/theme-guide.md` for product-type → palette reference.
 
 ## Quick Orientation for a New Agent Session