@tekyzinc/gsd-t 2.70.15 → 2.70.16

package/commands/gsd-t-design-decompose.md

@@ -252,11 +252,38 @@ For each widget contract:
 1. Copy `templates/widget-contract.md` as scaffold
 2. Reference elements by name in the "Elements Used" table
 3. Define layout, data binding, responsive behavior, widget-level verification
+4. **Extract layout CSS from `get_design_context` output (MANDATORY)**:
+   The Figma MCP returns code with explicit CSS layout properties. Parse these into the
+   widget contract's "Internal Element Layout" section:
+   - `body_layout`: Look at the parent container's CSS in the Figma output.
+     `flex flex-row` or `flex gap-[16px] items-center` → `flex-row`.
+     `flex flex-col` or `flex-col gap-[16px]` → `flex-column`.
+     `grid grid-cols-2` → `grid 2-col`. Write EXACTLY what the Figma shows.
+   - `body_gap`: Extract the gap value from the Figma CSS (e.g., `gap-[16px]` → `16px`)
+   - Legend position: If legend is a SIBLING of the chart in a `flex-row` container →
+     legend is BESIDE the chart (`body_sidebar`). If legend is BELOW the chart in a
+     `flex-col` container → legend is in `footer_legend`. This distinction is CRITICAL —
+     it's the difference between a side-by-side layout and a stacked layout.
+   - `container_height`: If the Figma shows `h-[334px]` → fixed height `334px`.
+     If no explicit height → `auto`.
 
 For each page contract:
 1. Copy `templates/page-contract.md` as scaffold
 2. Reference widgets in grid positions
 3. Define route, data loading, global states, performance budget
+4. **Extract grid structure from `get_design_context` output (MANDATORY)**:
+   The Figma MCP returns the page's layout as nested containers. Parse the structure:
+   - Count "Row" or `flex-row` containers and their children to determine grid dimensions
+     (e.g., 2 Row containers with 2 cards each → `grid 2×2`, NOT `grid 1×4`)
+   - Extract `gap` values between rows and between cards within rows
+   - Extract explicit heights on cards (e.g., `h-[334px]`)
+   - Document in the page contract's "Widgets Used" table:
+     ```
+     | grid[row=1, cols=1-2] | most-popular-tools + number-of-tools | 2 per row |
+     | grid[row=2, cols=1-2] | time-on-page + number-of-visits      | 2 per row |
+     ```
+   - **Anti-pattern**: Seeing 4 sibling cards and writing `grid-cols-4` when the Figma
+     groups them into 2 rows of 2. ALWAYS check the parent container structure.
 
 Write `INDEX.md` as a navigation map:
 

package/commands/gsd-t-execute.md

@@ -309,12 +309,57 @@ Execute the task above:
         recovers (retry button works, form can be resubmitted, etc.).
      A test that would pass on an empty HTML page with the right element IDs is useless.
      Every assertion must prove the FEATURE WORKS, not that the ELEMENT EXISTS.
-8. **Visual Design Note** (when design-to-code stack rule is active):
-   Do NOT perform visual verification yourself — a dedicated Design Verification Agent
-   (Step 5.25) runs after all domain tasks complete and handles the full visual comparison.
-   Your job: write precise code from the design contract tokens. Use exact hex colors,
-   exact spacing values, exact typography. Every CSS value must trace to the design contract.
-   The verification agent will open a browser and prove whether your code matches.
+8. **Render-Measure-Compare Loop** (when design-to-code stack rule is active — MANDATORY):
+   After implementing the component, you MUST verify it renders correctly by measuring
+   the actual DOM output against the contract's layout spec. This is not optional.
+   Do NOT rely on visual inspection or screenshots — measure mechanically.
+
+   a. **Render**: Start the dev server if not running. Navigate to a route where the
+      component is visible (or create a temporary test route that renders it in isolation).
+
+   b. **Measure via Playwright** — run `page.evaluate()` to extract DOM properties:
+      ```javascript
+      // For a widget: measure its internal layout
+      const el = document.querySelector('.widget-selector');
+      const style = getComputedStyle(el);
+      return {
+        display: style.display,           // 'flex' or 'grid'
+        flexDirection: style.flexDirection, // 'row' or 'column'
+        gap: style.gap,
+        gridTemplateColumns: style.gridTemplateColumns,
+        width: el.offsetWidth,
+        height: el.offsetHeight,
+        childCount: el.children.length,
+        children: Array.from(el.children).map(c => ({
+          tag: c.tagName,
+          width: c.offsetWidth,
+          height: c.offsetHeight,
+          display: getComputedStyle(c).display,
+          flexDirection: getComputedStyle(c).flexDirection,
+        }))
+      };
+      ```
+
+   c. **Compare to contract** — check each measured value against the contract spec:
+      - `body_layout: flex-row` → verify `flexDirection === 'row'`
+      - `container_height: 334px` → verify `height === 334` (±2px tolerance)
+      - Grid `2×2` → verify parent has 2 row children, each with 2 card children
+      - Legend position: if contract says `body_sidebar` (beside chart) →
+        verify legend and chart share a `flex-row` parent.
+        If contract says `footer_legend` (below chart) →
+        verify legend is in a `flex-column` parent below the chart.
+
+   d. **Fix mismatches** — if ANY measurement doesn't match the contract:
+      - Log: "LAYOUT MISMATCH: {property} expected {contract value}, got {measured value}"
+      - Fix the code to match the contract spec
+      - Re-render and re-measure (max 2 fix cycles)
+      - If still mismatched after 2 cycles → log to `.gsd-t/deferred-items.md`
+
+   e. **All pass** → log "RENDER-MEASURE PASS: {N} layout properties verified" and proceed.
+
+   This loop catches the exact class of errors that visual inspection misses:
+   grid-cols-4 instead of 2×2, legend below instead of beside, wrong flex-direction.
+   These are data comparisons, not visual judgments — the same kind of check as a unit test.
 9. Run ALL test suites — this is NOT optional, not conditional, not "if applicable":
    a. Detect configured test runners: check for vitest/jest config, playwright.config.*, cypress.config.*
    b. Run EVERY detected suite. Unit tests alone are NEVER sufficient when E2E exists.

package/commands/gsd-t-quick.md

@@ -159,8 +159,16 @@ When you encounter unexpected situations:
    - If building/modifying a PAGE: IMPORT existing widget components — do NOT rebuild widget functionality inline.
    - **Contract is authoritative**: Follow the contract spec, not the Figma screenshot, when they appear to disagree.
 5. Make the change — **adapt new code to existing structures**, not the other way around
-6. Verify it works
-7. Commit: `[quick] {description}`
+6. **Render-Measure-Compare** (if design component — MANDATORY):
+   After implementing, verify via Playwright DOM measurement (not screenshots):
+   - Render the component in browser
+   - `page.evaluate()` to extract: display, flexDirection, gap, gridTemplateColumns,
+     offsetWidth, offsetHeight, child count and layout
+   - Compare each value to the contract's layout spec (body_layout, container_height, etc.)
+   - Mismatches → fix code → re-measure (max 2 cycles)
+   - This catches: wrong grid structure, legend below vs beside, wrong flex-direction
+7. Verify it works
+8. Commit: `[quick] {description}`
 
 ## Step 3.5: Emit Task Metrics
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekyzinc/gsd-t",
-  "version": "2.70.15",
+  "version": "2.70.16",
   "description": "GSD-T: Contract-Driven Development for Claude Code — 54 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",