ai-visual-accuracy-checklisted

# AI Visual Accuracy Check Skill ## Purpose This is a **BLOCKING quality gate** that uses **AI to validate visual accuracy** of generated HTML against the original PDF page. Unlike pixel-perfect comparison, AI understands: - Visual hierarchy and layout intent - Contextual differences (web rendering vs PDF) - Whether readers would have similar experience - Trade-offs between CSS limitations and HTML accuracy The AI provides: - Objective similarity score (0-100%) - Breakdown by evaluation criteria - Specific differences noted - Clear pass/fail recommendation - Explanation for decisions This combines **AI's contextual understanding** with **deterministic gating** (must pass 85+ to continue). ## What to Do 1. **Load input files** - Read `chapter_XX.html` (generated consolidated HTML) - Read `02_page_XX.png` (original PDF page image) 2. **Render HTML to image** - Use headless browser (Playwright/Selenium) to render HTML as PNG - Capture full page screenshot - Save rendered image for comparison 3. **Invoke Claude with visual comparison** - Attach original PDF PNG as image 1 - Attach rendered HTML screenshot as image 2 - Request detailed visual comparison - Ask AI to score on multiple criteria 4. **Parse AI response** - Extract overall similarity score - Extract criterion-specific scores - Parse differences noted - Get recommendation (PASS/FAIL) 5. **Save comparison report** - Save to: `output/chapter_XX/chapter_artifacts/ai_visua