skills.rest
firefly-events
firefly-eventsOFFICIAL
Explore all skills by this author →
GitHub

visual-qa

Compare design briefs and wireframe exports against implemented UI to identify fidelity gaps.

1|Updated Apr 10, 2026
Search Tags:#verification#wireframes#visual-qa#fidelity#ui-validation#design-briefs
One-click install
npx skills add https://github.com/firefly-events/plugin-hive --skill visual-qa-firefly-events
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-qa
Source: https://github.com/firefly-events/plugin-hive/tree/main/skills/visual-qa
Command: npx skills add https://github.com/firefly-events/plugin-hive --skill visual-qa-firefly-events

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Post-implementation design fidelity checks — compare design briefs (.pHive/design/index.yaml) and wireframe exports against the actual UI implementation, ensuring alignment before release and gating on design artifacts.

Core Features & Use Cases

  • Compare design briefs to implemented UI across stories defined in the design manifest.
  • Validate presence of wireframe exports and alignment with UI components.
  • Gate on design index and project profile readiness to ensure a controlled verification workflow.

Quick Start

Use the visual QA pass to verify the implementation matches the design briefs and wireframe exports.

Frequently Asked Questions about visual-qa

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

FAQPage Schema
How do I verify UI fidelity between design wireframes and the implemented code?▼

To verify UI fidelity, compare design briefs and wireframe exports against the actual implemented UI to identify discrepancies. This visual QA process checks alignment across stories defined in your design manifest and produces a detailed Work Report of gaps.

What is a visual QA pass for post-implementation design validation?▼

A visual QA pass validates post-implementation UI by comparing actual code output against design briefs and wireframes. It ensures the implemented UI aligns with the intended design before release by gating on required design artifacts.

How do I check implemented UI components against design briefs for discrepancies?▼

Check implemented UI components against design briefs by applying a visual QA workflow that locates implementation files using your project profile. It validates wireframe export presence and details any alignment gaps found.

Do I need a design index manifest to validate UI fidelity gaps?▼

Yes, you need a design index manifest located at .pHive/design/index.yaml to validate UI fidelity gaps. The verification workflow gates on this design index and your project profile readiness to ensure a controlled process.

What is the best way to report UI design fidelity discrepancies before release?▼

The best way to report UI design fidelity discrepancies is to generate a timestamped Work Report stored under .pHive/audits/visual-qa. This report details the discrepancies found, their severity, and a summary verdict.

Related Skills

Explore More Design & Creative Skills→
hulusi-tunchulusi-tunc
3

wireframe-spec

Specify annotated wireframe layouts with content priority and placement.

Community
Intermediate
firefly-eventsfirefly-events

polish-audit

Identify and prioritize animation opportunities for UI polish audits.

Official
Advanced
code-yeongyucode-yeongyu
67.6k

frontend-ui-ux

Convert visual design ideas into responsive HTML/CSS/JS components.

Community
Intermediate
daffy0208daffy0208
34

MVP Builder

Define MVP scope and prioritize features into P0/P1/P2 categories.

Community
Basic