skills.rest
nhouseholder
nhouseholderCOMMUNITY
Explore all skills by this author →
GitHub

screenshot-dissector

Analyze screenshots to identify visual bugs with a pixel-level protocol.

Updated Aug 23, 2026
Search Tags:#screenshots#qa#devtools#visual-debugging#ui-bugs#pixel-analysis#layout-bugs
One-click install
npx skills add https://github.com/nhouseholder/nicks-claude-code-superpowers --skill screenshot-dissector
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: screenshot-dissector
Source: https://github.com/nhouseholder/nicks-claude-code-superpowers/tree/main/skills/screenshot-dissector
Command: npx skills add https://github.com/nhouseholder/nicks-claude-code-superpowers --skill screenshot-dissector

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

When troubleshooting UI issues from screenshots, Claude often misses subtleties that hide layout shifts, hidden state, console errors, or regressions. This Skill enforces a methodical, pixel-level examination so visual bugs are caught early and clearly documented.

Core Features & Use Cases

  • Systematic visual inspection of screenshots to identify layout, state, and rendering issues.
  • Provides a protocol for cross-checking DevTools information (Console, Network) with code paths to locate root causes.
  • Use Case: QA engineers share a screenshot; the Skill analyzes it and returns a precise bug report with actionable fixes.

Quick Start

Analyze the attached screenshot to produce a structured, pixel-perfect bug report.

Frequently Asked Questions about screenshot-dissector

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

FAQPage Schema
How do I identify visual UI bugs from a screenshot?▼

A screenshot visual bug analysis works by applying a deterministic visual-dissection protocol that cross-checks visible rendering issues against DevTools information like Console and Network states to pinpoint root causes.

Can I use a screenshot to troubleshoot web app layout regressions?▼

Yes, you can troubleshoot web app layout regressions using a screenshot by running it through a systematic visual inspection process that cross-checks DevTools code paths to locate and document the root cause of the issue.

Do I need external data or DevTools logs to analyze UI bugs in screenshots?▼

No, you do not need external data or DevTools logs to analyze UI bugs in screenshots; the visual dissection protocol requires only the provided screenshot to identify and document rendering issues methodically.

What is the best way to document pixel-level layout bugs for QA?▼

The best way to document pixel-level layout bugs for QA is to use a methodical visual inspection protocol that produces a structured, pixel-perfect bug report containing actionable fixes and root cause analysis.

Why does my web app screenshot show subtle visual bugs that are hard to pinpoint?▼

Subtle visual bugs in web app screenshots often hide in layout shifts, hidden states, or console errors, requiring a methodical pixel-level examination protocol to catch them early and clearly document the issues.

Related Skills

Explore More Software Engineering Skills→
vadimcomanescuvadimcomanescu
24

webapp-testing

Orchestrate local servers and Playwright scripts for end-to-end web app visual checks.

Community
Intermediate
CristoVenturesCristoVentures
2

design-implementation-reviewer

Compare live frontend implementations to Figma designs and generate discrepancy reports.

Official
Advanced
mortenbroesbymortenbroesby
1

browser-testing-with-devtools

Automate browser verification using live DevTools runtime evidence.

Community
Intermediate
summarybotngsummarybotng
2

visual-testing-advanced

Detect UI regressions via pixel-perfect screenshot comparison across viewports and browsers.

Official
Advanced