manual-qa

Capture desktop, mobile, and dark mode screenshots while checking console and network errors.

Updated Feb 10, 2026
One-click install
npx skills add https://github.com/wordshepherd/colophony --skill manual-qa
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: manual-qa
Source: https://github.com/wordshepherd/colophony/tree/main/.claude/skills/manual-qa
Command: npx skills add https://github.com/wordshepherd/colophony --skill manual-qa

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the tedious and error-prone process of manually performing visual quality assurance checks across different viewports and states of a web application, ensuring consistency and catching visual regressions.

Core Features & Use Cases

  • Automated Screenshot Capture: Generates screenshots for desktop, mobile, and dark mode across various application sections.
  • State Validation: Checks loaded, empty, and error states for visual correctness.
  • Error Detection: Identifies console errors and network failures during the QA process.
  • Use Case: Before releasing a new feature, run this Skill to automatically generate a comprehensive set of screenshots for the entire application, allowing for a quick visual review and identification of any UI bugs.

Quick Start

Run the manual-qa skill to capture screenshots for all sections of the application.

Frequently Asked Questions about manual-qa

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

FAQPage Schema
How do I automate visual QA across multiple viewports in a web application?

Automate visual QA by capturing screenshots across desktop, mobile, and dark mode viewports using Chrome DevTools MCP, validating prerequisites and querying necessary IDs before generation.

Can I detect console and network errors while taking screenshots for visual testing?

Yes, visual testing can detect console and network errors during the screenshot capture process, automatically logging these findings alongside the UI states into a markdown file.

What is the best way to capture loaded, empty, and error states for UI consistency?

The best way to capture loaded, empty, and error states is by automating visual quality assurance checks that validate state correctness and log findings for quick review.

Does visual regression testing work with Chrome DevTools for dark mode screenshots?

Yes, visual regression testing works with Chrome DevTools to capture dark mode screenshots, automatically checking for visual correctness across various application sections.

How do I validate prerequisites before capturing mobile and desktop screenshots?

Validate prerequisites by querying the application for necessary IDs, ensuring the environment is ready before capturing mobile and desktop screenshots via Chrome DevTools.

What limitations exist when automating visual quality assurance with Chrome DevTools?

Automating visual quality assurance with Chrome DevTools requires the MCP integration to query IDs and capture states, limiting use to environments where these prerequisites are met.