pr-screenshots

Capture Playwright screenshots and embed them in GitHub PR descriptions.

619|188|Updated Jul 4, 2024
One-click install
npx skills add https://github.com/CommunityToolkit/Aspire --skill pr-screenshots-communitytoolkit
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: pr-screenshots
Source: https://github.com/CommunityToolkit/Aspire/tree/main/examples/squad/CommunityToolkit.Aspire.Hosting.Squad.AppHost/dev-squad/.squad/templates/skills/pr-screenshots
Command: npx skills add https://github.com/CommunityToolkit/Aspire --skill pr-screenshots-communitytoolkit

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, and includes scripts (resource) components.

What problem does it solve?

The process of manually creating and embedding screenshots for GitHub PRs can be time-consuming and error-prone, especially for PRs that affect multiple visual aspects like UI components, docs sites, or generated pages.

Core Features & Use Cases

  • Automated Screenshot Capture: Integrates with existing Playwright test screenshots to reduce manual effort.
  • Temporary Branch Hosting: Hosts screenshots on a temporary branch, allowing them to be embedded in PR descriptions without direct file commits.
  • Markdown Embedding: Automatically inserts images into PR descriptions, ensuring reviewers can see the visual changes at a glance.
  • Post-Merge Cleanup: Provides a command to delete the temporary branch after the PR is merged, maintaining a clean repository.
  • Gitignore Suggestion: Suggests ignoring screenshots locally to prevent accidental commit.

Quick Start

To capture and embed screenshots for a PR in GitHub, run pr-screenshots and follow the generated Markdown embed commands in your PR.

Frequently Asked Questions about pr-screenshots

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

FAQPage Schema
How do I automatically embed Playwright screenshots in a GitHub PR description?

You can automate screenshot embedding by running the pr-screenshots script to capture Playwright screenshots and generate Markdown embed commands for your PR. It hosts images on a temporary branch and inserts them directly into the PR description.

Can I add visual review screenshots to a GitHub PR without committing image files?

Yes, you can add visual review screenshots without direct file commits by hosting them on a temporary Git branch. The script provides post-merge cleanup commands to delete this branch, keeping your repository clean.

Does the GitHub PR screenshot automation tool require Playwright?

Yes, Playwright is a required dependency to capture the screenshots. The automation integrates with your existing Playwright test screenshots to generate the visual assets needed for PR review.

What is the best way to handle temporary screenshot branches after a PR is merged?

The best way to handle temporary screenshot branches is to use the provided post-merge cleanup command. This command deletes the temporary branch used for hosting images, ensuring your repository remains clean after the PR is merged.

How do I prevent accidentally committing locally generated PR screenshots?

You can prevent accidental commits by adding the screenshot directory to your .gitignore file. The script suggests ignoring screenshots locally to ensure generated visual review images are not tracked in your main repository.