diff --git a/CLAUDE.md b/CLAUDE.md index c91b5d3..803b09f 100644 --- a/CLAUDE.md +++ b/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 ` - - - -
-
- Собери ресурсы, решая примеры!
-
-
- Собери ресурсы, решая примеры!
-
-
- Собери ресурсы, решая примеры!
-