ux-reviewer-mcp

Execute automated visual reviews of web UIs via the UX Visual Reviewer MCP server.

Updated Feb 3, 2026
One-click install
npx skills add https://github.com/qdouble/stack-contracts --skill ux-reviewer-mcp
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ux-reviewer-mcp
Source: https://github.com/qdouble/stack-contracts/tree/main/.agent/skills/ux-reviewer-mcp
Command: npx skills add https://github.com/qdouble/stack-contracts --skill ux-reviewer-mcp

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill enables automated visual reviews of web UIs, capturing screenshots, videos, and detailed reports to identify and file UI issues efficiently.

Core Features & Use Cases

  • Automated Visual Reviews: Run NRQA checks, take screenshots, and record videos of web interfaces.
  • Artifact Generation: Produces screenshots, animated WebP videos, NRQA assertion reports, HAR files, and Playwright traces.
  • Issue Filing: Directly file bugs and findings with severity and category information.
  • Use Case: A developer needs to ensure a new feature's UI is pixel-perfect across different browsers. They use this Skill to run a visual review, get a video of the walkthrough, and file any identified discrepancies as P2 issues.

Quick Start

Use the ux-reviewer-mcp skill to perform a visual review of the provided URL and save the resulting artifacts.

Frequently Asked Questions about ux-reviewer-mcp

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

FAQPage Schema
How do I automate visual UI reviews and capture screenshots or video recordings?

Automated visual UI reviews capture screenshots, animated WebP videos, and Playwright traces by executing NRQA checks against a target web interface. The review connects to a running MCP server to perform deterministic task execution and gather visual evidence artifacts.

What is an NRQA check and how does it identify UI issues during a visual review?

An NRQA check is an automated assertion process executed during a visual review to identify UI discrepancies. It generates detailed assertion reports alongside screenshots and video recordings, providing evidence to file bugs with severity and category information.

How do I file UI bugs automatically with severity and category information after a visual review?

Filing UI bugs automatically involves running a visual review via the MCP server, which analyzes the UI and directly files identified discrepancies as issues. You can assign severity and category information to each filed bug based on the review findings.

Do I need ffmpeg and a running MCP server to perform automated web UI visual testing?

Yes, automated web UI visual testing requires a running MCP server, target UI accessibility via HTTP, and ffmpeg installed for video output. These prerequisites ensure the review can execute tasks, capture screenshots, and record video evidence.

What artifacts are generated when running an automated visual review of a web interface?

Running an automated visual review generates screenshots, animated WebP videos, NRQA assertion reports, HAR files, and Playwright traces. These artifacts document the visual walkthrough and provide evidence for filing UI issues.

Can I use this for pixel-perfect UI testing across different browsers for a new feature?

Yes, you can perform pixel-perfect UI testing for new features by running a visual review to capture a video walkthrough. The review identifies visual discrepancies and files them as issues, such as P2 severity bugs, for resolution.