skills.rest
dyad-sh
dyad-shOFFICIAL
Explore all skills by this author →
WebsiteGitHub

dyad:pr-screencast

Records Playwright screenshots demonstrating a PR's feature and posts them as a GitHub PR comment.

21.4k|2.6k|Updated Apr 11, 2025
Search Tags:#screenshots#playwright#Automation#E2E Testing#gitHub#screencast#Pull request
One-click install
npx skills add https://github.com/dyad-sh/dyad --skill dyad-pr-screencast
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dyad:pr-screencast
Source: https://github.com/dyad-sh/dyad/tree/main/.claude/skills/pr-screencast
Command: npx skills add https://github.com/dyad-sh/dyad --skill dyad-pr-screencast

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Reviewers often cannot see what a pull request's UI change actually looks like without checking out the branch and running the app manually, slowing down review of user-facing changes.

Core Features & Use Cases

  • Automated visual demos: Analyzes the PR's changed files, writes a Playwright test that captures 2-4 screenshots showing the feature's progression, and runs it against the built Electron app.
  • Smart skipping: Detects non-user-facing PRs (docs, tests, CI, refactors) and posts an explanatory comment instead of recording.
  • Asset hosting and commenting: Uploads screenshots to an orphan assets branch and posts a new PR comment with a visual walkthrough and manual test steps.
  • Use Case: After opening a PR that adds a new settings panel, run this skill to automatically capture before/during/after screenshots and publish a demo comment for reviewers.

Quick Start

Run the dyad:pr-screencast skill on my current pull request to record a screenshot demo and post it as a PR comment.

Frequently Asked Questions about dyad:pr-screencast

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

FAQPage Schema
How do I automatically add screenshots to a GitHub pull request?▼

Use this skill to generate a Playwright test that captures screenshots of the changed feature, upload the images to an assets branch, and post a new PR comment embedding the visual walkthrough via gh pr comment.

How to record a demo of a PR feature with Playwright?▼

The skill creates a screencast-demo.spec.ts Playwright test using the project's PageObject helpers, builds the app with npm run build, then runs the test to capture 2-4 staged screenshots showing initial state, user action, and result.

Does the screencast run on documentation or refactor PRs?▼

No. The skill analyzes changed files and labels, and skips PRs that only touch docs, tests, config, CI, or type definitions. It posts a brief comment explaining why the screencast was skipped instead.

What happens if the Playwright screencast test fails?▼

The skill reads the error output, fixes the script, and retries up to three times, addressing common issues like missing selectors or timing. If it still fails, it posts a PR comment reporting that the screencast could not be captured.

Where are the PR screenshot images hosted?▼

Screenshots are committed to a dedicated orphan assets branch under pr-screencasts/pr-<number>-<timestamp>/ and referenced via raw.githubusercontent.com URLs, so no external image hosting service is required.

Related Skills

Explore More Software Engineering Skills→
ChoshimWyChoshimWy
8

gh-pr-flow

Automate staging, committing, pushing, and creating a draft GitHub pull request with gh.

Community
Intermediate
tktaftktaf

pr

Automate GitHub Pull Request review and remediation until merged.

Community
Advanced
ComposioHQComposioHQ
30.0k

typescript-testing

Select and run TypeScript SDK verification commands for packages, linting, builds, and E2E tests.

Official
Basic
aroidoaroido

Screenshot Automation

Automates application screenshots and creates GIFs via Playwright and ffmpeg.

Official
Intermediate