[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6X124TD8RJCPVCD12ZPR4RH":3,"skill-same:01M6X124TD8RJCPVCD12ZPR4RH":74},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":43,"linkOnly":44,"markdownContent":45,"markdownBody":46,"frontMatter":47,"refName":50,"commitSha":51,"skillDirectory":52,"forksCount":53,"repositoryHtmlUrl":54,"repositoryHomepageUrl":55,"ownerHtmlUrl":56,"ownerBlogUrl":57,"ownerDescription":58,"updatedAt":59,"install":60,"resources":73},"01M6X124TD8RJCPVCD12ZPR4RH","pr-screenshots",null,"Capture Playwright screenshots and embed them in GitHub PR descriptions","github\u002Fsquad","github","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F9919?v=4","01M6AC83DS133TPXFSP1DHNCC6","GitHub","01M6X0MZ6B0WYMMDPK3Q61KER6",3388,"MIT","https:\u002F\u002Fgithub.com\u002Fgithub\u002Fsquad\u002Fblob\u002Fdev\u002F.squad-templates\u002Fskills\u002Fpr-screenshots\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,9,42],"screenshots","pr","pr screenshots","for","testing","high","typedoc","requests","visual-review","embed","visual","pattern","github pr","api","pull","pull-requests","sessions","playwright","review","2026-11-10 10:12:30",false,"---\nname: \"pr-screenshots\"\ndescription: \"Capture Playwright screenshots and embed them in GitHub PR descriptions\"\ndomain: \"pull-requests, visual-review, docs, testing\"\nconfidence: \"high\"\nsource: \"earned (multiple sessions establishing the pattern for PR #11 TypeDoc API reference)\"\n---\n\n## Context\n\nWhen a PR includes visual changes (docs sites, UI components, generated pages), reviewers\nneed to see what the PR delivers without checking out the branch. Screenshots belong in\nthe **PR description body**, not as committed files and not as text descriptions.\n\nUse this skill whenever:\n- A PR touches docs site pages (Astro, Starlight, etc.)\n- A PR adds or changes UI components\n- A PR generates visual artifacts (TypeDoc, Storybook, diagrams)\n- Playwright tests already capture screenshots as part of testing\n\n## Patterns\n\n### 1. Capture screenshots with Playwright\n\nIf Playwright tests already exist and produce screenshots, reuse those. Otherwise,\nwrite a minimal capture script:\n\n```javascript\n\u002F\u002F scripts\u002Fcapture-pr-screenshots.mjs\nimport { chromium } from 'playwright';\n\nconst browser = await chromium.launch();\nconst page = await browser.newPage({ viewport: { width: 1280, height: 720 } });\n\nconst screenshots = [\n  { url: 'http:\u002F\u002Flocalhost:4321\u002Fpath\u002Fto\u002Fpage', name: 'feature-landing' },\n  { url: 'http:\u002F\u002Flocalhost:4321\u002Fpath\u002Fto\u002Fdetail', name: 'feature-detail' },\n];\n\nfor (const { url, name } of screenshots) {\n  await page.goto(url, { waitUntil: 'networkidle' });\n  await page.screenshot({ path: `screenshots\u002F${name}.png`, fullPage: false });\n}\n\nawait browser.close();\n```\n\n### 2. Host screenshots on a temporary branch\n\nGitHub PR descriptions render images via URLs. The `gh` CLI cannot upload binary\nimages directly. Use a temporary orphan branch to host the images:\n\n```powershell\n# Save current branch\n$currentBranch = git branch --show-current\n\n# Create orphan branch with only screenshot files\ngit checkout --orphan screenshots-temp\ngit reset\ngit add screenshots\u002F*.png\ngit commit -m \"screenshots for PR review\"\ngit push origin screenshots-temp --force\n\n# Build raw URLs\n$base = \"https:\u002F\u002Fraw.githubusercontent.com\u002F{owner}\u002F{repo}\u002Fscreenshots-temp\u002Fscreenshots\"\n# Each image: $base\u002F{name}.png\n\n# Return to working branch\ngit checkout -f $currentBranch\n```\n\n### 3. Embed in PR description\n\nUse `gh pr edit` with the raw URLs embedded as markdown images:\n\n```powershell\n$base = \"https:\u002F\u002Fraw.githubusercontent.com\u002F{owner}\u002F{repo}\u002Fscreenshots-temp\u002Fscreenshots\"\n\ngh pr edit {PR_NUMBER} --repo {owner}\u002F{repo} --body @\"\n## {PR Title}\n\n### What this PR delivers\n- {bullet points of changes}\n\n---\n\n### Screenshots\n\n#### {Page\u002FFeature Name}\n![{alt text}]($base\u002F{name}.png)\n\n#### {Another Page}\n![{alt text}]($base\u002F{another-name}.png)\n\n---\n\n### To verify locally\n```bash\n{commands to run locally}\n```\n\"@\n```\n\n### 4. Cleanup after merge\n\nAfter the PR is merged, delete the temporary branch:\n\n```bash\ngit push origin --delete screenshots-temp\n```\n\n### 5. Gitignore screenshots locally\n\nScreenshots are build artifacts — never commit them to feature branches:\n\n```gitignore\n# PR screenshots (hosted on temp branch, not committed to features)\nscreenshots\u002F\ndocs\u002Ftests\u002Fscreenshots\u002F\n```\n\n## Examples\n\n### Example: Docs site PR with 3 pages\n\n1. Start dev server: `cd docs && npm run dev`\n2. Run Playwright tests (they capture screenshots as a side effect)\n3. Push screenshots to `screenshots-temp` branch\n4. Update PR body with embedded `![...]()` image references\n5. Reviewer sees the pages inline without checking out the branch\n\n### Example: Reusing existing Playwright test screenshots\n\nIf tests at `docs\u002Ftests\u002F*.spec.mjs` already save to `docs\u002Ftests\u002Fscreenshots\u002F`:\n\n```powershell\ncd docs && npx playwright test tests\u002Fapi-reference.spec.mjs\n# Screenshots now at docs\u002Ftests\u002Fscreenshots\u002F*.png\n# Push those to screenshots-temp and embed in PR\n```\n\n## Anti-Patterns\n\n- ❌ **Committing screenshots to feature branches** — they bloat the repo and go stale\n- ❌ **Posting text descriptions instead of actual images** — reviewers can't see what they're getting\n- ❌ **Using `gh` CLI to \"upload\" images** — `gh issue comment` and `gh pr edit` don't support binary uploads\n- ❌ **Asking the user to manually drag-drop images** — automate it with the temp branch pattern\n- ❌ **Skipping screenshots for visual PRs** — if the PR changes what users see, show what users see\n- ❌ **Leaving the screenshots-temp branch around forever** — clean up after merge\n","## Context\n\nWhen a PR includes visual changes (docs sites, UI components, generated pages), reviewers\nneed to see what the PR delivers without checking out the branch. Screenshots belong in\nthe **PR description body**, not as committed files and not as text descriptions.\n\nUse this skill whenever:\n- A PR touches docs site pages (Astro, Starlight, etc.)\n- A PR adds or changes UI components\n- A PR generates visual artifacts (TypeDoc, Storybook, diagrams)\n- Playwright tests already capture screenshots as part of testing\n\n## Patterns\n\n### 1. Capture screenshots with Playwright\n\nIf Playwright tests already exist and produce screenshots, reuse those. Otherwise,\nwrite a minimal capture script:\n\n```javascript\n\u002F\u002F scripts\u002Fcapture-pr-screenshots.mjs\nimport { chromium } from 'playwright';\n\nconst browser = await chromium.launch();\nconst page = await browser.newPage({ viewport: { width: 1280, height: 720 } });\n\nconst screenshots = [\n  { url: 'http:\u002F\u002Flocalhost:4321\u002Fpath\u002Fto\u002Fpage', name: 'feature-landing' },\n  { url: 'http:\u002F\u002Flocalhost:4321\u002Fpath\u002Fto\u002Fdetail', name: 'feature-detail' },\n];\n\nfor (const { url, name } of screenshots) {\n  await page.goto(url, { waitUntil: 'networkidle' });\n  await page.screenshot({ path: `screenshots\u002F${name}.png`, fullPage: false });\n}\n\nawait browser.close();\n```\n\n### 2. Host screenshots on a temporary branch\n\nGitHub PR descriptions render images via URLs. The `gh` CLI cannot upload binary\nimages directly. Use a temporary orphan branch to host the images:\n\n```powershell\n# Save current branch\n$currentBranch = git branch --show-current\n\n# Create orphan branch with only screenshot files\ngit checkout --orphan screenshots-temp\ngit reset\ngit add screenshots\u002F*.png\ngit commit -m \"screenshots for PR review\"\ngit push origin screenshots-temp --force\n\n# Build raw URLs\n$base = \"https:\u002F\u002Fraw.githubusercontent.com\u002F{owner}\u002F{repo}\u002Fscreenshots-temp\u002Fscreenshots\"\n# Each image: $base\u002F{name}.png\n\n# Return to working branch\ngit checkout -f $currentBranch\n```\n\n### 3. Embed in PR description\n\nUse `gh pr edit` with the raw URLs embedded as markdown images:\n\n```powershell\n$base = \"https:\u002F\u002Fraw.githubusercontent.com\u002F{owner}\u002F{repo}\u002Fscreenshots-temp\u002Fscreenshots\"\n\ngh pr edit {PR_NUMBER} --repo {owner}\u002F{repo} --body @\"\n## {PR Title}\n\n### What this PR delivers\n- {bullet points of changes}\n\n---\n\n### Screenshots\n\n#### {Page\u002FFeature Name}\n![{alt text}]($base\u002F{name}.png)\n\n#### {Another Page}\n![{alt text}]($base\u002F{another-name}.png)\n\n---\n\n### To verify locally\n```bash\n{commands to run locally}\n```\n\"@\n```\n\n### 4. Cleanup after merge\n\nAfter the PR is merged, delete the temporary branch:\n\n```bash\ngit push origin --delete screenshots-temp\n```\n\n### 5. Gitignore screenshots locally\n\nScreenshots are build artifacts — never commit them to feature branches:\n\n```gitignore\n# PR screenshots (hosted on temp branch, not committed to features)\nscreenshots\u002F\ndocs\u002Ftests\u002Fscreenshots\u002F\n```\n\n## Examples\n\n### Example: Docs site PR with 3 pages\n\n1. Start dev server: `cd docs && npm run dev`\n2. Run Playwright tests (they capture screenshots as a side effect)\n3. Push screenshots to `screenshots-temp` branch\n4. Update PR body with embedded `![...]()` image references\n5. Reviewer sees the pages inline without checking out the branch\n\n### Example: Reusing existing Playwright test screenshots\n\nIf tests at `docs\u002Ftests\u002F*.spec.mjs` already save to `docs\u002Ftests\u002Fscreenshots\u002F`:\n\n```powershell\ncd docs && npx playwright test tests\u002Fapi-reference.spec.mjs\n# Screenshots now at docs\u002Ftests\u002Fscreenshots\u002F*.png\n# Push those to screenshots-temp and embed in PR\n```\n\n## Anti-Patterns\n\n- ❌ **Committing screenshots to feature branches** — they bloat the repo and go stale\n- ❌ **Posting text descriptions instead of actual images** — reviewers can't see what they're getting\n- ❌ **Using `gh` CLI to \"upload\" images** — `gh issue comment` and `gh pr edit` don't support binary uploads\n- ❌ **Asking the user to manually drag-drop images** — automate it with the temp branch pattern\n- ❌ **Skipping screenshots for visual PRs** — if the PR changes what users see, show what users see\n- ❌ **Leaving the screenshots-temp branch around forever** — clean up after merge\n",{"name":5,"domain":48,"source":49,"confidence":29,"description":7},"pull-requests, visual-review, docs, testing","earned (multiple sessions establishing the pattern for PR #11 TypeDoc API reference)","dev","7b731ec97f35346bdc4fa87c3edaf16b808fc0ae",".squad-templates\u002Fskills\u002Fpr-screenshots",518,"https:\u002F\u002Fgithub.com\u002Fgithub\u002Fsquad","https:\u002F\u002Fgithub.github.io\u002Fsquad\u002F","https:\u002F\u002Fgithub.com\u002Fgithub","https:\u002F\u002Fgithub.com\u002Fabout","How people build software.","2026-11-14 03:47:34",{"source":8,"skillName":5,"commands":61,"prompt":71,"zipAvailable":72},[62,65,68],{"tool":63,"command":64},"npx","npx skills add github\u002Fsquad --skill pr-screenshots",{"tool":66,"command":67},"bunx","bunx skills add github\u002Fsquad --skill pr-screenshots",{"tool":69,"command":70},"pnpm","pnpm dlx skills add github\u002Fsquad --skill pr-screenshots","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fgithub\u002Fsquad\u002Fblob\u002Fdev\u002F.squad-templates\u002Fskills\u002Fpr-screenshots\u002FSKILL.md",true,[],[75,83,90,97,127,138],{"skillNo":76,"name":77,"nameZh":6,"description":78,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":79,"categories":80,"keywords":81,"publishedAt":82},"01M76742ST8ZMSD38226TH61CN","squad-coordinator-init-mode","Squad coordinator only: Init Mode, proposing and casting a new team. Load when team.md is missing or has an empty roster, or when asked to set up or cast a team.","https:\u002F\u002Fgithub.com\u002Fgithub\u002Fsquad\u002Fblob\u002Fdev\u002Fplugins\u002Fsquad\u002Fskills\u002Fsquad-coordinator-init-mode\u002FSKILL.md",[],[],"2026-11-12 13:55:43",{"skillNo":84,"name":85,"nameZh":6,"description":86,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":87,"categories":88,"keywords":89,"publishedAt":82},"01M7673KYSME979M20YQTVV8P6","retro-enforcement","Keep retrospectives on schedule and track their action items as GitHub Issues, not markdown checklists","https:\u002F\u002Fgithub.com\u002Fgithub\u002Fsquad\u002Fblob\u002Fdev\u002Fplugins\u002Fsquad\u002Fskills\u002Fretro-enforcement\u002FSKILL.md",[],[],{"skillNo":91,"name":92,"nameZh":6,"description":93,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":94,"categories":95,"keywords":96,"publishedAt":82},"01M7670QCHBSR4W2XSX8XPA2ZB","cli-wiring","Checklist for wiring a new Squad CLI command: route it in cli-entry.ts, add help text, and test that it is reachable","https:\u002F\u002Fgithub.com\u002Fgithub\u002Fsquad\u002Fblob\u002Fdev\u002Fplugins\u002Fsquad\u002Fskills\u002Fcli-wiring\u002FSKILL.md",[],[],{"skillNo":98,"name":99,"nameZh":6,"description":100,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":101,"categories":102,"keywords":106,"publishedAt":43},"01M6X287DVJK1S91END9DSHETN","gh-aw-enlistment","Enlist a repository into Squad by installing the supported GitHub Agentic Workflows (gh-aw) bootstrap — with strict compilation, an explicit safe-update allowlist, and a human-reviewed bootstrap PR. Never auto-merges.","https:\u002F\u002Fgithub.com\u002Fgithub\u002Fsquad\u002Fblob\u002Fdev\u002Fworkflows\u002Fskills\u002Fgh-aw-enlistment\u002FSKILL.md",[103],{"categoryNo":104,"categoryName":105,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126],"gh aw enlistment","gh","preflight","guide","identity","compiling","squad","pr creation","Safety","safe","update","human","github cli","lock","workflows","auto","files","agentic workflows","ci","actions",{"skillNo":128,"name":129,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":130,"categories":131,"keywords":133,"publishedAt":43},"01M6X27Y5119CSRQFFJCV6432R","My Skill","https:\u002F\u002Fgithub.com\u002Fgithub\u002Fsquad\u002Fblob\u002Fdev\u002Ftest-fixtures\u002Fskills-test-abb30454\u002Fmy-skill\u002FSKILL.md",[132],{"categoryNo":104,"categoryName":105,"taxonomyType":21,"taxonomyTypeDesc":22},[134,135,136,28,137],"my","my skill","tester","vitest",{"skillNo":139,"name":140,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":141,"categories":142,"keywords":144,"publishedAt":43},"01M6X27RWAYB2X9ER0MVRRKXGA","bad-skill","https:\u002F\u002Fgithub.com\u002Fgithub\u002Fsquad\u002Fblob\u002Fdev\u002Ftest-fixtures\u002Fskills-test-abb30454\u002Fbad-skill\u002FSKILL.md",[143],{"categoryNo":104,"categoryName":105,"taxonomyType":21,"taxonomyTypeDesc":22},[145,146],"bad","bad skill"]