メニュー
Record a visual demonstration of the key feature of this PR using screenshots and add it as a new comment to the PR.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/dyad-sh/dyad --skill dyadpr-screencastコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Diagnose and fix failing CI checks on a pull request from its latest GitHub Actions CI run. Use when PR CI has E2E/Playwright failures, macOS or Windows unit-test failures, or presubmit/type/build failures; analyzes the exact run logs and artifacts, invokes dyad:deflake-e2e-from-run for E2E failures, reproduces targeted unit tests locally, and publishes the fixes.
Address all outstanding issues on a GitHub Pull Request by handling both review comments and failing CI checks.
Read all unresolved GitHub PR comments from trusted authors and address or resolve them appropriately.
SKILL.md を表示中
SOC 職業分類に基づく
| name | dyad:pr-screencast |
| description | Record a visual demonstration of the key feature of this PR using screenshots and add it as a new comment to the PR. |
Record a visual demonstration of the key feature of this PR using screenshots and add it as a new comment to the PR.
IMPORTANT: This skill should complete all steps autonomously where possible. Permission prompts from Claude Code for file writes, bash commands, or GitHub operations should be accepted as normal — do not treat them as blockers.
$ARGUMENTS: (Optional) PR number or URL. If not provided, will use the PR associated with the current branch.You MUST use the TodoWrite tool to track your progress. At the start, create tasks for each step below. Mark each task as in_progress when you start it and completed when you finish. This ensures you complete ALL steps.
Determine the PR:
If $ARGUMENTS is provided, use it as the PR number or URL.
Otherwise, get the PR for the current branch:
gh pr view --json number,title,body,files,headRefOid -q '.number'
If no PR exists for the current branch, report an error and stop.
Analyze if this PR is user-facing:
Fetch the PR details including changed files:
gh pr view <PR_NUMBER> --json title,body,files,labels
Skip recording if the PR is NOT user-facing. A PR is NOT user-facing if:
*.md, *.txt, *.rst)*.json*.yaml*.yml*.toml*.config.**test*, *spec*, *tests*).github/*, .circleci/*, etc.)If the PR is not user-facing, post a brief comment explaining why the screencast was skipped:
gh pr comment <PR_NUMBER> --body "$(cat <<'EOF'
## Screencast Skipped
This PR appears to be a non-user-facing change (refactoring, documentation, tests, or internal changes), so no screencast was recorded.
---
*Automated by `/dyad:pr-screencast`*
EOF
)"
Then stop.
Identify the key feature to demonstrate:
Analyze the PR to understand:
Read the changed files to understand:
Formulate a plan for what the screencast should show:
Create a Playwright screencast script:
Create a new file at e2e-tests/screencast-demo.spec.ts that takes multiple screenshots to tell the visual story:
import { expect } from "@playwright/test";
import { test } from "./helpers/fixtures";
import * as fs from "fs";
import * as path from "path";
test.describe.configure({ mode: "serial" });
test("PR Demo Screencast", async ({ electronApp, po }) => {
// Ensure screenshots directory exists
const screenshotDir = path.join(__dirname, "screencast-screenshots");
if (!fs.existsSync(screenshotDir)) {
fs.mkdirSync(screenshotDir, { recursive: true });
}
const page = await electronApp.firstWindow();
// Set up the app for demo
await po.setUp({ autoApprove: true });
// Import or create a test app if needed
await po.importApp("minimal");
// Wait for app to be ready
await page.waitForTimeout(1000);
// === STEP 1: Capture initial state ===
await page.screenshot({
path: path.join(screenshotDir, "01-initial-state.png"),
fullPage: false,
});
// === STEP 2: Navigate to the feature / perform action ===
// TODO: Replace with actual navigation/interaction for this PR
// Example: await po.goToSettingsTab();
await page.waitForTimeout(500);
await page.screenshot({
path: path.join(screenshotDir, "02-during-action.png"),
fullPage: false,
});
// === STEP 3: Show the result ===
// TODO: Replace with actual result state
await page.waitForTimeout(500);
await page.screenshot({
path: path.join(screenshotDir, "03-final-result.png"),
fullPage: false,
});
// Verify the final screenshot exists to ensure all steps completed
expect(
fs.existsSync(path.join(screenshotDir, "03-final-result.png")),
).toBe(true);
});
Customize the script based on the feature being demonstrated:
e2e-tests/helpers/page-objects/PageObject.tsBuild the app:
The app must be built before recording:
npm run build
Run the screencast test:
Run the test to capture screenshots:
PLAYWRIGHT_HTML_OPEN=never npx playwright test e2e-tests/screencast-demo.spec.ts --timeout=120000 --reporter=list
If the test fails, read the error output, fix the script, and try again (up to 3 attempts). If the test still fails after 3 attempts, post a comment on the PR indicating the screencast could not be captured and report the error. Common issues:
waitForTimeout callsVerify screenshots were captured:
Check that the screenshots exist:
ls -la e2e-tests/screencast-screenshots/
You should see 2-4 PNG files. If not, check the test output for errors.
Upload screenshots to GitHub:
Upload screenshots to an assets branch so they can be referenced in PR comments.
# Get repo info
REPO=$(gh repo view --json nameWithOwner -q '.nameWithOwner')
TIMESTAMP=$(date +%Y%m%d-%H%M%S)
ASSET_DIR="pr-screencasts/pr-<PR_NUMBER>-$TIMESTAMP"
# Create or update the assets branch
git fetch origin assets:assets 2>/dev/null || git checkout --orphan assets
# Switch to assets branch, preserving working directory
git stash --include-untracked
git checkout assets 2>/dev/null || (git checkout --orphan assets && git rm -rf . 2>/dev/null || true)
# Create directory and copy screenshots
mkdir -p "$ASSET_DIR"
git stash pop 2>/dev/null || true
cp e2e-tests/screencast-screenshots/*.png "$ASSET_DIR/"
# Commit and push
git add "$ASSET_DIR"
git commit -m "Add screencast assets for PR #<PR_NUMBER>"
git push origin assets
# Switch back to original branch
git checkout -
git stash pop 2>/dev/null || true
The screenshots will be accessible at:
https://raw.githubusercontent.com/<REPO>/assets/<ASSET_DIR>/<filename>.png
Fallback: Use text description if upload fails: If uploads don't work, describe the screenshots in text format.
Post the comment to the PR:
Create the PR comment with the demonstration:
gh pr comment <PR_NUMBER> --body "$(cat <<'EOF'
## Feature Demo
### What this PR does
<Brief description of the feature based on your analysis>
### Visual Walkthrough
**Step 1: Initial State**
<Description of screenshot 1 - or embed image if uploaded>
**Step 2: User Action**
<Description of what the user does and screenshot 2>
**Step 3: Result**
<Description of the final result and screenshot 3>
### How to Test Manually
1. <Step to reproduce>
2. <Expected behavior>
---
*Automated by `/dyad:pr-screencast`*
EOF
)"
IMPORTANT: Do NOT use --edit-last or modify existing comments. Always create a NEW comment.
Clean up the Playwright script and assets:
Delete the temporary screencast script and screenshots:
rm -f e2e-tests/screencast-demo.spec.ts
rm -rf e2e-tests/screencast-screenshots/
Also clean up any test results:
rm -rf test-results/screencast-demo*
Summarize results:
Report to the user: