Fold demo-build learnings: mechanical visual-QA design gate + detector-authoring traps

[Justinvolved]

Folds one demo-build session's design-quality-gate learnings into the demo skills' visual-QA, orchestrator, and re-skin references. A page that returns HTTP 200 is not a page that is done; these changes make the recurring polish defects mechanical instead of relying on an eyeball, and document the authoring traps that make such a gate pass silently.

Per learning (symptom -> change -> validation):

Image-band height is a Tier-1 visual-QA item, mechanically gated

• Symptom: demos ship towering portrait image bands and slider cover-cards that dominate the fold; every demo that swaps in its own photos reproduces it.
• Change: the stock image components carry no serialized height field, so a tall crop renders full column-width height, uncapped. Added a tall detector to visual-qa.md (image band taller than a configured viewport fraction), an eyeball-checklist + symptom-table row, and a DoD item. Durable fix is a Tier-1 theme-CSS cap (aspect-ratio + max-height + object-fit: cover) documented in dw-demo-swift/re-skin.md. Distinct from the existing stretched finding (aspect is fine; the band is just too tall).
• Validation: the tall array is non-empty when a band exceeds the cap; a capped page returns it empty.

PLP list must assert row-presence AND per-row content, not HTTP 200

• Symptom: a list-mode PLP returns 200 while rendering zero product rows (empty/not-yet-repopulated index, mis-scoped shop) — a silent pass.
• Change: added a PLP detector to visual-qa.md asserting row count >= minRows and that each row carries its required-field selectors (thumbnail / SKU / price / add-to-cart), plus a DoD row. An empty or field-short list behind 200 is a named finding.
• Validation: empty: true (rows < minRows) or any missing entry fails; a filled list passes.

The programmatic detectors are the mechanical definition-of-done

• Symptom: the overflow / section-gap / stretched-image / placeholder detectors existed but were run ad hoc and skippable.
• Change: framed them in visual-qa.md as a deterministic blocking pass/fail run before eyeballing, with the eyeball checklist layered on top rather than substituting.
• Validation: covered by the same detectors (overflowX, section-gap, image-stretch, placeholder).

Design sign-off — taste stays human without blocking automation

• Symptom: mechanical asserts prove structure but cannot judge hierarchy or brand fit; an all-green run can still ship a page that reads wrong.
• Change: documented a stamped, non-blocking sign-off leg in orchestrator.md acceptance criteria (and the visual-qa.md DoD): reports SKIP ("awaiting human sign-off") until a sign-off artifact exists, then PASS — so taste gets a human decision on the keeper screenshots without a build-blocking pause. The one blocking human gate remains the impact sign-off.
• Validation: SKIP with no artifact, PASS once the artifact is written.

Authoring detector/probe scripts — three silent-false-green traps

• Symptom: while authoring a scripted probe runner, each of three bugs produced a false green (a regression that silently passed).
• Change: documented in visual-qa.md: Playwright page.evaluate passes exactly one arg (pass an options object); PowerShell ConvertTo-Json unwraps a single-element array to a scalar (normalise scalar-or-array on the JS consumer side); a PowerShell local that is a case-variant of a parameter silently aliases it ($Body/$body — name the local distinctly). Plus the rule: a probe run emitting zero probes must never be reported as PASS.
• Validation: before the fixes a tall-band / big-gap page passed with zero probes; after, it fails naming the assert.

Version bumped to 4.11.1 (patch); CHANGELOG.md and the dw-demo-base README entry updated in the same commit. python3 scripts/validate-skills.py exits 0. All cross-references are demo->demo or demo->foundational; no foundational->demo link introduced.