skills.rest
nesquikm
nesquikmCOMMUNITY
Explore all skills by this author →
GitHub

visual-check

Verify web UI layouts and rendering via rubber duck MCP with Chrome DevTools.

6|Updated Mar 19, 2026
Search Tags:#mcp#ui-testing#chrome-devtools#web-ui#rubber-duck#visual-check
One-click install
npx skills add https://github.com/nesquikm/dev-process-toolkit --skill visual-check-nesquikm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-check
Source: https://github.com/nesquikm/dev-process-toolkit/tree/main/plugins/dev-process-toolkit/skills/visual-check
Command: npx skills add https://github.com/nesquikm/dev-process-toolkit --skill visual-check-nesquikm

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visually verify web UI changes quickly and reliably by using a rubber duck MCP with Chrome browser tools, reducing manual QA time and catching layout issues early.

Core Features & Use Cases

  • MCP-powered visual verification of web UI using Chrome DevTools.
  • Fallback manual verification path when MCP is unavailable.
  • Suitable for regression checks after UI changes, with support for responsive layouts and accessibility checks.

Quick Start

Run the visual-check skill on your main UI page to start an MCP-guided visual verification.

Frequently Asked Questions about visual-check

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

FAQPage Schema
How do I verify web UI visuals automatically using Chrome DevTools?▼

You can verify web UI visuals automatically by running an MCP-guided visual check using Chrome DevTools to detect layout and rendering issues across responsive layouts. This reduces manual QA time by catching regressions early.

What is a rubber duck MCP and how does it work for UI testing?▼

A rubber duck MCP is a protocol server used to guide UI testing by interacting with Chrome DevTools. It powers visual verification of web interfaces to detect layout and rendering issues across different device sizes.

Do I need mcp-rubber-duck and chrome-devtools-mcp configurations to run visual checks?▼

Yes, running the base MCP-guided visual verification requires both mcp-rubber-duck and chrome-devtools-mcp configurations. These dependencies enable the skill to interact with the browser and detect rendering issues.

Can I perform visual regression checks on responsive layouts without an MCP?▼

Yes, you can perform visual regression checks without an MCP using the manual fallback verification path. This allows you to verify responsive layouts and accessibility when MCP configurations are unavailable.

What is the best way to catch web UI rendering issues after an update?▼

The best way to catch web UI rendering issues after an update is to run an MCP-guided visual verification on your main UI page. This checks for layout problems across various device sizes and ensures accessibility.

Related Skills

Explore More Software Engineering Skills→
eric-sabeeric-sabe
1

chrome-devtools

Automate browser interactions and inspect live web pages via Chrome DevTools.

Community
Intermediate
angadhnangadhn
19

see-ui

Captures headless Chrome screenshots across mobile and desktop viewports to identify layout and responsive issues.

Community
Intermediate
christopherlouetchristopherlouet
5

qa-chrome

Test web page layouts and diagnose console errors in Chrome.

Community
Intermediate
helderbertohelderberto
12

visual-validate

Automate visual UI validation with real browser sessions and before/after screenshots.

Community
Intermediate