feat: add screenshots

CLAUDE.md

@@ -101,12 +101,15 @@ When the user asks to create a new document of an existing type:
 ## Generation Pipeline
 
 ```
-.template.html + .data.json (if exists) → scripts/generate.mjs → .output.html
+.template.html + .data.json (if exists) → scripts/generate.mjs → .output.html + screenshots
 ```
 
 - Same pipeline for both Claude-initiated regeneration and editor-save flow
 - If no `.data.json` exists → template.html copied as-is to output.html
-- `generate.mjs` is a per-task-type script, not a global one
+- `generate.mjs` is a per-task-type script; it calls `postGenerate()` from `src/scripts/post-generate.mjs` at the end
+- `postGenerate()` runs `src/scripts/take-screenshots.mjs` which produces per-page PNG screenshots in `tasks/{type}/temp/{docId}-page-{N}.png`
+- Screenshots are automatically regenerated on every generate — old ones are deleted before new ones are written
+- **All new task types must include `postGenerate()` call in their `generate.mjs`** — this is part of the standard pipeline
 
 ## Editor System
 
@@ -122,11 +125,12 @@ http://localhost:3300/tasks/{type}/editor.html?file={docId}
 2. Editor POST `/api/save-edits` with `{ taskType, docId, data }`
 3. Server writes `docs/{docId}.data.json`
 4. Server computes diff → writes `temp/{docId}.diff.json`
-5. Server runs `generate.mjs` to regenerate output.html
+5. Server runs `generate.mjs` → regenerates output.html + screenshots
 
 **Claude reviewing editor changes:**
 ```bash
-cat tasks/{type}/temp/{docId}.diff.json
+cat tasks/{type}/temp/{docId}.diff.json           # see what changed
+# Read screenshot PNGs from tasks/{type}/temp/{docId}-page-{N}.png to verify visually
 ```
 
 ## Index Page
@@ -146,8 +150,9 @@ Claude Code is the central orchestrator. Scripts are tools for Claude, not auton
 - Claude runs a script, reads its output, decides what to do next
 
 **Allowed write exceptions:**
-- `generate.mjs` — writes `.output.html` (template+data→output, deterministic)
+- `generate.mjs` — writes `.output.html` + screenshots via `postGenerate()` (template+data→output, deterministic)
 - `generate-pdf.mjs` — writes PDF (final artifact)
+- `take-screenshots.mjs` — writes page PNGs to `temp/` (called by `postGenerate`, part of generate pipeline)
 - `/api/save-edits` — writes `.data.json` + `.diff.json` + runs `generate.mjs` (user-initiated from editor UI)
 
 **Example of correct flow:**
@@ -166,6 +171,29 @@ During sessions, when the user gives feedback or instructions specific to a task
 If confirmed → write to `tasks/{type}/CLAUDE.md`.
 General rules that apply to all types → root CLAUDE.md (this file).
 
+## Visual Verification
+
+**MANDATORY for:** refactoring, new features, new task types, new documents, any significant changes to templates or generation logic.
+
+### Automatic screenshots (passive)
+
+Every `generate.mjs` run produces per-page screenshots in `tasks/{type}/temp/{docId}-page-{N}.png`. These are always up-to-date — read them with the Read tool to verify results without asking the user.
+
+### Chrome DevTools MCP (interactive)
+
+Use `chrome-devtools-mcp` tools (`navigate_page`, `take_screenshot`) to check pages in the live browser when the dev server is running. This is useful for:
+- Checking editor functionality (drag, keyboard, save)
+- Verifying hover/click states
+- Inspecting specific elements
+
+### When to verify
+
+- **After generating a new document** — read at least page 1 screenshot to confirm images load and layout is correct
+- **After refactoring** — check all affected task types
+- **After editing template.html** — regenerate and check screenshots
+- **After modifying asset paths or server config** — check all types
+- **Do not ask the user to verify** what you can check yourself via screenshots
+
 ## HTML Generation Guidelines
 
 - **OUTPUT MUST BE STATIC HTML.** Template files must contain only static markup — no embedded `<script>` that computes, generates, or modifies content at runtime. Tailwind CDN `<script>` tag is the only exception.