How does Vibe Coder QA differ from traditional testing?

Unlike traditional tools that require writing complex test scripts for the DOM, Vibe Coder QA uses screenshots and Claude Vision to analyze the interface exactly as a human user would see it.

Do I need to install Playwright to use the web features?

Yes, the skill uses Playwright for web screenshots. You can run it via npx or use the provided Playwright MCP tool for a more integrated experience.

Can it compare my implementation to a design file?

Yes. You can provide both a design export and a screenshot of your current build, and Claude will identify specific discrepancies in spacing, typography, and color.

Which platforms does this skill support?

It provides built-in commands for Web (via Playwright), iOS (via Simulator), Android (via ADB), and macOS desktop applications.

Can this be automated in a CI/CD pipeline?

Absolutely. The skill includes templates for git hooks and bash scripts that can capture and save screenshots automatically before every commit.

Vibe Coder QA

Name: Vibe Coder QA
Author: willsigmon

bywillsigmon

•

Security & Testing

Automates the UI testing workflow by using screenshots and Claude Vision to identify layout issues and visual bugs without writing test code.

Vibe Coder QA implements a visual-first development workflow that leverages Claude Vision to perform high-fidelity UI audits. By automating screenshot capture across Web, iOS, Android, and macOS, this skill allows Claude to act as a real-time QA engineer that identifies misalignments, responsiveness issues, and accessibility flaws. It is designed for developers who want to replace traditional, brittle UI test suites with a conversational 'screenshot-and-fix' loop, ensuring every feature matches the design intent perfectly before deployment.

Key Features

01Multi-platform screenshot capture for Web, iOS, Android, and macOS

02Intelligent detection of layout shifts, overlapping elements, and broken responsiveness

037 GitHub stars

04Automated visual regression testing using Claude Vision analysis

05Integration scripts for pre-commit hooks and automated visual QA cycles

06Accessibility auditing for color contrast, touch targets, and font readability

Use Cases

01Performing rapid visual regression checks after major CSS or styling refactors

02Verifying that new frontend components match Figma designs precisely

03Ensuring mobile app layouts respect safe areas and platform-specific design guidelines

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add willsigmon/sigstack vibe-coder-qa

For use in Claude.ai and ChatGPT

Download Skill