skills.rest
jerelvelarde
jerelvelardeCOMMUNITY
Explore all skills by this author →
GitHub

capture-pr-visuals

Capture screenshots and GIFs of running web and Electron apps for PR documentation.

6|Updated Feb 19, 2026
Search Tags:#automation#screenshots#visuals#gif#playwright#pr#visual-regression
One-click install
npx skills add https://github.com/jerelvelarde/chalk-skills --skill capture-pr-visuals-jerelvelarde
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: capture-pr-visuals
Source: https://github.com/jerelvelarde/chalk-skills/tree/main/skills/capture-pr-visuals
Command: npx skills add https://github.com/jerelvelarde/chalk-skills --skill capture-pr-visuals-jerelvelarde

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Capture PR visuals by automatically taking screenshots and GIFs of the running application to document UI changes in pull requests, streamlining review and collaboration.

Core Features & Use Cases

  • Automatically capture screenshots and GIFs of the running app for PR documentation using Playwright and chalk.json context
  • Auto-detect project routes and server details when chalk.json is missing, ensuring visuals for critical pages are captured
  • Use optional route hints to target specific paths and create consistent, reusable PR visuals across projects

Quick Start

Run the skill to automatically capture PR visuals for the current project by starting the local dev server, auto-detecting routes, and generating screenshots and GIFs.

Frequently Asked Questions about capture-pr-visuals

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

FAQPage Schema
How do I automate screenshots and GIFs for pull request visual documentation?▼

Capture PR visuals by running the skill against a local dev server with Playwright. It automatically takes screenshots and GIFs of your web or Electron app to document UI changes, using chalk.json or explicit route hints to navigate pages.

Does PR visual regression automation work with Electron apps?▼

Yes, PR visual capture works with both web and Electron apps. It uses Playwright via npx to interact with the running application and generate visual documentation of UI changes for your pull requests.

Do I need a running dev server to capture Playwright screenshots for a PR?▼

Yes, a running local dev server is required to capture PR visuals. The skill uses the active server to load the application, auto-detect routes from chalk.json, and generate screenshots and GIFs of the UI.

What is the best way to capture specific routes for visual regression in a PR?▼

The best way to capture specific routes is using optional route hints or a chalk.json file. The skill auto-detects project routes and server details from chalk.json, or accepts explicit route hints to target specific paths for consistent PR visuals.

How does auto-detection of routes work when chalk.json is missing?▼

When chalk.json is missing, the skill auto-detects project routes and server details to ensure visuals for critical pages are captured. It navigates the running application to generate the necessary screenshots and GIFs for PR documentation.

Related Skills

Explore More Software Engineering Skills→
GeneralJerelGeneralJerel
6

capture-pr-visuals

Capture screenshots and GIFs of app routes using Playwright and chalk.json context.

Community
Advanced
tagtytagty

PR スクリーンショット・GIFワークフロー

Generate and deploy full-page screenshots and demo GIFs for pull requests.

Community
Intermediate
YangYuS8YangYuS8

playwright-cli

Automate browser testing workflows with Playwright via a CLI.

Community
Intermediate
riethmayerriethmayer
2

visual-verdict

Compare generated UI screenshots against reference images and output a JSON verdict.

Community
Advanced