Do I need to install Playwright separately?

Yes, you need the Playwright MCP server. You can add it by running 'claude mcp add playwright npx @playwright/mcp@latest' in your terminal.

What does the Validate skill do in Claude Code?

It automates the process of starting your dev server and using Playwright to take screenshots of your web designs, providing visual evidence that your implementation works.

How does the skill handle local development servers?

The skill is designed to run 'npm run dev' automatically in the background, so you don't have to manually start your server before validating designs.

Can I capture mobile or dark mode views?

Yes, the skill supports capturing multiple variants including dark mode and different viewport states to ensure comprehensive UI coverage.

Where are the captured screenshots stored?

Screenshots are automatically moved from the Playwright cache to your project's 'product/sections/' folder following standardized naming conventions.

Visual Validation & Screenshot Capture

Name: Visual Validation & Screenshot Capture
Author: CinderZhang

byCinderZhang

•

Design Tools

Automates the capture of full-page visual evidence to verify frontend implementations and UI designs.

The Validate skill enforces the 'evidence before claims' principle by automating the verification of screen designs. It intelligently identifies UI components in your project, launches your local development server in the background, and utilizes Playwright to capture high-quality, full-page screenshots. By prioritizing visual output over code assumptions, it provides developers with concrete proof of implementation success, streamlines documentation, and ensures UI consistency across different states like dark mode or mobile viewports.

Key Features

01Full-page screenshot capture via Playwright MCP integration

02Smart detection of screen designs and project roadmap sections

032 GitHub stars

04Automated UI manipulation to hide navigation for clean documentation

05Automatic background execution of local development servers

06Standardized asset management and directory organization

Use Cases

01Verifying UI responsiveness and layout across different screen variants

02Automating the generation of a visual project roadmap for stakeholders

03Capturing visual proof of completed frontend components for documentation

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add cinderzhang/driver-plugin validate

For use in Claude.ai and ChatGPT

Download Skill