ai-visual-accuracy-check
Validate PDF-to-HTML Visual Accuracy
PDF-to-HTML conversions can look correct in markup while losing layout, hierarchy, or spacing. This skill guides Claude, Codex, or Claude Code through screenshot-based visual review with scored pass/fail output.
Download the skill ZIP
Upload in Claude
Go to Settings → Capabilities → Skills → Upload skill
Toggle on and start using
Agent-readable resources
Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.
Test it
Using "ai-visual-accuracy-check". Compare a rendered chapter page to its source PDF page image with the default threshold.
Expected outcome:
The page passes with a high visual similarity score. Layout and hierarchy match well, with only minor spacing differences.
Using "ai-visual-accuracy-check". Review a chapter after CSS changes caused layout shifts.
Expected outcome:
The page fails the threshold. The main issues are heading prominence, list indentation, and table alignment compared with the PDF.
Using "ai-visual-accuracy-check". Evaluate three representative pages from a multi-page chapter.
Expected outcome:
The average score is acceptable. The opening page is strongest, while the final page needs minor typography adjustments.
Security Audit
Medium RiskThe static analyzer's Ruby backtick, weak cryptography, and system reconnaissance findings are false positives caused by Markdown code fences, filenames, and ordinary prose. The skill still has medium operational risk because its intended workflow reads local HTML and image files, renders screenshots with a headless browser, and sends visual content to Claude for analysis.
Medium Risk Issues (2)
Low Risk Issues (3)
Risk Factors
🌐 Network access (2)
📁 Filesystem access (3)
⚙️ External commands (2)
Detected Patterns
Quality Score
What You Can Build
Check converted textbook chapters
Compare generated chapter HTML against source PDF page images before release.
Gate document conversion pipelines
Add a score threshold that blocks deployment when visual fidelity falls below the expected level.
Review layout regressions
Use scored visual feedback to identify spacing, hierarchy, or positioning changes after CSS updates.
Try These Prompts
Use ai-visual-accuracy-check to compare chapter_02.html with 02_page_16.png. Use the default 85 threshold and summarize the pass or fail result.
Use ai-visual-accuracy-check on the opening, middle, and final pages for chapter 4. Average the page scores and list the main visual differences.
Use ai-visual-accuracy-check to explain why the latest chapter failed the 85 visual threshold. Prioritize layout, hierarchy, positioning, and typography fixes.
Use ai-visual-accuracy-check to compare two rendered HTML versions against the same PDF page. Recommend the version with stronger visual fidelity and explain the tradeoffs.
Best Practices
- Use non-confidential samples unless your AI service policy allows document image sharing.
- Keep the default 85 threshold until you have project-specific calibration data.
- Store original PDF images and rendered screenshots with stable names for repeatable review.
Avoid
- Do not treat the AI score as a replacement for accessibility or content correctness checks.
- Do not lower the threshold to pass known layout defects without documenting the reason.
- Do not render untrusted HTML outside a sandboxed browser environment.