Agent skill · design visual · aiskillstore
ai-visual-accuracy-check
Use AI to compare rendered HTML to original PDF page. AI makes contextual judgment about visual accuracy with explainable reasoning. BLOCKING quality gate - stops pipeline if score below 85%.
Why this skill is useful
Adds a comprehensive AI-driven visual comparison workflow that automates quality gating based on contextual understanding of layout and design principles.
What it needs
Requires playwright, selenium installed locally. About 6k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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 chapterXX.html (generated consolidated HTML) Read 02pageXX.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/chapterXX/chapterartifacts/aivisualaccuracy.json Include timestamp, inputs used, AI model 6. Make gate decision If score ≥ 85: PASS (exit code 0, continue) If score < 85: FAIL (exit code 1, trigger hook) Input Parameters AI Prompt Template json { "overallscore": 92.5, "threshold": 85.0, "recommendation": "PASS", "criteriaanalysis": { "layoutmatch": { "score": 94, "feedback": "Overall page structure matches well. Section order correct, spacing appropriate." }, "visualhierarchy": { "score": 90, "feedback": "Headings clearly distinguished. Visual relationships preserved. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/ai-visual-accuracy-check