@rijalpermana/spec-forge 0.1.2 → 0.2.0

package/README.md

@@ -70,6 +70,7 @@ forge smelt btn-fraud-check       # interactive Q&A -> brief.md + prd.md stub
 
 forge schema btn-fraud-check      # schema.dbml (requires prd.md)
 forge contract btn-fraud-check    # api-contract.md (requires prd.md)
+forge mockup btn-fraud-check      # mockup.html (requires prd.md)
 forge tasks btn-fraud-check       # tasks.md (requires prd.md)
 forge testcase btn-fraud-check    # testcases.md (requires prd.md)
 forge verify btn-fraud-check      # reports missing files / unresolved [TODO]s
@@ -132,6 +133,7 @@ the writing.
 | `forge smelt <feature>` | — | `brief.md`, `prd.md` (stub), `INDEX.md` entry (`draft`) | Yes — refuses if `brief.md` exists |
 | `forge schema <feature>` | `prd.md` | `schema.dbml` (stub) | Yes |
 | `forge contract <feature>` | `prd.md` | `api-contract.md` (stub) | Yes |
+| `forge mockup <feature>` | `prd.md` | `mockup.html` (stub) | Yes |
 | `forge tasks <feature>` | `prd.md` | `tasks.md` (stub) | Yes |
 | `forge testcase <feature>` | `prd.md` | `testcases.md` (stub) | Yes |
 | `forge verify <feature>` | — | Console report, `INDEX.md` status → `active` if complete | N/A (read-only on spec files) |
@@ -149,6 +151,7 @@ your-project/
 │       ├── prd.md              # goal, actors, user stories, business rules, out-of-scope
 │       ├── schema.dbml          # entities derived from prd.md
 │       ├── api-contract.md       # Title / endpoint / Request / Response / Note format
+│       ├── mockup.html            # throwaway wireframe (plain HTML/CSS, no framework)
 │       ├── tasks.md               # WBS, sequenced data -> logic -> UI
 │       └── testcases.md            # No/Scenario/Case/Type/Expected/Actual/Status/Remark table
 ├── .claude/commands/forge/         # if target = claude

package/dist/cli.js

@@ -6775,6 +6775,9 @@ var require_prompts3 = __commonJS((exports, module) => {
   module.exports = isNodeLT("8.6.0") ? require_dist() : require_lib();
 });
 
