designqa

What problem does it solve?

This Skill prevents shipping broken or overlapping frontend layouts by verifying rendered pixels against a strict layout-and-content contract instead of relying on claims like “done” or a quick human glance.

Core Features & Use Cases

• Closed-loop visual QA: Renders the target page in headless Chromium, uses the Copilot CLI view tool to inspect the produced PNG, critiques against the design contract, applies fixes, and re-screenshots until it can genuinely pass.
• Zone + content integrity checks: Enforces component bounding-zone integrity and validates canonical node/edge rendering, overlays, spacing, typography, and token correctness.
• Interaction-aware verification: Captures multiple states (idle, tick, HITL pause/approve, node click, complete) so UX regressions don’t slip through as static-image approvals.
• Guardrailed reporting pipeline: Runs screenshot capture, a11y (axe), visual diffing, per-screenshot critique creation, and produces a structured report for publish/fix decisions.

Quick Start

Run the full QA loop against a claimed-finished design surface by executing the designqa screenshot helper and following the required pipeline to view every PNG, write the critique, and generate a pass/fix report.