[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6R7DBWR1E6TWRSTDMF21DPW":3,"skill-same:01M6R7DBWR1E6TWRSTDMF21DPW":70},{"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":13,"repositoryHtmlUrl":53,"repositoryHomepageUrl":6,"ownerHtmlUrl":54,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":55,"install":56,"resources":69},"01M6R7DBWR1E6TWRSTDMF21DPW","pr-screenshots",null,"Capture Playwright screenshots and embed them in GitHub PR descriptions","barichter\u002Fsquad","barichter","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F96797186?v=4","01M6R712K8ESMDF089BFENBR16","01M6R712R74BSQQSG2GTXBWR8P",0,"MIT","https:\u002F\u002Fgithub.com\u002Fbarichter\u002Fsquad\u002Fblob\u002Fdev\u002Fpackages\u002Fsquad-cli\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],"screenshots","pr","pr screenshots","for","testing","high","typedoc","requests","visual-review","embed","visual","pattern","github pr","api","pull","pull-requests","sessions","playwright","github","review","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","ec19f5e92325e634e3c6eff500e3cefa56131cc9","packages\u002Fsquad-cli\u002Ftemplates\u002Fskills\u002Fpr-screenshots","https:\u002F\u002Fgithub.com\u002Fbarichter\u002Fsquad","https:\u002F\u002Fgithub.com\u002Fbarichter","2026-04-13 22:53:46",{"source":8,"skillName":5,"commands":57,"prompt":67,"zipAvailable":68},[58,61,64],{"tool":59,"command":60},"npx","npx skills add barichter\u002Fsquad --skill pr-screenshots",{"tool":62,"command":63},"bunx","bunx skills add barichter\u002Fsquad --skill pr-screenshots",{"tool":65,"command":66},"pnpm","pnpm dlx skills add barichter\u002Fsquad --skill pr-screenshots","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fbarichter\u002Fsquad\u002Fblob\u002Fdev\u002Fpackages\u002Fsquad-cli\u002Ftemplates\u002Fskills\u002Fpr-screenshots\u002FSKILL.md",true,[],[71,84,92,108,129,135],{"skillNo":72,"name":73,"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":74,"categories":75,"keywords":79,"publishedAt":43},"01M6R7VE8SZD1E37WWJN4ZFPWB","My Skill","https:\u002F\u002Fgithub.com\u002Fbarichter\u002Fsquad\u002Fblob\u002Fdev\u002Ftest-fixtures\u002Fskills-test-abb30454\u002Fmy-skill\u002FSKILL.md",[76],{"categoryNo":77,"categoryName":78,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[80,81,82,83,27],"my","my skill","tester","vitest",{"skillNo":85,"name":86,"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":87,"categories":88,"keywords":89,"publishedAt":43},"01M6R7VD19M4TMAA74XGD6QSZX","bad-skill","https:\u002F\u002Fgithub.com\u002Fbarichter\u002Fsquad\u002Fblob\u002Fdev\u002Ftest-fixtures\u002Fskills-test-abb30454\u002Fbad-skill\u002FSKILL.md",[],[90,91],"bad skill","bad",{"skillNo":93,"name":94,"nameZh":6,"description":95,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":96,"categories":97,"keywords":98,"publishedAt":43},"01M6R7V9TYTX6Z621V6RWA51G6","squad-conventions","Core conventions and patterns used in the Squad codebase","https:\u002F\u002Fgithub.com\u002Fbarichter\u002Fsquad\u002Fblob\u002Fdev\u002Ftemplates\u002Fskills\u002Fsquad-conventions\u002FSKILL.md",[],[99,100,101,102,103,104,105,106,28,107],"squad conventions","squad","conventions","project-conventions","core","patterns","project","manual","codebase",{"skillNo":109,"name":110,"nameZh":6,"description":111,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":112,"categories":113,"keywords":114,"publishedAt":43},"01M6R7TTF0ABMGSVWASVYF6D51","rework-rate","Measure and interpret PR rework rate — the emerging 5th DORA metric","https:\u002F\u002Fgithub.com\u002Fbarichter\u002Fsquad\u002Fblob\u002Fdev\u002Ftemplates\u002Fskills\u002Frework-rate\u002FSKILL.md",[],[115,116,117,118,119,120,24,42,121,28,100,122,123,124,125,126,127,128,106],"rate","rework rate","metric","efficiency","prs","when","code quality","code","code-review","metrics","health","team","analyze","quality",{"skillNo":130,"name":131,"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":132,"categories":133,"keywords":134,"publishedAt":43},"01M6R7TRZPET44JRCSQF08EEA8","nap","https:\u002F\u002Fgithub.com\u002Fbarichter\u002Fsquad\u002Fblob\u002Fdev\u002Ftemplates\u002Fskills\u002Fnap\u002FSKILL.md",[],[131],{"skillNo":136,"name":137,"nameZh":6,"description":138,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":139,"categories":140,"keywords":142,"publishedAt":43},"01M6R7TK10WCT77A52E27GR5R3","{skill-name}","{what this skill teaches agents}","https:\u002F\u002Fgithub.com\u002Fbarichter\u002Fsquad\u002Fblob\u002Fdev\u002Ftemplates\u002Fskill.md",[141],{"categoryNo":77,"categoryName":78,"taxonomyType":20,"taxonomyTypeDesc":21},[143,144,145,146,36,147,148,149,150,151,106,28,27],"{skill name}","skill name","name","design","how","error-handling","learned","error","api-design"]