+// src/cli.ts
+import { createRequire as createRequire2 } from "node:module";
+
 // node_modules/commander/esm.mjs
 var import__ = __toESM(require_commander(), 1);
 var {
@@ -6869,6 +6872,14 @@ var COMMAND_SPECS = [
 ` + `Response: [full JSON example]
 ` + "Note: [only if needed]"
   },
+  {
+    name: "mockup",
+    argumentHint: "[feature-name]",
+    description: "Scaffold mockup.html, then draft it from prd.md",
+    requiresPrd: true,
+    readOnly: false,
+    instructions: GROUND_IN_RULES + "Read {{prd}} and fill {{mockup}} — a throwaway wireframe (plain HTML/CSS, no " + "framework, no build step) covering the screens/states implied by the PRD's user " + "stories: primary view, secondary views or modals, and empty/loading/error states " + "where the PRD calls for them. This is for reviewing flow and layout, not visual " + "design or production markup — don't invent screens, fields, or copy that aren't " + "traceable to the PRD."
+  },
   {
     name: "tasks",
     argumentHint: "[feature-name]",
@@ -6913,6 +6924,7 @@ var SPEC_FILES = {
   prd: "prd.md",
   schema: "schema.dbml",
   contract: "api-contract.md",
+  mockup: "mockup.html",
   tasks: "tasks.md",
   testcases: "testcases.md"
 };
@@ -7587,8 +7599,10 @@ Every forge drafting command (smelt, schema, contract, tasks, testcase) ` + `wil
 }
 
 // src/cli.ts
+var require2 = createRequire2(import.meta.url);
+var { version } = require2("../package.json");
 var program2 = new Command;
-program2.name("forge").description("Spec-driven development CLI — scaffolds specs, schemas, API contracts, tasks, and test cases.").version("0.1.2");
+program2.name("forge").description("Spec-driven development CLI — scaffolds specs, schemas, API contracts, tasks, and test cases.").version(version);
 program2.command("init").description("Scaffold specs/ folder and an AI-tool bridge in the current project").option("-t, --target <target>", "bridge target: claude, cursor, windsurf, or generic", "claude").action((options) => init({ target: options.target }));
 program2.command("bridge <target>").description("(Re)generate AI-tool bridge commands: claude, cursor, windsurf, or generic").action((target) => bridge(target));
 program2.command("scan").description("Inventory the existing project structure into specs/CODEBASE.md").option("-d, --depth <n>", "directory-tree depth to include in the report", "2").action((options) => scan({ depth: Number(options.depth) }));
@@ -7596,6 +7610,7 @@ program2.command("rules").description("Scaffold specs/RULES.md — project conve
 program2.command("smelt <feature>").description("Extract raw requirements into a grounding brief and stub the PRD").option("-f, --from <file>", "extract from an existing BRD/requirements document instead of interactive Q&A").action((feature, options) => smelt(feature, { from: options.from }));
 program2.command("schema <feature>").description("Scaffold schema.dbml (requires prd.md)").action(makeScaffoldCommand({ file: SPEC_FILES.schema, label: "schema" }));
 program2.command("contract <feature>").description("Scaffold api-contract.md (requires prd.md)").action(makeScaffoldCommand({ file: SPEC_FILES.contract, label: "contract" }));
+program2.command("mockup <feature>").description("Scaffold mockup.html (requires prd.md)").action(makeScaffoldCommand({ file: SPEC_FILES.mockup, label: "mockup" }));
 program2.command("tasks <feature>").description("Scaffold tasks.md WBS (requires prd.md)").action(makeScaffoldCommand({ file: SPEC_FILES.tasks, label: "tasks" }));
 program2.command("testcase <feature>").description("Scaffold testcases.md (requires prd.md)").action(makeScaffoldCommand({ file: SPEC_FILES.testcases, label: "testcase" }));
 program2.command("verify <feature>").description("Check that all spec files exist and have no unresolved [TODO] markers").action(verify);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rijalpermana/spec-forge",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Spec-driven development CLI: scaffolds specs, schemas, API contracts, task lists, and test cases; bridges into Claude Code as slash commands.",
   "type": "module",
   "license": "MIT",

package/templates/mockup.html

@@ -0,0 +1,45 @@
+<!-- Mockup — {{feature}}
+     Generated by `forge mockup {{feature}}`. Derive screens/sections from prd.md's
+     user stories — do not invent flows that aren't grounded in the PRD. This is a
+     throwaway wireframe for review, not production markup: plain HTML/CSS, no
+     framework, no build step. Open directly in a browser. -->
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>{{feature}} — mockup</title>
+  <style>
+    :root { color-scheme: light dark; }
+    body { font-family: system-ui, sans-serif; max-width: 960px; margin: 2rem auto; padding: 0 1rem; line-height: 1.5; }
+    header { border-bottom: 1px solid #8888; margin-bottom: 1.5rem; padding-bottom: 1rem; }
+    h1 { font-size: 1.25rem; margin: 0; }
+    .note { color: #888; font-size: 0.85rem; }
+    section { margin-bottom: 2rem; padding: 1rem; border: 1px dashed #8886; border-radius: 8px; }
+    section h2 { font-size: 1rem; margin-top: 0; }
+    .todo { color: #b8860b; font-weight: 600; }
+    button, input, select { font: inherit; padding: 0.4rem 0.6rem; }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>{{feature}}</h1>
+    <p class="note">Wireframe only — grounded in prd.md. Replace each placeholder section below.</p>
+  </header>
+
+  <section>
+    <h2>[TODO] Primary screen / view</h2>
+    <p class="todo">[TODO] Lay out the main UI for this feature's core user story — key fields, actions, and states (empty, loading, error).</p>
+  </section>
+
+  <section>
+    <h2>[TODO] Secondary screen / modal (if any)</h2>
+    <p class="todo">[TODO] Add a screen per additional user story from prd.md, or delete this section if there's only one.</p>
+  </section>
+
+  <section>
+    <h2>[TODO] Notes</h2>
+    <p class="todo">[TODO] Call out anything ambiguous in prd.md that this mockup had to assume.</p>
+  </section>
+</body>
+</html>