skills.rest
denisvmedia
denisvmediaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

screenshot-review

Capture and review PNG screenshots of the Inventario React frontend to detect UI regressions.

4|Updated Jun 10, 2023
Search Tags:#frontend#e2e#i18n#screenshot#visual-qa#dark-mode#ui-regression
One-click install
npx skills add https://github.com/denisvmedia/inventario --skill screenshot-review
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: screenshot-review
Source: https://github.com/denisvmedia/inventario/tree/main/.claude/skills/screenshot-review
Command: npx skills add https://github.com/denisvmedia/inventario --skill screenshot-review

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill enables local, visual QA of the Inventario frontend by capturing and reviewing screenshots to spot UI regressions, i18n gaps, and layout issues before deployment.

Core Features & Use Cases

  • Two related jobs: (1) run e2e/screenshots-react.mjs against a running build to generate PNGs in .research/screenshots/pr-NNN/, then review each image for issues; (2) after a frontend change, surface the offer to run the first pass and wait for user consent.
  • Never auto-run without explicit user approval; reviews focus on bugs like unresolved i18n keys, broken layout, incorrect currency, and truncated dates.
  • This skill is invoked on demand to visually vet changes and detect regressions.

Quick Start

Run the local screenshot workflow against a running Inventario frontend to capture and review UI previews on demand.

Frequently Asked Questions about screenshot-review

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

FAQPage Schema
How do I capture local screenshots to detect UI regressions in a React frontend?▼

To capture local screenshots for UI regression detection, run the e2e/screenshots-react.mjs script against a running build to generate PNGs, then review each image for layout and formatting issues.

What visual QA checks should I run before releasing frontend changes?▼

Before releasing frontend changes, run visual QA checks to identify unresolved i18n keys, broken layouts, incorrect currency formatting, and truncated dates across different themes including dark-mode.

Do I need a running binary to generate frontend screenshots for visual review?▼

Yes, you need a running binary with the frontend bundle to execute the screenshot generation script and produce PNG outputs for visual review.

Can I automate screenshot capture to automatically run after every frontend change?▼

No, the screenshot capture workflow never auto-runs without explicit user approval; after a frontend change, it surfaces an offer to run and waits for your consent before generating PNGs.

How does visual regression testing handle internationalization and currency formatting?▼

Visual regression testing handles internationalization by capturing screenshots of the frontend and analyzing them to detect unresolved i18n keys and incorrect currency formatting before deployment.

What is the best way to review UI layout issues across different themes locally?▼

The best way to review UI layout issues across themes locally is by capturing screenshots into a research directory and analyzing the PNGs for visual regressions in dark-mode and standard layouts.

Related Skills

Explore More Software Engineering Skills→
denisvmediadenisvmedia
4

inventario-e2e

Run and debug Playwright e2e tests against a local Go backend stack.

Community
Advanced
JansenAnalyticsJansenAnalytics
5

frontend-inspector

Analyze frontend screenshots to detect visual defects and generate structured reports.

Community
Intermediate
arbgjrarbgjr

frontend-testing

Automate frontend end-to-end testing with Playwright and pytest.

Community
Intermediate
distribucionesfayosmoreno-sysdistribucionesfayosmoreno-sys

ui-visual-validator

Validate UI modifications for visual regression, compliance, and accessibility.

Community
Advanced