visual-inspection
CommunityVisual QA across devices with Playwright MCP
Design & Creative#screenshots#design consistency#responsive testing#Playwright MCP#visual QA#terminal aesthetic
Authorriccjohn
Version1.0.0
Installs0
System Documentation
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.
Dependency Matrix
Required Modules
None requiredComponents
scripts
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: visual-inspection Download link: https://github.com/riccjohn/blog/archive/main.zip#visual-inspection Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.