feat(shipguard): add persona-aware visual reports

plugins/shipguard/README.md

@@ -44,6 +44,37 @@ Mark bugs directly on screenshots. The AI traces each annotation to source code
 | `/sg-visual-fix` | Auto-fix bugs annotated in the review dashboard |
 | `/sg-visual-review-stop` | Stop the review server |
 
+### Client Validation Reports
+
+ShipGuard can generate client-validation HTML reports from the same visual evidence. The primary use case is simple: give a client or stakeholder a focused page where they can compare before/after screenshots, choose `Accept / Adjust / Reject`, and export comments as JSON.
+
+The same report can be adapted by recipient persona. Put a `report.json` in:
+
+```text
+visual-tests/_results/change-reports/<report-id>/report.json
+```
+
+Then run `/sg-visual-review`. The dashboard builder creates:
+
+```text
+visual-tests/_results/persona-reports/<report-id>/client.html
+visual-tests/_results/persona-reports/<report-id>/product.html
+visual-tests/_results/persona-reports/<report-id>/design.html
+visual-tests/_results/persona-reports/<report-id>/engineering.html
+```
+
+Each page adapts the same change set to the recipient:
+
+| Audience | What it emphasizes |
+|----------|--------------------|
+| Client | Plain-language choices, before/after evidence, `Accept / Adjust / Reject` decisions |
+| Business | Outcome, priority, residual risk |
+| Product | Scope, acceptance criteria, route/test references |
+| Design | UX rationale, interaction tradeoffs, visual comparison |
+| Engineering | Files, tests, implementation boundaries |
+
+Use this when a client or stakeholder needs to validate UI direction without reading the full technical dashboard. The generated pages are static, served by the same review server, and include local comments plus JSON export.
+
 ### Smart Annotations (Gemini-style)
 
 The review dashboard uses **draggable annotation cards** to mark visual bugs on screenshots. Click anywhere on a screenshot to place a pin, then describe the problem.

plugins/shipguard/skills/sg-visual-review/SKILL.md

@@ -40,6 +40,74 @@ This script:
 4. Matches screenshots from `visual-tests/_results/screenshots/`
 5. Generates a self-contained `visual-tests/_results/review.html` (inline CSS + JS, no dependencies)
 6. If `monitor-data.json` exists in `_results/`, a "Monitor" tab appears showing the Gantt timeline of the last audit
+7. If change-report specs exist, generates persona-aware HTML reports under `visual-tests/_results/persona-reports/`
+
+### Client Validation Reports
+
+Use this when the report must be validated by a client or by different recipients: client, product, design, engineering, executive, or any custom audience. The generated pages are decision surfaces: before/after evidence, plain rationale, `Accept / Adjust / Reject`, free-form comments, and JSON export.
+
+Create a spec at:
+
+```text
+visual-tests/_results/change-reports/<report-id>/report.json
+```
+
+Put screenshots next to it, usually under:
+
+```text
+visual-tests/_results/change-reports/<report-id>/screenshots/
+```
+
+Then run:
+
+```bash
+node visual-tests/build-review.mjs --serve
+```
+
+ShipGuard generates:
+
+```text
+visual-tests/_results/persona-reports/index.html
+visual-tests/_results/persona-reports/<report-id>/index.html
+visual-tests/_results/persona-reports/<report-id>/<audience>.html
+```
+
+Each audience page adapts the same evidence:
+- `client` focuses on plain-language choices and validation.
+- `business` focuses on outcome and residual risk.
+- `product` focuses on priority, acceptance, route/test references.
+- `design` focuses on UX rationale and before/after evidence.
+- `engineering` focuses on files, tests, implementation boundaries.
+
+Each generated page includes local comments, `Accept / Adjust / Reject` decisions, and JSON export. This is the reusable ShipGuard layer; project-specific apps should consume it instead of hand-building one-off reports.
+
+Minimal `report.json` shape:
+
+```json
+{
+  "id": "checkout-redesign",
+  "title": "Checkout redesign",
+  "summary": "Decision report for checkout UX changes.",
+  "route": "/checkout",
+  "audiences": ["client", "product", "design", "engineering"],
+  "changes": [
+    {
+      "id": "payment-summary",
+      "title": "Payment summary is now persistent",
+      "problem": "Users lost context while scrolling.",
+      "decision": "Keep the summary visible during payment.",
+      "impact": "Reduces uncertainty before confirmation.",
+      "choices": ["Keep sticky", "Use collapsible", "Revert"],
+      "tests": ["checkout/payment"],
+      "files": ["src/components/checkout/payment-form.tsx"],
+      "before": { "src": "screenshots/before.png", "caption": "Previous state" },
+      "after": { "src": "screenshots/after.png", "caption": "New state" }
+    }
+  ]
+}
+```
+
+Full example: `skills/sg-visual-review/examples/change-report.json`.
 
 ### Step 2: Open in Browser
 
@@ -132,6 +200,7 @@ The build script and template are installed to the project:
 | `visual-tests/build-review.mjs` | Node.js build script |
 | `visual-tests/_review-template.html` | HTML template with inline CSS + JS |
 | `visual-tests/_results/review.html` | Generated output (not committed) |
+| `visual-tests/_results/persona-reports/` | Generated audience-specific reports |
 
 ## Setup