Skills
.Work. You
Rest

ai-visual-accuracy-check

Community

AI-powered visual validation: HTML matches PDF.

Software Engineering#layout check#html accuracy#qa automation#web rendering#visual validation#ai quality check#pdf comparison
AuthorAbeJitsu
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Ensuring generated HTML visually matches its original PDF source is critical but challenging with traditional pixel-diff tools. This Skill uses AI to perform a contextual visual accuracy check, understanding layout intent rather than just pixel differences, saving you manual QA time.

Core Features & Use Cases

  • Contextual AI Comparison: Compares rendered HTML to the original PDF, judging layout, hierarchy, and readability like a human QA reviewer.
  • Objective Scoring: Provides a similarity score (0-100%) and a breakdown by criteria (layout, hierarchy, positioning, typography) for transparent assessment.
  • Blocking Quality Gate: Automatically stops the pipeline if the score falls below a defined threshold (default 85%), preventing visually inaccurate content from proceeding.
  • Use Case: After converting a PDF chapter to HTML, use this Skill to automatically verify that the web version visually aligns with the original PDF, ensuring a consistent and high-fidelity user experience.

Quick Start

Check the visual accuracy of the attached 'chapter_02.html' against the original PDF page '02_page_16.png'.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: ai-visual-accuracy-check
Download link: https://github.com/AbeJitsu/Game-Settings-Panel/archive/main.zip#ai-visual-accuracy-check

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository