skills.rest
riccjohn
riccjohnCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

visual-inspection

Capture multi-viewport screenshots and analyze design fidelity and layout stability.

1|Updated May 3, 2025
Search Tags:#screenshots#design consistency#responsive testing#Playwright MCP#visual QA#terminal aesthetic
One-click install
npx skills add https://github.com/riccjohn/blog --skill visual-inspection
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-inspection
Source: https://github.com/riccjohn/blog/tree/main/.claude/skills/visual-inspection
Command: npx skills add https://github.com/riccjohn/blog --skill visual-inspection

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This skill automates visual QA tasks for web interfaces by capturing screenshots at mobile, tablet, and desktop viewports and evaluating them for design fidelity and layout stability.

Core Features & Use Cases

  • Capture screenshots at Desktop (1280px), Tablet (768px), and Mobile (375px) viewports.
  • Analyze design consistency with a terminal/developer aesthetic and detect layout shifts.
  • Validate interactive states and accessibility readiness across devices.

Quick Start

Start the dev server with pnpm dev and initiate the visual inspection workflow to begin capturing and analyzing UI screenshots for targeted pages.

Frequently Asked Questions about visual-inspection

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

FAQPage Schema
How do I automate visual QA across multiple device viewports?▼

You can automate visual QA by using Playwright MCP to capture screenshots at desktop, tablet, and mobile viewports, then analyzing them for design fidelity and layout stability.

What viewports does responsive testing support for capturing screenshots?▼

Responsive testing captures screenshots at three specific viewports: Desktop at 1280px, Tablet at 768px, and Mobile at 375px to ensure layout stability.

Do I need a local dev server to run Playwright MCP visual inspections?▼

Yes, you need a local dev server running on localhost:4321 and a configured Playwright MCP workflow to manage screenshot capture, validation, and cleanup.

Can I validate interactive states and accessibility during responsive testing?▼

Yes, visual QA validates interactive states and accessibility readiness across devices while analyzing design consistency and detecting layout shifts.

How do I start capturing UI screenshots for layout revisions?▼

Start your dev server with pnpm dev, then initiate the visual inspection workflow to begin capturing and analyzing UI screenshots for targeted pages.

What design styles does visual QA check for consistency?▼

Visual QA checks for design consistency with a terminal and developer aesthetic, ensuring UI changes align with this specific styling across all target devices.

Related Skills

Explore More Design & Creative Skills→
szymdzumszymdzum
1

bdg-browser-debug

Diagnose browser and Astro dev server issues via Chrome DevTools Protocol.

Community
Advanced
YSheldonYSheldon

recreate-screenshot

Recreate UI screens from screenshots with pixel-perfect layout, color, and typography fidelity.

Community
Advanced
cbemistercbemister

browser-test

test1

Community
Advanced
zinohomezinohome
1

visual-regression-tester

Capture and compare UI screenshots with Playwright and Chromatic.

Community
Advanced