capture-pr-visuals

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

6|Updated Feb 19, 2026
One-click install
npx skills add https://github.com/GeneralJerel/chalk-skills --skill capture-pr-visuals
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: capture-pr-visuals
Source: https://github.com/GeneralJerel/chalk-skills/tree/main/skills/capture-pr-visuals
Command: npx skills add https://github.com/GeneralJerel/chalk-skills --skill capture-pr-visuals

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Auto-captures PR visuals (screenshots and GIFs) of the running app for documentation during code review and PR workflows, using Playwright and project context from chalk.json.

Core Features & Use Cases

  • Auto-discovery of dev URL and routes when chalk.json is missing, via package.json analysis and common routing patterns.
  • Screenshots and GIF video captures of specified routes to illustrate UI changes.
  • Optional workflow for integrating into PR pipelines to provide visual context for changes.

Quick Start

Run the capture-pr-visuals workflow to auto-capture screenshots and GIFs of your running app for PR documentation.

Frequently Asked Questions about capture-pr-visuals

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

FAQPage Schema
How do I automatically capture screenshots and GIFs of my app for PR documentation?

To automatically capture screenshots and GIFs for PR documentation, this workflow uses Playwright to capture visuals of your running app. It identifies routes and generates artifacts directly from your project context to illustrate UI changes during code review.

How does automatic dev server and route discovery work when chalk.json is unavailable?

Dev server and route discovery works by inspecting package.json and analyzing common routing patterns. This allows the capture process to auto-discover the dev URL and identify application routes without requiring chalk.json to be present.

Do I need Playwright and Node.js to capture PR visuals?

Yes, you need Playwright and a Node.js environment to capture PR visuals. Access to the project context is also required to identify routes, start the dev server, and generate the visual artifacts for documentation.

What frameworks are supported for auto-discovering routes to capture screenshots?

Major frameworks are supported for route discovery by inspecting package.json and common routing patterns. This allows the tool to auto-discover the dev URL and routes needed to capture screenshots and GIFs.

Can I integrate visual capture into my existing PR pipelines?

Yes, you can integrate visual capture into your PR pipelines to provide visual context for changes. The workflow automates the capture of screenshots and GIFs of the running app specifically for PR documentation.