@neonwatty/limner 0.1.0 → 0.1.2

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@neonwatty/limner",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Agent-guided visual fidelity workbench for turning images into HTML references and comparing references to real apps.",
   "type": "module",
   "bin": {
-    "limn": "dist/cli.js"
+    "limner": "dist/cli.js"
   },
   "files": [
     "dist",

package/skills/limner/SKILL.md

@@ -1,25 +1,29 @@
 ---
 name: limner
-description: Use when turning an image into a reference HTML facsimile or comparing approved reference HTML against a real app implementation.
+description: Use when turning an image into an HTML mockup or comparing an approved mockup against an implementation.
 ---
 
 # Limner
 
 Use Limner for structured visual fidelity loops.
 
+Prompt profiles: `ideal-to-mockup` for Image To Reference, and `mockup-to-implementation` for Reference To Implementation.
+
 ## Image To Reference
 
-1. Run `limn init <image> --target <name>` if the target does not exist.
+1. Run `limner init <image> --target <name>` if the target does not exist.
 2. Inspect `source/ideal.png`.
 3. Fill `contract/regions.json`, `contract/tokens.json`, and `contract/acceptance.md`.
 4. Edit `reference/index.html` and `reference/styles.css`.
-5. Run `limn compare image-reference --target <name>`.
-6. Review `captures/image-reference/side-by-side.png`.
-7. Record findings in `reports/image-reference.md`.
+5. Run `limner compare image-reference --target <name>`.
+6. Read `captures/image-reference/agent-comparison/agent-prompt.codex.md`.
+7. Write `captures/image-reference/agent-comparison/agent-response.json`.
+8. Rerun `limner compare image-reference --target <name>` so Limner validates `image-comparison.json` and `comparison-summary.json`.
+9. Use the validated next-iteration guidance for one scoped mockup fix.
 
 Optional structured spec layer:
 
-- Run `limn compare image-reference --target <name> --spec`.
+- Run `limner compare image-reference --target <name> --spec`.
 - Edit `contract/visual-spec-instructions.md` to customize the agent prompt for this target, or pass `--spec-instructions <path>` for a shared policy file.
 - Use `captures/image-reference/spec/agent-prompt.codex.md` for Codex or `captures/image-reference/spec/agent-prompt.claude.md` for Claude.
 - Use the generated `captures/image-reference/spec/agent-response.schema.json` for strict structured output when the agent supports it.
@@ -27,25 +31,18 @@ Optional structured spec layer:
 - Have the agent write `captures/image-reference/spec/agent-response.json`.
 - Rerun the same command so Limner can validate the response and emit the spec and diff JSON artifacts.
 
-## Reference To App
+## Reference To Implementation
 
 1. Confirm the reference HTML is approved.
-2. Ensure every important region has both `referenceSelector` and `appSelector`.
-3. Run `limn compare reference-app --target <name> --url <app-url>`.
-4. Review `captures/reference-app/side-by-side.png` and `dom-metrics.json`.
-5. Use the report to drive one scoped app fix.
-6. Rerun after the fix.
-
-## Image To App Grounding
-
-Use `limn compare image-app --target <name> --url <app-url>` to compare the source image directly to an app screenshot.
-
-Add `--storage-state <path>` for authenticated pages and `--full-page` only when a full-page screenshot is intended. The default is viewport-only.
-
-For generated-image reconstruction work, do not skip Image To Reference. Build the HTML facsimile first, then compare the approved reference to the app.
+2. Ensure every important region has both `referenceSelector` and an implementation selector in `appSelector`.
+3. Run `limner compare reference-implementation --target <name> --url <implementation-url>`.
+4. Read `captures/reference-implementation/agent-comparison/agent-prompt.codex.md`.
+5. Write `captures/reference-implementation/agent-comparison/agent-response.json`.
+6. Rerun the same command so Limner validates image, structure, and summary comparison artifacts.
+7. Use the validated next-iteration guidance for one scoped implementation fix.
 
 ## Constraints
 
-- Limner does not call an AI vision model itself. The `--spec` workflow requires an external agent.
+- Limner does not call an AI vision model itself. Agent comparison and the `--spec` workflow require an external agent.
 - Limner does not make final pass/fail judgments.
 - Limner logs only local JSONL events under `.limner/runs/`.

package/templates/target/AGENT_GUIDE.md

@@ -2,23 +2,27 @@
 
 Use this target folder as a structured workbench for visual fidelity.
 
+Prompt profiles: `ideal-to-mockup` for Loop 1, and `mockup-to-implementation` for Loop 2.
+
 ## Loop 1: Image To Reference
 
 1. Inspect `source/ideal.png`.
 2. Fill out `contract/regions.json`, `contract/tokens.json`, and `contract/acceptance.md`.
 3. Edit `reference/index.html` and `reference/styles.css` until the reference is a faithful HTML facsimile.
-4. Run `limn compare image-reference --target <target>`.
-5. Review `captures/image-reference/side-by-side.png` and `reports/image-reference.md`.
-6. Record remaining mismatches or intentional deviations.
+4. Run `limner compare image-reference --target <target>`.
+5. Read `captures/image-reference/agent-comparison/agent-prompt.codex.md`.
+6. Write `captures/image-reference/agent-comparison/agent-response.json`.
+7. Rerun the comparison and use the validated next-iteration guidance for one scoped mockup fix.
 
-## Loop 2: Reference To App
+## Loop 2: Reference To Implementation
 
 1. Treat the reference HTML as the approved design.
-2. Add app selectors to `contract/regions.json`.
-3. Run `limn compare reference-app --target <target> --url <app-url>`.
-4. Review screenshots, DOM metrics, and `reports/reference-app.md`.
-5. Fix the app, rerun the comparison, and keep notes in the report.
+2. Add implementation selectors to `contract/regions.json` using `appSelector`.
+3. Run `limner compare reference-implementation --target <target> --url <implementation-url>`.
+4. Read `captures/reference-implementation/agent-comparison/agent-prompt.codex.md`.
+5. Write `captures/reference-implementation/agent-comparison/agent-response.json`.
+6. Rerun the comparison and use the validated next-iteration guidance for one scoped implementation fix.
 
 ## Rule
 
-Limner does not decide visual success automatically. It produces evidence so the agent and human can make sharper decisions.
+Limner does not decide visual success automatically. It produces evidence and validates agent-authored UX comparisons so the next implementation iteration is focused.

package/dist/commands/compare-image-app.d.ts

@@ -1,12 +0,0 @@
-export declare function compareImageApp(options: {
-    workspaceRoot: string;
-    target: string;
-    url: string;
-    headed?: boolean;
-    storageState?: string;
-    fullPage?: boolean;
-}): Promise<{
-    sideBySidePath: string;
-    reportPath: string;
-    appPath: string;
-}>;

package/dist/commands/compare-image-app.js

@@ -1,45 +0,0 @@
-import { mkdir } from 'node:fs/promises';
-import path from 'node:path';
-import { capturePage } from '../core/playwright-capture.js';
-import { writeImageAppReport } from '../core/report-writer.js';
-import { createRunLogger } from '../core/run-logger.js';
-import { createSideBySideImage } from '../core/side-by-side.js';
-import { resolveTarget, resolveWorkspace } from '../core/workspace.js';
-export async function compareImageApp(options) {
-    const workspace = resolveWorkspace(options.workspaceRoot);
-    const target = resolveTarget(options.workspaceRoot, options.target);
-    const logger = await createRunLogger(workspace, { command: 'compare', target: options.target, mode: 'image-app' });
-    const captureDir = path.join(target.capturesDir, 'image-app');
-    const appPath = path.join(captureDir, 'app.png');
-    const sideBySidePath = path.join(captureDir, 'side-by-side.png');
-    try {
-        await logger.event({ type: 'command.started' });
-        await mkdir(captureDir, { recursive: true });
-        await capturePage({
-            url: options.url,
-            outputPath: appPath,
-            headed: options.headed,
-            storageState: options.storageState,
-            fullPage: options.fullPage,
-        });
-        await createSideBySideImage({ leftPath: target.sourceImagePath, rightPath: appPath, outputPath: sideBySidePath });
-        const reportPath = await writeImageAppReport({
-            target,
-            idealPath: target.sourceImagePath,
-            appPath,
-            sideBySidePath,
-            appUrl: options.url,
-        });
-        await logger.artifact(appPath, 'screenshot');
-        await logger.artifact(sideBySidePath, 'side-by-side');
-        await logger.artifact(reportPath, 'report');
-        await logger.complete('ok');
-        return { sideBySidePath, reportPath, appPath };
-    }
-    catch (error) {
-        await logger.event({ type: 'command.failed', status: 'failed', message: error instanceof Error ? error.message : String(error) });
-        await logger.complete('failed');
-        throw error;
-    }
-}
-//# sourceMappingURL=compare-image-app.js.map

package/dist/commands/compare-image-app.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"compare-image-app.js","sourceRoot":"","sources":["../../src/commands/compare-image-app.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAEvE,MAAM,CAAC,KAAK,UAAU,eAAe,CAAC,OAOrC;IACC,MAAM,SAAS,GAAG,gBAAgB,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;IAC1D,MAAM,MAAM,GAAG,aAAa,CAAC,OAAO,CAAC,aAAa,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;IACpE,MAAM,MAAM,GAAG,MAAM,eAAe,CAAC,SAAS,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,CAAC,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,CAAC;IACnH,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;IAC9D,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;IACjD,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,kBAAkB,CAAC,CAAC;IAEjE,IAAI,CAAC;QACH,MAAM,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,iBAAiB,EAAE,CAAC,CAAC;QAChD,MAAM,KAAK,CAAC,UAAU,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;QAC7C,MAAM,WAAW,CAAC;YAChB,GAAG,EAAE,OAAO,CAAC,GAAG;YAChB,UAAU,EAAE,OAAO;YACnB,MAAM,EAAE,OAAO,CAAC,MAAM;YACtB,YAAY,EAAE,OAAO,CAAC,YAAY;YAClC,QAAQ,EAAE,OAAO,CAAC,QAAQ;SAC3B,CAAC,CAAC;QACH,MAAM,qBAAqB,CAAC,EAAE,QAAQ,EAAE,MAAM,CAAC,eAAe,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,CAAC,CAAC;QAClH,MAAM,UAAU,GAAG,MAAM,mBAAmB,CAAC;YAC3C,MAAM;YACN,SAAS,EAAE,MAAM,CAAC,eAAe;YACjC,OAAO;YACP,cAAc;YACd,MAAM,EAAE,OAAO,CAAC,GAAG;SACpB,CAAC,CAAC;QACH,MAAM,MAAM,CAAC,QAAQ,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;QAC7C,MAAM,MAAM,CAAC,QAAQ,CAAC,cAAc,EAAE,cAAc,CAAC,CAAC;QACtD,MAAM,MAAM,CAAC,QAAQ,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;QAC5C,MAAM,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QAC5B,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC;IACjD,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,MAAM,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;QAClI,MAAM,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QAChC,MAAM,KAAK,CAAC;IACd,CAAC;AACH,CAAC"}