Banner Visual QA

Banner Visual QA

Overview

Use this skill before showing Pafi, uploading, or handing off any raster banner. It catches objective production failures such as wrong dimensions, excessive file weight, wrong format, missing visible copy, blank exports, edge-risk text, and low-contrast OCR regions, then requires a separate visual inspection gate for hierarchy and polish.

This skill complements Claude's banner-critique skill:

• banner-visual-qa checks measurable export correctness.
• banner-critique checks subjective design quality through vision review.
• A banner is not final until both deterministic QA and visual inspection are recorded.

Quick Start

python3 ~/.codex/skills/banner-visual-qa/scripts/banner_qa.py \
  --image "/absolute/path/banner.jpg" \
  --width 800 \
  --height 419 \
  --max-kb 300 \
  --format jpg \
  --expected-text "A HUGE WELCOME BONUS OF $1000 AWAITS YOU" \
  --expected-text "CLAIM IT HERE" \
  --report "/absolute/path/banner.qa.md" \
  --json-report "/absolute/path/banner.qa.json"

For known channels, use a preset:

python3 ~/.codex/skills/banner-visual-qa/scripts/banner_qa.py \
  --image "/absolute/path/banner.jpg" \
  --channel-preset smsplus-800w \
  --expected-text "LUXURY CASINO" \
  --report "/absolute/path/banner.qa.md"

Required Workflow

1. Collect inputs — final image path, expected dimensions or channel preset, max KB, expected format, expected visible copy, and any required disclaimer.
2. Run automated QA — execute scripts/banner_qa.py.
3. Read the report — status is PASS, REVIEWABLE_PASS, or FAIL.
4. Open the final image — inspect the actual exported file at 100% size using Codex image viewing or an OS/browser screenshot flow.
5. Run visual critique when design quality matters — reuse Claude banner-critique rubric if available, or manually score readability, hierarchy, depth, brand fit, and professional polish.
6. Only deliver after recording visual inspection — never treat automated QA alone as final approval.

Status Semantics

• PASS: objective checks passed and no warnings were detected. Manual visual inspection is still required before final delivery.
• REVIEWABLE_PASS: no hard production blocker was found, but OCR was unavailable/imperfect, text is close to edges, contrast is risky, or manual inspection is required.
• FAIL: hard blocker found, such as wrong dimensions, file too large, wrong format, blank image, or expected text/disclaimer missing.

Delivery Rule

Do not present a banner as final unless the response includes:

• final image path
• source assets used
• expected copy
• QA report path
• visual inspection confirmation
• remaining manual risks, if any

Script

scripts/banner_qa.py performs the deterministic checks. It is local-only and makes no external API calls. It uses:

• Python Pillow for image metadata and image statistics.
• tesseract CLI if available for OCR text and bounding boxes.
• Graceful fallback to REVIEWABLE_PASS when OCR is unavailable.

References

• references/channel-specs.md contains default SMSads/VOX/IAB channel presets.

When to Use vs Alternatives

• banner-visual-qa: final export QA for raster banners.
• screenshot/playwright: capture source pages or desktop/browser state before banner production.
• imagegen/gpt-image-banner: create visual backgrounds or hero images, not final exact text validation.
• banner-critique: subjective design scoring; use after this skill or alongside it.
• pdf: extract vendor specs from PDF before choosing QA constraints.

Appropriate for: Templates, boilerplate code, document templates, images, icons, fonts, or any files meant to be copied or used in the final output.

Not every skill requires all three types of resources.