[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M719M44HBSCTEB65F8Q224C3":3,"skill-same:01M719M44HBSCTEB65F8Q224C3":71},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":22,"publishedAt":43,"linkOnly":44,"markdownContent":45,"markdownBody":46,"frontMatter":47,"refName":50,"commitSha":51,"skillDirectory":52,"forksCount":53,"repositoryHtmlUrl":54,"repositoryHomepageUrl":6,"ownerHtmlUrl":55,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":56,"install":57,"resources":70},"01M719M44HBSCTEB65F8Q224C3","pr-screenshots",null,"Capture Playwright screenshots and embed them in GitHub PR descriptions","DeDuva\u002Fsquad","DeDuva","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F8153108?v=4","01M719BQB25861D0TKS3RVHMN2","01M719BQBSWR380PSYDD5M9YD4",1,"MIT","https:\u002F\u002Fgithub.com\u002FDeDuva\u002Fsquad\u002Fblob\u002Fdev\u002Fpackages\u002Fsquad-sdk\u002Ftemplates\u002Fskills\u002Fpr-screenshots\u002FSKILL.md",[17],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000008","测试与质量","SCENARIO","使用场景",[23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42],"pr screenshots","screenshots","pr","pattern","requests","high","github","visual-review","playwright","review","github pr","embed","api","visual","pull-requests","sessions","testing","for","typedoc","pull","2026-11-10 10:12:30",false,"---\r\nname: \"pr-screenshots\"\r\ndescription: \"Capture Playwright screenshots and embed them in GitHub PR descriptions\"\r\ndomain: \"pull-requests, visual-review, docs, testing\"\r\nconfidence: \"high\"\r\nsource: \"earned (multiple sessions establishing the pattern for PR #11 TypeDoc API reference)\"\r\n---\r\n\r\n## Context\r\n\r\nWhen a PR includes visual changes (docs sites, UI components, generated pages), reviewers\r\nneed to see what the PR delivers without checking out the branch. Screenshots belong in\r\nthe **PR description body**, not as committed files and not as text descriptions.\r\n\r\nUse this skill whenever:\r\n- A PR touches docs site pages (Astro, Starlight, etc.)\r\n- A PR adds or changes UI components\r\n- A PR generates visual artifacts (TypeDoc, Storybook, diagrams)\r\n- Playwright tests already capture screenshots as part of testing\r\n\r\n## Patterns\r\n\r\n### 1. Capture screenshots with Playwright\r\n\r\nIf Playwright tests already exist and produce screenshots, reuse those. Otherwise,\r\nwrite a minimal capture script:\r\n\r\n```javascript\r\n\u002F\u002F scripts\u002Fcapture-pr-screenshots.mjs\r\nimport { chromium } from 'playwright';\r\n\r\nconst browser = await chromium.launch();\r\nconst page = await browser.newPage({ viewport: { width: 1280, height: 720 } });\r\n\r\nconst screenshots = [\r\n  { url: 'http:\u002F\u002Flocalhost:4321\u002Fpath\u002Fto\u002Fpage', name: 'feature-landing' },\r\n  { url: 'http:\u002F\u002Flocalhost:4321\u002Fpath\u002Fto\u002Fdetail', name: 'feature-detail' },\r\n];\r\n\r\nfor (const { url, name } of screenshots) {\r\n  await page.goto(url, { waitUntil: 'networkidle' });\r\n  await page.screenshot({ path: `screenshots\u002F${name}.png`, fullPage: false });\r\n}\r\n\r\nawait browser.close();\r\n```\r\n\r\n### 2. Host screenshots on a temporary branch\r\n\r\nGitHub PR descriptions render images via URLs. The `gh` CLI cannot upload binary\r\nimages directly. Use a temporary orphan branch to host the images:\r\n\r\n```powershell\r\n# Save current branch\r\n$currentBranch = git branch --show-current\r\n\r\n# Create orphan branch with only screenshot files\r\ngit checkout --orphan screenshots-temp\r\ngit reset\r\ngit add screenshots\u002F*.png\r\ngit commit -m \"screenshots for PR review\"\r\ngit push origin screenshots-temp --force\r\n\r\n# Build raw URLs\r\n$base = \"https:\u002F\u002Fraw.githubusercontent.com\u002F{owner}\u002F{repo}\u002Fscreenshots-temp\u002Fscreenshots\"\r\n# Each image: $base\u002F{name}.png\r\n\r\n# Return to working branch\r\ngit checkout -f $currentBranch\r\n```\r\n\r\n### 3. Embed in PR description\r\n\r\nUse `gh pr edit` with the raw URLs embedded as markdown images:\r\n\r\n```powershell\r\n$base = \"https:\u002F\u002Fraw.githubusercontent.com\u002F{owner}\u002F{repo}\u002Fscreenshots-temp\u002Fscreenshots\"\r\n\r\ngh pr edit {PR_NUMBER} --repo {owner}\u002F{repo} --body @\"\r\n## {PR Title}\r\n\r\n### What this PR delivers\r\n- {bullet points of changes}\r\n\r\n---\r\n\r\n### Screenshots\r\n\r\n#### {Page\u002FFeature Name}\r\n![{alt text}]($base\u002F{name}.png)\r\n\r\n#### {Another Page}\r\n![{alt text}]($base\u002F{another-name}.png)\r\n\r\n---\r\n\r\n### To verify locally\r\n```bash\r\n{commands to run locally}\r\n```\r\n\"@\r\n```\r\n\r\n### 4. Cleanup after merge\r\n\r\nAfter the PR is merged, delete the temporary branch:\r\n\r\n```bash\r\ngit push origin --delete screenshots-temp\r\n```\r\n\r\n### 5. Gitignore screenshots locally\r\n\r\nScreenshots are build artifacts — never commit them to feature branches:\r\n\r\n```gitignore\r\n# PR screenshots (hosted on temp branch, not committed to features)\r\nscreenshots\u002F\r\ndocs\u002Ftests\u002Fscreenshots\u002F\r\n```\r\n\r\n## Examples\r\n\r\n### Example: Docs site PR with 3 pages\r\n\r\n1. Start dev server: `cd docs && npm run dev`\r\n2. Run Playwright tests (they capture screenshots as a side effect)\r\n3. Push screenshots to `screenshots-temp` branch\r\n4. Update PR body with embedded `![...]()` image references\r\n5. Reviewer sees the pages inline without checking out the branch\r\n\r\n### Example: Reusing existing Playwright test screenshots\r\n\r\nIf tests at `docs\u002Ftests\u002F*.spec.mjs` already save to `docs\u002Ftests\u002Fscreenshots\u002F`:\r\n\r\n```powershell\r\ncd docs && npx playwright test tests\u002Fapi-reference.spec.mjs\r\n# Screenshots now at docs\u002Ftests\u002Fscreenshots\u002F*.png\r\n# Push those to screenshots-temp and embed in PR\r\n```\r\n\r\n## Anti-Patterns\r\n\r\n- ❌ **Committing screenshots to feature branches** — they bloat the repo and go stale\r\n- ❌ **Posting text descriptions instead of actual images** — reviewers can't see what they're getting\r\n- ❌ **Using `gh` CLI to \"upload\" images** — `gh issue comment` and `gh pr edit` don't support binary uploads\r\n- ❌ **Asking the user to manually drag-drop images** — automate it with the temp branch pattern\r\n- ❌ **Skipping screenshots for visual PRs** — if the PR changes what users see, show what users see\r\n- ❌ **Leaving the screenshots-temp branch around forever** — clean up after merge\r\n","## Context\r\n\r\nWhen a PR includes visual changes (docs sites, UI components, generated pages), reviewers\r\nneed to see what the PR delivers without checking out the branch. Screenshots belong in\r\nthe **PR description body**, not as committed files and not as text descriptions.\r\n\r\nUse this skill whenever:\r\n- A PR touches docs site pages (Astro, Starlight, etc.)\r\n- A PR adds or changes UI components\r\n- A PR generates visual artifacts (TypeDoc, Storybook, diagrams)\r\n- Playwright tests already capture screenshots as part of testing\r\n\r\n## Patterns\r\n\r\n### 1. Capture screenshots with Playwright\r\n\r\nIf Playwright tests already exist and produce screenshots, reuse those. Otherwise,\r\nwrite a minimal capture script:\r\n\r\n```javascript\r\n\u002F\u002F scripts\u002Fcapture-pr-screenshots.mjs\r\nimport { chromium } from 'playwright';\r\n\r\nconst browser = await chromium.launch();\r\nconst page = await browser.newPage({ viewport: { width: 1280, height: 720 } });\r\n\r\nconst screenshots = [\r\n  { url: 'http:\u002F\u002Flocalhost:4321\u002Fpath\u002Fto\u002Fpage', name: 'feature-landing' },\r\n  { url: 'http:\u002F\u002Flocalhost:4321\u002Fpath\u002Fto\u002Fdetail', name: 'feature-detail' },\r\n];\r\n\r\nfor (const { url, name } of screenshots) {\r\n  await page.goto(url, { waitUntil: 'networkidle' });\r\n  await page.screenshot({ path: `screenshots\u002F${name}.png`, fullPage: false });\r\n}\r\n\r\nawait browser.close();\r\n```\r\n\r\n### 2. Host screenshots on a temporary branch\r\n\r\nGitHub PR descriptions render images via URLs. The `gh` CLI cannot upload binary\r\nimages directly. Use a temporary orphan branch to host the images:\r\n\r\n```powershell\r\n# Save current branch\r\n$currentBranch = git branch --show-current\r\n\r\n# Create orphan branch with only screenshot files\r\ngit checkout --orphan screenshots-temp\r\ngit reset\r\ngit add screenshots\u002F*.png\r\ngit commit -m \"screenshots for PR review\"\r\ngit push origin screenshots-temp --force\r\n\r\n# Build raw URLs\r\n$base = \"https:\u002F\u002Fraw.githubusercontent.com\u002F{owner}\u002F{repo}\u002Fscreenshots-temp\u002Fscreenshots\"\r\n# Each image: $base\u002F{name}.png\r\n\r\n# Return to working branch\r\ngit checkout -f $currentBranch\r\n```\r\n\r\n### 3. Embed in PR description\r\n\r\nUse `gh pr edit` with the raw URLs embedded as markdown images:\r\n\r\n```powershell\r\n$base = \"https:\u002F\u002Fraw.githubusercontent.com\u002F{owner}\u002F{repo}\u002Fscreenshots-temp\u002Fscreenshots\"\r\n\r\ngh pr edit {PR_NUMBER} --repo {owner}\u002F{repo} --body @\"\r\n## {PR Title}\r\n\r\n### What this PR delivers\r\n- {bullet points of changes}\r\n\r\n---\r\n\r\n### Screenshots\r\n\r\n#### {Page\u002FFeature Name}\r\n![{alt text}]($base\u002F{name}.png)\r\n\r\n#### {Another Page}\r\n![{alt text}]($base\u002F{another-name}.png)\r\n\r\n---\r\n\r\n### To verify locally\r\n```bash\r\n{commands to run locally}\r\n```\r\n\"@\r\n```\r\n\r\n### 4. Cleanup after merge\r\n\r\nAfter the PR is merged, delete the temporary branch:\r\n\r\n```bash\r\ngit push origin --delete screenshots-temp\r\n```\r\n\r\n### 5. Gitignore screenshots locally\r\n\r\nScreenshots are build artifacts — never commit them to feature branches:\r\n\r\n```gitignore\r\n# PR screenshots (hosted on temp branch, not committed to features)\r\nscreenshots\u002F\r\ndocs\u002Ftests\u002Fscreenshots\u002F\r\n```\r\n\r\n## Examples\r\n\r\n### Example: Docs site PR with 3 pages\r\n\r\n1. Start dev server: `cd docs && npm run dev`\r\n2. Run Playwright tests (they capture screenshots as a side effect)\r\n3. Push screenshots to `screenshots-temp` branch\r\n4. Update PR body with embedded `![...]()` image references\r\n5. Reviewer sees the pages inline without checking out the branch\r\n\r\n### Example: Reusing existing Playwright test screenshots\r\n\r\nIf tests at `docs\u002Ftests\u002F*.spec.mjs` already save to `docs\u002Ftests\u002Fscreenshots\u002F`:\r\n\r\n```powershell\r\ncd docs && npx playwright test tests\u002Fapi-reference.spec.mjs\r\n# Screenshots now at docs\u002Ftests\u002Fscreenshots\u002F*.png\r\n# Push those to screenshots-temp and embed in PR\r\n```\r\n\r\n## Anti-Patterns\r\n\r\n- ❌ **Committing screenshots to feature branches** — they bloat the repo and go stale\r\n- ❌ **Posting text descriptions instead of actual images** — reviewers can't see what they're getting\r\n- ❌ **Using `gh` CLI to \"upload\" images** — `gh issue comment` and `gh pr edit` don't support binary uploads\r\n- ❌ **Asking the user to manually drag-drop images** — automate it with the temp branch pattern\r\n- ❌ **Skipping screenshots for visual PRs** — if the PR changes what users see, show what users see\r\n- ❌ **Leaving the screenshots-temp branch around forever** — clean up after merge\r\n",{"name":5,"domain":48,"source":49,"confidence":28,"description":7},"pull-requests, visual-review, docs, testing","earned (multiple sessions establishing the pattern for PR #11 TypeDoc API reference)","dev","4ffda80d1bb1043d9169688cf161e53097345c72","packages\u002Fsquad-sdk\u002Ftemplates\u002Fskills\u002Fpr-screenshots",0,"https:\u002F\u002Fgithub.com\u002FDeDuva\u002Fsquad","https:\u002F\u002Fgithub.com\u002FDeDuva","2026-11-09 20:24:44",{"source":8,"skillName":5,"commands":58,"prompt":68,"zipAvailable":69},[59,62,65],{"tool":60,"command":61},"npx","npx skills add DeDuva\u002Fsquad --skill pr-screenshots",{"tool":63,"command":64},"bunx","bunx skills add DeDuva\u002Fsquad --skill pr-screenshots",{"tool":66,"command":67},"pnpm","pnpm dlx skills add DeDuva\u002Fsquad --skill pr-screenshots","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FDeDuva\u002Fsquad\u002Fblob\u002Fdev\u002Fpackages\u002Fsquad-sdk\u002Ftemplates\u002Fskills\u002Fpr-screenshots\u002FSKILL.md",true,[],[72,85,93,109,131,146],{"skillNo":73,"name":74,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":75,"categories":76,"keywords":80,"publishedAt":43},"01M719NE6ZPZT80MKVWFDECJZ3","My Skill","https:\u002F\u002Fgithub.com\u002FDeDuva\u002Fsquad\u002Fblob\u002Fdev\u002Ftest-fixtures\u002Fskills-test-abb30454\u002Fmy-skill\u002FSKILL.md",[77],{"categoryNo":78,"categoryName":79,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[81,82,39,83,84],"my","my skill","vitest","tester",{"skillNo":86,"name":87,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":88,"categories":89,"keywords":90,"publishedAt":43},"01M719NDJAMEWM8D9H355SCNA8","bad-skill","https:\u002F\u002Fgithub.com\u002FDeDuva\u002Fsquad\u002Fblob\u002Fdev\u002Ftest-fixtures\u002Fskills-test-abb30454\u002Fbad-skill\u002FSKILL.md",[],[91,92],"bad skill","bad",{"skillNo":94,"name":95,"nameZh":6,"description":96,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":97,"categories":98,"keywords":99,"publishedAt":43},"01M719NCC1AZ02GHZ1V71YPEV7","squad-conventions","Core conventions and patterns used in the Squad codebase","https:\u002F\u002Fgithub.com\u002FDeDuva\u002Fsquad\u002Fblob\u002Fdev\u002Ftemplates\u002Fskills\u002Fsquad-conventions\u002FSKILL.md",[],[100,101,102,103,104,105,106,28,107,108],"conventions","squad","squad conventions","project-conventions","core","project","manual","codebase","patterns",{"skillNo":110,"name":111,"nameZh":6,"description":112,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":113,"categories":114,"keywords":115,"publishedAt":43},"01M719NAYM17B7X8MGP681EHKQ","rework-rate","Measure and interpret PR rework rate — the emerging 5th DORA metric","https:\u002F\u002Fgithub.com\u002FDeDuva\u002Fsquad\u002Fblob\u002Fdev\u002Ftemplates\u002Fskills\u002Frework-rate\u002FSKILL.md",[],[116,117,118,119,28,120,121,122,101,123,124,125,25,106,126,127,128,129,130,32],"rate","rework rate","health","analyze","review efficiency","quality","metric","metrics","efficiency","code quality","prs","when","code","team","code-review",{"skillNo":132,"name":133,"nameZh":6,"description":134,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":135,"categories":136,"keywords":137,"publishedAt":43},"01M719NA136PDC3SQ10R4R88TH","nap","Context hygiene — compress, prune, archive .squad\u002F state","https:\u002F\u002Fgithub.com\u002FDeDuva\u002Fsquad\u002Fblob\u002Fdev\u002Ftemplates\u002Fskills\u002Fnap\u002FSKILL.md",[],[133,138,139,140,141,142,143,144,101,145],"prune","state","maintenance","context hygiene","archive","hygiene","compress","context",{"skillNo":147,"name":148,"nameZh":6,"description":149,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":150,"categories":151,"keywords":154,"publishedAt":43},"01M719N7B4PBQPNXW78TEJY4HQ","e2e-template-testing","End-to-end validation of coordinator and agent template changes","https:\u002F\u002Fgithub.com\u002FDeDuva\u002Fsquad\u002Fblob\u002Fdev\u002Ftemplates\u002Fskills\u002Fe2e-template-testing\u002FSKILL.md",[152,153],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":78,"categoryName":79,"taxonomyType":20,"taxonomyTypeDesc":21},[39,155,156,157,158,159,160,106,161,28,162],"e2e template testing","e2e","template","end","coordinator","development","changes","validation"]