capture

Capture section-scoped screenshots at desktop, tablet, and mobile breakpoints using Playwright CLI.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/cfagerlin/theme-forge --skill capture-cfagerlin
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: capture
Source: https://github.com/cfagerlin/theme-forge/tree/main/capture
Command: npx skills add https://github.com/cfagerlin/theme-forge --skill capture-cfagerlin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @playwright/cli, and includes scripts (resource) and references (resource) components.

What problem does it solve?

Automates the generation of section-specific reference screenshots to enable reliable visual regression testing during theme migrations.

Core Features & Use Cases

  • Deterministic, multi-breakpoint captures for any given page section.
  • Produces matched desktop/tablet/mobile screenshots for pixel-accurate comparisons.
  • Use Case: A developer migrating a Shopify theme can generate stable references to detect visual drift across versions.

Quick Start

Use the capture skill to generate deterministic, section-scoped screenshots for a given page at desktop, tablet, and mobile breakpoints.

Frequently Asked Questions about capture

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

FAQPage Schema
How do I capture deterministic section screenshots for visual regression testing?

Deterministic section screenshots are captured by mapping specific page sections to desktop, tablet, and mobile breakpoints, producing pixel-accurate reference images to detect visual drift during theme migrations.

What is the best way to automate multi-breakpoint screenshots for a Shopify theme migration?

Automating multi-breakpoint screenshots for a theme migration requires a dedicated scripts-based capture process that generates stable desktop, tablet, and mobile references for any given page section to reliably detect visual drift across versions.

Do I need the Playwright CLI to generate section-scoped screenshots?

Yes, the Playwright CLI is required to generate section-scoped screenshots, as the capture workflow depends on it to execute deterministic multi-breakpoint captures and store them as reference images.

How does section-scoped visual regression capture work with theme-forge?

Section-scoped visual regression capture works by integrating with theme-forge's configuration to isolate specific page sections, mapping them to controlled breakpoint captures, and routing the resulting reference images to theme-forge's reference storage.

Can I use this capture process for pixel-perfect comparisons across desktop, tablet, and mobile breakpoints?

Yes, the capture process produces matched desktop, tablet, and mobile screenshots for any given page section, generating pixel-perfect comparisons to support reliable visual regression testing across multiple breakpoints.

Why does visual regression testing require deterministic screenshots during a theme migration?

Visual regression testing during a theme migration requires deterministic screenshots because stable, section-scoped reference images eliminate environmental inconsistencies, ensuring pixel-accurate detection of visual drift across theme versions.