[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71FP6R2KAK5XMN7SNBVC9BP":3,"skill-same:01M71FP6R2KAK5XMN7SNBVC9BP":72},{"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":26,"publishedAt":47,"linkOnly":48,"markdownContent":49,"markdownBody":50,"frontMatter":51,"refName":52,"commitSha":53,"skillDirectory":54,"forksCount":14,"repositoryHtmlUrl":55,"repositoryHomepageUrl":6,"ownerHtmlUrl":56,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":57,"install":58,"resources":71},"01M71FP6R2KAK5XMN7SNBVC9BP","capture-playwright",null,"Use when a screenshot or short video needs to be captured with Playwright and saved to local disk, with optional upload through `gh image` (upload requires explicit user approval and must target a PR or issue).","andrwng\u002Fmiddleman","andrwng","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F20144987?v=4","01M71FP276MW7VYN5JK5HZM33F","Andrew Wong","01M71FP285TPFNHJGXGV0NC40Q",7,"MIT","https:\u002F\u002Fgithub.com\u002Fandrwng\u002Fmiddleman\u002Fblob\u002Fmain\u002Fskills\u002Fcapture-playwright\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体",[27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46],"playwright","capture","capture playwright","screenshot","issue","gh image","short video","with","saved","disk","upload","image","when","use","gh","local","short","pr","target","Video","2026-11-10 10:12:30",false,"---\nname: capture-playwright\ndescription: Use when a screenshot or short video needs to be captured with Playwright and saved to local disk, with optional upload through `gh image` (upload requires explicit user approval and must target a PR or issue).\n---\n\n# capture-playwright\n\nGenerate the artifact with Playwright and save it to local disk. **Do not upload by default.**\n\n## Upload Policy\n\n- **Never upload screenshots or videos that are not attached to a specific PR or issue.** Standalone uploads with no PR\u002Fissue target are forbidden.\n- **Default is local-only.** Always save artifacts to disk first. Treat that as the finished output unless the user explicitly asks for an upload.\n- **Before uploading any image or video, prompt the user for confirmation.** Ask the user to approve the upload, stating the file path and the target PR\u002Fissue. No exceptions — even if the workflow calls for it, ask first.\n- **NEVER UPLOAD AN IMAGE THAT WAS GENERATED BY POINTING AT A LIVE PREEXISTING middleman APP** This poses risks to leak sensitive information via screenshot\n\nReference session: `http:\u002F\u002F127.0.0.1:8080\u002Fsessions\u002Fopencode%3Ases_2826059aeffeEtdyCVsVwnKi6R`\n\n## Workflow\n\n1. Prefer the repo's existing Playwright config and startup flow. Only add a temporary script or spec if no existing path can capture the state; delete temporary capture code afterward.\n2. Save artifacts under a temp path like `tmp\u002F` or `artifacts\u002F` unless the user explicitly wants them committed.\n3. For screenshots, use Playwright directly:\n\n```js\nawait page.screenshot({ path: \"tmp\u002Fcapture.png\", fullPage: true });\n```\n\n4. For video, create a recording context, close it, then resolve the generated file:\n\n```js\nconst context = await browser.newContext({\n  recordVideo: { dir: \"tmp\u002Fvideo\", size: { width: 1440, height: 900 } },\n});\nconst page = await context.newPage();\n\u002F\u002F ... drive the page ...\nawait context.close();\nconst videoPath = await page.video()?.path();\n```\n\n5. **Stop here by default.** Report the local artifact path to the user and open the image \u002F video using `open` or `xdg-open` so that user can see the image.  Only proceed to upload if the user explicitly requests it.\n\n6. **If the user approves upload**, confirm the target PR or issue number first. Never upload without attaching to a specific PR or issue. Upload the file with `gh image` (the command prints a markdown snippet whose links already point at the uploaded content), then immediately attach it to the PR or issue via a comment — `gh image` alone does not bind the upload to any target:\n\n```bash\n# Upload and capture the markdown link\nIMAGE_MD=$(gh image --repo owner\u002Frepo \"tmp\u002Fcapture.png\")\n\n# Attach to a PR or issue so the image is not a standalone upload\ngh pr comment \u003Cnumber> --repo owner\u002Frepo --body \"$IMAGE_MD\"\n# or for issues:\ngh issue comment \u003Cnumber> --repo owner\u002Frepo --body \"$IMAGE_MD\"\n```\n\n**`gh image --repo owner\u002Frepo \u003Cfile>` alone is insufficient** — it uploads without binding to a PR or issue. Always follow up with a comment command to attach.\n\nFor screenshots, the emitted markdown can usually be pasted as-is.\n\nFor videos, `gh image` may still emit image-style markdown like `![demo.webm](...)`. GitHub PR descriptions and comments do not reliably inline `.webm` attachments from that syntax, so normalize it to a plain link such as `[demo.webm](...)` or `Video: https:\u002F\u002F...` before pasting into a PR description or comment.\n\nIf video upload is rejected, keep the local video file, say that `gh image` appears image-only in this environment, and ask whether a screenshot link or a different upload path is preferred.\n\n## Extension Setup\n\nCheck whether the extension is available:\n\n```bash\ngh image --help\n```\n\nIf it is missing, install the extension used in the reference session:\n\n```bash\ngh extension install drogers0\u002Fgh-image\n```\n\n## Cookie Failure Mode\n\nThe reference session established that `gh image` may depend on GitHub web-upload cookies from a local browser profile. If errors mention cookies, browser profiles, `Local State`, `Cookies`, Chrome, Brave, Edge, or Chromium, do not assume `gh auth login` is enough.\n\nTell the user to sign in to GitHub in Chrome, Brave, Edge, or Chromium on that machine, then rerun `gh image`.\n\n## Output\n\nReturn:\n- the local artifact path (always)\n- if uploaded: the markdown link(s) printed by `gh image` and the target PR\u002Fissue\n- for video uploads, the normalized plain-link form to paste into a PR description or comment\n- a brief note if video upload had to fall back to screenshots or another path\n","# capture-playwright\n\nGenerate the artifact with Playwright and save it to local disk. **Do not upload by default.**\n\n## Upload Policy\n\n- **Never upload screenshots or videos that are not attached to a specific PR or issue.** Standalone uploads with no PR\u002Fissue target are forbidden.\n- **Default is local-only.** Always save artifacts to disk first. Treat that as the finished output unless the user explicitly asks for an upload.\n- **Before uploading any image or video, prompt the user for confirmation.** Ask the user to approve the upload, stating the file path and the target PR\u002Fissue. No exceptions — even if the workflow calls for it, ask first.\n- **NEVER UPLOAD AN IMAGE THAT WAS GENERATED BY POINTING AT A LIVE PREEXISTING middleman APP** This poses risks to leak sensitive information via screenshot\n\nReference session: `http:\u002F\u002F127.0.0.1:8080\u002Fsessions\u002Fopencode%3Ases_2826059aeffeEtdyCVsVwnKi6R`\n\n## Workflow\n\n1. Prefer the repo's existing Playwright config and startup flow. Only add a temporary script or spec if no existing path can capture the state; delete temporary capture code afterward.\n2. Save artifacts under a temp path like `tmp\u002F` or `artifacts\u002F` unless the user explicitly wants them committed.\n3. For screenshots, use Playwright directly:\n\n```js\nawait page.screenshot({ path: \"tmp\u002Fcapture.png\", fullPage: true });\n```\n\n4. For video, create a recording context, close it, then resolve the generated file:\n\n```js\nconst context = await browser.newContext({\n  recordVideo: { dir: \"tmp\u002Fvideo\", size: { width: 1440, height: 900 } },\n});\nconst page = await context.newPage();\n\u002F\u002F ... drive the page ...\nawait context.close();\nconst videoPath = await page.video()?.path();\n```\n\n5. **Stop here by default.** Report the local artifact path to the user and open the image \u002F video using `open` or `xdg-open` so that user can see the image.  Only proceed to upload if the user explicitly requests it.\n\n6. **If the user approves upload**, confirm the target PR or issue number first. Never upload without attaching to a specific PR or issue. Upload the file with `gh image` (the command prints a markdown snippet whose links already point at the uploaded content), then immediately attach it to the PR or issue via a comment — `gh image` alone does not bind the upload to any target:\n\n```bash\n# Upload and capture the markdown link\nIMAGE_MD=$(gh image --repo owner\u002Frepo \"tmp\u002Fcapture.png\")\n\n# Attach to a PR or issue so the image is not a standalone upload\ngh pr comment \u003Cnumber> --repo owner\u002Frepo --body \"$IMAGE_MD\"\n# or for issues:\ngh issue comment \u003Cnumber> --repo owner\u002Frepo --body \"$IMAGE_MD\"\n```\n\n**`gh image --repo owner\u002Frepo \u003Cfile>` alone is insufficient** — it uploads without binding to a PR or issue. Always follow up with a comment command to attach.\n\nFor screenshots, the emitted markdown can usually be pasted as-is.\n\nFor videos, `gh image` may still emit image-style markdown like `![demo.webm](...)`. GitHub PR descriptions and comments do not reliably inline `.webm` attachments from that syntax, so normalize it to a plain link such as `[demo.webm](...)` or `Video: https:\u002F\u002F...` before pasting into a PR description or comment.\n\nIf video upload is rejected, keep the local video file, say that `gh image` appears image-only in this environment, and ask whether a screenshot link or a different upload path is preferred.\n\n## Extension Setup\n\nCheck whether the extension is available:\n\n```bash\ngh image --help\n```\n\nIf it is missing, install the extension used in the reference session:\n\n```bash\ngh extension install drogers0\u002Fgh-image\n```\n\n## Cookie Failure Mode\n\nThe reference session established that `gh image` may depend on GitHub web-upload cookies from a local browser profile. If errors mention cookies, browser profiles, `Local State`, `Cookies`, Chrome, Brave, Edge, or Chromium, do not assume `gh auth login` is enough.\n\nTell the user to sign in to GitHub in Chrome, Brave, Edge, or Chromium on that machine, then rerun `gh image`.\n\n## Output\n\nReturn:\n- the local artifact path (always)\n- if uploaded: the markdown link(s) printed by `gh image` and the target PR\u002Fissue\n- for video uploads, the normalized plain-link form to paste into a PR description or comment\n- a brief note if video upload had to fall back to screenshots or another path\n",{"name":5,"description":7},"main","dae602bfabf59e40e103420f12b5dbf3ded3240a","skills\u002Fcapture-playwright","https:\u002F\u002Fgithub.com\u002Fandrwng\u002Fmiddleman","https:\u002F\u002Fgithub.com\u002Fandrwng","2026-10-23 15:24:48",{"source":8,"skillName":5,"commands":59,"prompt":69,"zipAvailable":70},[60,63,66],{"tool":61,"command":62},"npx","npx skills add andrwng\u002Fmiddleman --skill capture-playwright",{"tool":64,"command":65},"bunx","bunx skills add andrwng\u002Fmiddleman --skill capture-playwright",{"tool":67,"command":68},"pnpm","pnpm dlx skills add andrwng\u002Fmiddleman --skill capture-playwright","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fandrwng\u002Fmiddleman\u002Fblob\u002Fmain\u002Fskills\u002Fcapture-playwright\u002FSKILL.md",true,[],[73,79],{"skillNo":74,"name":5,"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":75,"categories":76,"keywords":78,"publishedAt":47},"01M71FP544YPT9PGKA42B9N4YY","https:\u002F\u002Fgithub.com\u002Fandrwng\u002Fmiddleman\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fcapture-playwright\u002FSKILL.md",[77],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[27,28,29],{"skillNo":80,"name":5,"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":81,"categories":82,"keywords":84,"publishedAt":47},"01M71FP45K56GETFRSJFA0RZNQ","https:\u002F\u002Fgithub.com\u002Fandrwng\u002Fmiddleman\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fcapture-playwright\u002FSKILL.md",[83],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[27,28,29]]