nebula-visual-verification

Verify changed Canvas Workbench components and pages across viewports using collect-visual-signals.js.

16|6|Updated Feb 19, 2025
One-click install
npx skills add https://github.com/acquia/nebula --skill nebula-visual-verification
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: nebula-visual-verification
Source: https://github.com/acquia/nebula/tree/main/.agents/skills/nebula-visual-verification
Command: npx skills add https://github.com/acquia/nebula --skill nebula-visual-verification

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Provides a guarded, deterministic workflow for focused visual verification of changed Canvas components and pages so reviewers can reliably detect contrast, overflow, and obvious image/copy regressions without running exploratory full-app QA.

Core Features & Use Cases

  • Deterministic signal collection: Requires running a browser-side helper to capture contrast ratios, overflow metrics, and image context as machine-readable evidence.
  • Scoped review: Targets specific Workbench preview routes, authored mock states, and a tight set of viewports (desktop, tablet, mobile) to avoid noisy, unfocused checks.
  • Guided remediation loop: Includes an auto-fix and reverify loop, a checklist-driven pass/fail rubric, and explicit stuck/closeout rules for clear outcomes.
  • Use Case: A frontend engineer submits a component change and requests visual verification; the reviewer starts Workbench, runs the helper for each named state and viewport, and produces a concise deterministic closeout with artifacts only when needed.

Quick Start

Start or reuse Canvas Workbench, open the changed preview route and named state, and run the collect-visual-signals.js helper via agent-browser for each desktop, tablet, and mobile viewport before declaring results.

Frequently Asked Questions about nebula-visual-verification

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I run focused visual testing for changed frontend components without full-app QA?

Focused visual testing targets specific changed component routes and named mock states across desktop, tablet, and mobile viewports. You run a browser-side helper to collect deterministic contrast, overflow, and image signals before declaring a pass, avoiding noisy exploratory checks.

What deterministic signals should visual QA collect to catch contrast and overflow regressions?

Visual QA should collect deterministic contrast ratios, overflow metrics, and image context as machine-readable evidence. Capturing these signals across desktop, tablet, and mobile viewports for each named mock state reliably detects obvious image and copy regressions.

Can I automate visual verification across desktop, tablet, and mobile viewports?

Yes, automated visual verification runs a browser-side helper for each target component route, mock state, and viewport combination. This deterministic approach captures contrast, overflow, and image signals across desktop, tablet, and mobile without manual exploratory inspection.

Does visual verification work with mock states and named component routes?

Visual verification works by targeting specific Workbench preview routes and authored named mock states. It scopes checks to these defined states across multiple viewports, ensuring deterministic signal collection rather than unfocused full-app testing.

What's the best way to handle visual testing failures and reverify frontend changes?

Handle failures using a guided remediation loop with auto-fix and reverify capabilities. A checklist-driven pass/fail rubric evaluates collected contrast, overflow, and image signals, with explicit stuck and closeout rules producing concise deterministic outcomes with artifacts only when needed.

Why does visual verification require running a browser helper before declaring a pass?

Visual verification requires running the browser helper because it captures deterministic contrast, overflow, and image signals as machine-readable evidence. Without these collected signals across all target states and viewports, a reliable pass declaration cannot be made.