skills.rest
qihach64
qihach64COMMUNITY
Explore all skills by this author →
GitHub

verify-frontend

Automate frontend validation across desktop and mobile viewports with Playwright MCP.

Updated Aug 27, 2026
Search Tags:#automation#frontend#validation#mcp#playwright#visual-regression
One-click install
npx skills add https://github.com/qihach64/hefumiyabi-website --skill verify-frontend
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: verify-frontend
Source: https://github.com/qihach64/hefumiyabi-website/tree/main/.claude/skills/verify-frontend
Command: npx skills add https://github.com/qihach64/hefumiyabi-website --skill verify-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automates frontend validation after code changes by performing visual and functional checks across desktop and mobile viewports using Playwright MCP.

Core Features & Use Cases

  • Automated desktop and mobile viewport validation for UI consistency.
  • Visual regression checks, DOM snapshots, and console monitoring during verification.
  • Use Case: after updating UI components, run the workflow to ensure layout stability and expected interactions across devices.

Quick Start

Start the local development server and run the Playwright MCP workflow to validate the target pages in desktop and mobile viewports.

Frequently Asked Questions about verify-frontend

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

FAQPage Schema
How do I automate frontend validation after UI changes?▼

Automate frontend validation by running a Playwright MCP workflow to execute visual and functional checks across desktop and mobile viewports. This ensures layout stability and verifies expected interactions immediately after updating UI components.

How does Playwright MCP handle visual regression checks?▼

Playwright MCP handles visual regression by capturing DOM snapshots and monitoring console output during automated browser navigation. It resizes viewports across desktop and mobile to verify UI consistency after code changes.

What do I need to run automated browser viewport validation?▼

To run automated browser viewport validation, you need a local development server started and the target pages accessible. The Playwright MCP workflow then navigates to these pages to perform DOM snapshots and viewport resizing.

Can I verify mobile and desktop UI consistency with Playwright MCP?▼

Yes, you can verify mobile and desktop UI consistency with Playwright MCP. The workflow resizes browser viewports to target dimensions, applying visual and functional checks to ensure layout stability across different devices.

What is the best way to perform repeatable UI verification after code changes?▼

The best way to perform repeatable UI verification is using a Playwright MCP workflow to automate environment setup, navigation, and viewport resizing. This provides quick, repeatable validation of layout adjustments and component changes.

Related Skills

Explore More Software Engineering Skills→
tomeraitztomeraitz
8

debugger

Execute automated browser user flows and monitor console logs with Playwright MCP.

Community
Advanced
zeronx798zeronx798

dogfood

Navigate web pages and interact with DOM elements to detect functional, visual, accessibility issues via browser snapshots and console error monitoring, producing structured bug reports.

Community
Advanced
tedtv1007-ctrltedtv1007-ctrl

playwright-testing

Automate browser-based end-to-end testing with Playwright.

Community
Advanced
alvarettoalvaretto
1

Comparación Visual Inteligente

Compare generated images against originals and report visual differences.

Community
Advanced