@tekyzinc/gsd-t 2.56.14 → 2.56.15

package/commands/gsd-t-execute.md

@@ -295,9 +295,15 @@ Execute the task above:
       Data visualizations expand into multiple rows: chart type, orientation, axis labels, legend
       position, bar/segment colors, data labels, grid lines, center text, tooltip style.
       If a full-page inventory has fewer than 30 elements, you missed items — go back.
-   c. **Render the built component in a real browser**: Start the dev server if not running.
-      Use Claude Preview, Chrome MCP, or Playwright to open the page at the correct URL.
-      Capture screenshots at each target breakpoint:
+   c. **Open side-by-side browser sessions for direct visual comparison**:
+      Start the dev server if not running. Open TWO views simultaneously:
+      - **View 1 — Built frontend**: Use Claude Preview, Chrome MCP, or Playwright to open the
+        implemented page at the correct URL. Navigate to the exact route/component being verified.
+      - **View 2 — Original design**: If Figma URL → open the Figma page in another browser tab.
+        If design image file → open the image in a browser tab (`file://` path or HTML wrapper).
+        If Figma MCP screenshot → open that screenshot image.
+      Walk through each component with both views visible. Compare element-by-element at matching
+      zoom levels. Capture screenshot pairs (design + implementation) at each target breakpoint:
         - Mobile: 375px width
         - Tablet: 768px width
         - Desktop: 1280px width

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekyzinc/gsd-t",
-  "version": "2.56.14",
+  "version": "2.56.15",
   "description": "GSD-T: Contract-Driven Development for Claude Code — 51 slash commands with headless CI/CD mode, graph-powered code analysis, real-time agent dashboard, execution intelligence, task telemetry, doc-ripple enforcement, backlog management, impact analysis, test sync, milestone archival, and PRD generation",
   "author": "Tekyz, Inc.",
   "license": "MIT",

package/templates/stacks/design-to-code.md

@@ -461,13 +461,31 @@ MANDATORY:
   │     Write each element as a row in the comparison table (Step 4).
   │     If the inventory has fewer than 20 elements for a full page, you missed items.
   │
-  ├── Step 3: RENDER IN A REAL BROWSER + SCREENSHOT
+  ├── Step 3: OPEN SIDE-BY-SIDE BROWSER SESSIONS
   │     Start the dev server (npm run dev, etc.)
-  │     Open the page using Claude Preview, Chrome MCP, or Playwright
-  │     You MUST see real rendered output — not just read the code
-  │     Capture screenshots at each target breakpoint:
-  │       Mobile (375px), Tablet (768px), Desktop (1280px) minimum
-  │     Each breakpoint is a separate screenshot
+  │     Open TWO browser views simultaneously for direct visual comparison:
+  │
+  │     VIEW 1 — BUILT FRONTEND:
+  │       Open the implemented page using Claude Preview, Chrome MCP, or Playwright
+  │       Navigate to the exact route/component being verified
+  │       You MUST see real rendered output — not just read the code
+  │
+  │     VIEW 2 — ORIGINAL DESIGN REFERENCE:
+  │       If Figma URL available → open the Figma page in a browser tab/window
+  │         Use the Figma URL from the design contract Source Reference field
+  │         Navigate to the specific frame/component being compared
+  │       If design image file → open the image in a browser tab/window
+  │         Use: file://{absolute-path-to-image} or render in an HTML page
+  │       If Figma MCP screenshot was captured → open that screenshot image
+  │
+  │     COMPARISON APPROACH:
+  │       With both views open, walk through each component/section:
+  │         - Position views side-by-side (or switch between tabs)
+  │         - Compare each element visually at the same zoom level
+  │         - Screenshot BOTH views at matching viewport sizes
+  │       Capture implementation screenshots at each target breakpoint:
+  │         Mobile (375px), Tablet (768px), Desktop (1280px) minimum
+  │       Each breakpoint is a separate screenshot pair (design + implementation)
   │
   ├── Step 4: STRUCTURED ELEMENT-BY-ELEMENT COMPARISON (MANDATORY FORMAT)
   │     You MUST produce a comparison table with this exact structure.