[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71EV267VEW213H2YGBRF950":3,"skill-same:01M71EV267VEW213H2YGBRF950":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":23,"publishedAt":44,"linkOnly":45,"markdownContent":46,"markdownBody":47,"frontMatter":48,"refName":50,"commitSha":51,"skillDirectory":52,"forksCount":53,"repositoryHtmlUrl":54,"repositoryHomepageUrl":6,"ownerHtmlUrl":55,"ownerBlogUrl":6,"ownerDescription":56,"updatedAt":57,"install":58,"resources":71},"01M71EV267VEW213H2YGBRF950","feature-video",null,"Record a video walkthrough of a feature and add it to the PR description. Use when a PR needs a visual demo for reviewers, when the user asks to demo a feature, create a PR video, record a walkthrough, show what changed visually, or add a video to a pull request.","shyamsridhar123\u002Fkevin-copilot","shyamsridhar123","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F117464342?v=4","01M71ESN8NA3Z6Z47CJS9WBT0B","Shyam Sridhar","01M71ESNA9HE4YA6ZZSCNYCGJR",8,"MIT","https:\u002F\u002Fgithub.com\u002Fshyamsridhar123\u002Fkevin-copilot\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Ffeature-video\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43],"feature","feature video","Video","visual","use","pr description","for","pr","pull","mp4","path","add","request","create","URL","number","when","default","walkthrough","show","2026-11-10 10:12:30",false,"---\nname: feature-video\ndescription: Record a video walkthrough of a feature and add it to the PR description. Use when a PR needs a visual demo for reviewers, when the user asks to demo a feature, create a PR video, record a walkthrough, show what changed visually, or add a video to a pull request.\nargument-hint: \"[PR number or 'current' or path\u002Fto\u002Fvideo.mp4] [optional: base URL, default localhost:3000]\"\n---\n\n# Feature Video Walkthrough\n\nRecord browser interactions demonstrating a feature, stitch screenshots into an MP4 video, upload natively to GitHub, and embed in the PR description as an inline video player.\n\n## Prerequisites\n\n- Local development server running (e.g., `bin\u002Fdev`, `npm run dev`, `rails server`)\n- `agent-browser` CLI installed (load the `agent-browser` skill for details)\n- `ffmpeg` installed (for video conversion)\n- `gh` CLI authenticated with push access to the repo\n- Git repository on a feature branch (PR optional -- skill can create a draft or record-only)\n- One-time GitHub browser auth (see Step 6 auth check)\n\n## Main Tasks\n\n### 1. Parse Arguments & Resolve PR\n\n**Arguments:** $ARGUMENTS\n\nParse the input:\n- First argument: PR number, \"current\" (defaults to current branch's PR), or path to an existing `.mp4` file (upload-only resume mode)\n- Second argument: Base URL (defaults to `http:\u002F\u002Flocalhost-3000`)\n\n**Upload-only resume:** If the first argument ends in `.mp4` and the file exists, skip Steps 2-5 and proceed directly to Step 6 using that file. Resolve the PR number from the current branch (`gh pr view --json number -q '.number'`).\n\nIf an explicit PR number was provided, verify it exists and use it directly:\n\n```bash\ngh pr view [number] --json number -q '.number'\n```\n\nIf no explicit PR number was provided (or \"current\" was specified), check if a PR exists for the current branch:\n\n```bash\ngh pr view --json number -q '.number'\n```\n\nIf no PR exists for the current branch, ask the user how to proceed. **Use the platform's blocking question tool** (`AskUserQuestion` in Claude Code, `request_user_input` in Codex, `ask_user` in Gemini):\n\n```\nNo PR found for the current branch.\n\n1. Create a draft PR now and continue (recommended)\n2. Record video only -- save locally and upload later when a PR exists\n3. Cancel\n```\n\nIf option 1: create a draft PR with a placeholder title derived from the branch name, then continue with the new PR number:\n\n```bash\ngh pr create --draft --title \"[branch-name-humanized]\" --body \"Draft PR for video walkthrough\"\n```\n\nIf option 2: set `RECORD_ONLY=true`. Proceed through Steps 2-5 (record and encode), skip Steps 6-7 (upload and PR update), and report the local video path and `[RUN_ID]` at the end.\n\n**Upload-only resume:** To upload a previously recorded video, pass an existing video file path as the first argument (e.g., `\u002Ffeature-video .context\u002Fcompound-engineering\u002Ffeature-video\u002F1711234567\u002Fvideos\u002Ffeature-demo.mp4`). When the first argument is a path to an `.mp4` file, skip Steps 2-5 and proceed directly to Step 6 using that file for upload.\n\n### 1b. Verify Required Tools\n\nBefore proceeding, check that required CLI tools are installed. Fail early with a clear message rather than failing mid-workflow after screenshots have been recorded:\n\n```bash\ncommand -v ffmpeg\n```\n\n```bash\ncommand -v agent-browser\n```\n\n```bash\ncommand -v gh\n```\n\nIf any tool is missing, stop and report which tools need to be installed:\n- `ffmpeg`: `brew install ffmpeg` (macOS) or equivalent\n- `agent-browser`: load the `agent-browser` skill for installation instructions\n- `gh`: `brew install gh` (macOS) or see https:\u002F\u002Fcli.github.com\n\nDo not proceed to Step 2 until all tools are available.\n\n### 2. Gather Feature Context\n\n**If a PR is available**, get PR details and changed files:\n\n```bash\ngh pr view [number] --json title,body,files,headRefName -q '.'\n```\n\n```bash\ngh pr view [number] --json files -q '.files[].path'\n```\n\n**If in record-only mode (no PR)**, detect the default branch and derive context from the branch diff. Run both commands in a single block so the variable persists:\n\n```bash\nDEFAULT_BRANCH=$(gh repo view --json defaultBranchRef -q '.defaultBranchRef.name') && git diff --name-only \"$DEFAULT_BRANCH\"...HEAD && git log --oneline \"$DEFAULT_BRANCH\"...HEAD\n```\n\nMap changed files to routes\u002Fpages that should be demonstrated. Examine the project's routing configuration (e.g., `routes.rb`, `next.config.js`, `app\u002F` directory structure) to determine which URLs correspond to the changed files.\n\n### 3. Plan the Video Flow\n\nBefore recording, create a shot list:\n\n1. **Opening shot**: Homepage or starting point (2-3 seconds)\n2. **Navigation**: How user gets to the feature\n3. **Feature demonstration**: Core functionality (main focus)\n4. **Edge cases**: Error states, validation, etc. (if applicable)\n5. **Success state**: Completed action\u002Fresult\n\nPresent the proposed flow to the user for confirmation before recording.\n\n**Use the platform's blocking question tool when available** (`AskUserQuestion` in Claude Code, `request_user_input` in Codex, `ask_user` in Gemini). Otherwise, present numbered options and wait for the user's reply before proceeding:\n\n```\nProposed Video Flow for PR #[number]: [title]\n\n1. Start at: \u002F[starting-route]\n2. Navigate to: \u002F[feature-route]\n3. Demonstrate:\n   - [Action 1]\n   - [Action 2]\n   - [Action 3]\n4. Show result: [success state]\n\nEstimated duration: ~[X] seconds\n\n1. Start recording\n2. Modify the flow (describe changes)\n3. Add specific interactions to demonstrate\n```\n\n### 4. Record the Walkthrough\n\nGenerate a unique run ID (e.g., timestamp) and create per-run output directories. This prevents stale screenshots from prior runs being spliced into the new video.\n\n**Important:** Shell variables do not persist across separate code blocks. After generating the run ID, substitute the concrete value into all subsequent commands in this workflow. For example, if the timestamp is `1711234567`, use that literal value in all paths below -- do not rely on `[RUN_ID]` expanding in later blocks.\n\n```bash\ndate +%s\n```\n\nUse the output as RUN_ID. Create the directories with the concrete value:\n\n```bash\nmkdir -p .context\u002Fcompound-engineering\u002Ffeature-video\u002F[RUN_ID]\u002Fscreenshots\nmkdir -p .context\u002Fcompound-engineering\u002Ffeature-video\u002F[RUN_ID]\u002Fvideos\n```\n\nExecute the planned flow, capturing each step with agent-browser. Number screenshots sequentially for correct frame ordering:\n\n```bash\nagent-browser open \"[base-url]\u002F[start-route]\"\nagent-browser wait 2000\nagent-browser screenshot .context\u002Fcompound-engineering\u002Ffeature-video\u002F[RUN_ID]\u002Fscreenshots\u002F01-start.png\n```\n\n```bash\nagent-browser snapshot -i\nagent-browser click @e1\nagent-browser wait 1000\nagent-browser screenshot .context\u002Fcompound-engineering\u002Ffeature-video\u002F[RUN_ID]\u002Fscreenshots\u002F02-navigate.png\n```\n\n```bash\nagent-browser snapshot -i\nagent-browser click @e2\nagent-browser wait 1000\nagent-browser screenshot .context\u002Fcompound-engineering\u002Ffeature-video\u002F[RUN_ID]\u002Fscreenshots\u002F03-feature.png\n```\n\n```bash\nagent-browser wait 2000\nagent-browser screenshot .context\u002Fcompound-engineering\u002Ffeature-video\u002F[RUN_ID]\u002Fscreenshots\u002F04-result.png\n```\n\n### 5. Create Video\n\nStitch screenshots into an MP4 using the same `[RUN_ID]` from Step 4:\n\n```bash\nffmpeg -y -framerate 0.5 -pattern_type glob -i \".context\u002Fcompound-engineering\u002Ffeature-video\u002F[RUN_ID]\u002Fscreenshots\u002F*.png\" \\\n  -c:v libx264 -pix_fmt yuv420p -vf \"scale=1280:-2\" \\\n  \".context\u002Fcompound-engineering\u002Ffeature-video\u002F[RUN_ID]\u002Fvideos\u002Ffeature-demo.mp4\"\n```\n\nNotes:\n- `-framerate 0.5` = 2 seconds per frame. Adjust for faster\u002Fslower playback.\n- `-2` in scale ensures height is divisible by 2 (required for H.264).\n\n### 6. Authenticate & Upload to GitHub\n\nUpload produces a `user-attachments\u002Fassets\u002F` URL that GitHub renders as a native inline video player -- the same result as pasting a video into the PR editor manually.\n\nThe approach: close any existing agent-browser session, start a Chrome-engine session with saved GitHub auth, navigate to the PR page, set the video file on the comment form's hidden file input, wait for GitHub to process the upload, extract the resulting URL, then clear the textarea without submitting.\n\n#### Check for existing session\n\nFirst, check if a saved GitHub session already exists:\n\n```bash\nagent-browser close\nagent-browser --engine chrome --session-name github open https:\u002F\u002Fgithub.com\u002Fsettings\u002Fprofile\nagent-browser get title\n```\n\nIf the page title contains the user's GitHub username or \"Profile\", the session is still valid -- skip to \"Upload the video\" below. If it redirects to the login page, the session has expired or was never created -- proceed to \"Auth setup\".\n\n#### Auth setup (one-time)\n\nEstablish an authenticated GitHub session. This only needs to happen once -- session cookies persist across runs via the `--session-name` flag.\n\nClose the current session and open the GitHub login page in a headed Chrome window:\n\n```bash\nagent-browser close\nagent-browser --engine chrome --headed --session-name github open https:\u002F\u002Fgithub.com\u002Flogin\n```\n\nThe user must log in manually in the browser window (handles 2FA, SSO, OAuth -- any login method). **Use the platform's blocking question tool** (`AskUserQuestion` in Claude Code, `request_user_input` in Codex, `ask_user` in Gemini). Otherwise, present the message and wait for the user's reply before proceeding:\n\n```\nGitHub login required for video upload.\n\nA Chrome window has opened to github.com\u002Flogin. Please log in manually\n(this handles 2FA\u002FSSO\u002FOAuth automatically). Reply when done.\n```\n\nAfter login, verify the session works:\n\n```bash\nagent-browser open https:\u002F\u002Fgithub.com\u002Fsettings\u002Fprofile\n```\n\nIf the profile page loads, auth is confirmed. The `github` session is now saved and reusable.\n\n#### Upload the video\n\nNavigate to the PR page and scroll to the comment form:\n\n```bash\nagent-browser open \"https:\u002F\u002Fgithub.com\u002F[owner]\u002F[repo]\u002Fpull\u002F[number]\"\nagent-browser scroll down 5000\n```\n\nSave any existing textarea content before uploading (the comment box may contain an unsent draft):\n\n```bash\nagent-browser eval \"document.getElementById('new_comment_field').value\"\n```\n\nStore this value as `SAVED_TEXTAREA`. If non-empty, it will be restored after extracting the upload URL.\n\nUpload the video via the hidden file input. Use the caller-provided `.mp4` path if in upload-only resume mode, otherwise use the current run's encoded video:\n\n```bash\nagent-browser upload '#fc-new_comment_field' [VIDEO_FILE_PATH]\n```\n\nWhere `[VIDEO_FILE_PATH]` is either:\n- The `.mp4` path passed as the first argument (upload-only resume mode)\n- `.context\u002Fcompound-engineering\u002Ffeature-video\u002F[RUN_ID]\u002Fvideos\u002Ffeature-demo.mp4` (normal recording flow)\n\nWait for GitHub to process the upload (typically 3-5 seconds), then read the textarea value:\n\n```bash\nagent-browser wait 5000\nagent-browser eval \"document.getElementById('new_comment_field').value\"\n```\n\n**Validate the extracted URL.** The value must contain `user-attachments\u002Fassets\u002F` to confirm a successful native upload. If the textarea is empty, contains only placeholder text, or the URL does not match, do not proceed to Step 7. Instead:\n\n1. Check `agent-browser get url` -- if it shows `github.com\u002Flogin`, the session expired. Re-run auth setup.\n2. If still on the PR page, wait an additional 5 seconds and re-read the textarea (GitHub processing can be slow).\n3. If validation still fails after retry, report the failure and the local video path so the user can upload manually.\n\nRestore the original textarea content (or clear if it was empty). A JSON-encoded string is also a valid JavaScript string literal, so assign it directly without `JSON.parse`:\n\n```bash\nagent-browser eval \"const ta = document.getElementById('new_comment_field'); ta.value = [SAVED_TEXTAREA_AS_JS_STRING]; ta.dispatchEvent(new Event('input', { bubbles: true }))\"\n```\n\nTo prepare the value: take the SAVED_TEXTAREA string and produce a JS string literal from it -- escape backslashes, double quotes, and newlines (e.g., `\"text with \\\"quotes\\\" and\\nnewlines\"`). If SAVED_TEXTAREA was empty, use `\"\"`. The result is embedded directly as the right-hand side of the assignment -- no `JSON.parse` call needed.\n\n### 7. Update PR Description\n\nGet the current PR body:\n\n```bash\ngh pr view [number] --json body -q '.body'\n```\n\nAppend a Demo section (or replace an existing one). The video URL renders as an inline player when placed on its own line:\n\n```markdown\n## Demo\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F[uuid]\n\n*Automated video walkthrough*\n```\n\nUpdate the PR:\n\n```bash\ngh pr edit [number] --body \"[updated body with demo section]\"\n```\n\n### 8. Cleanup\n\nAsk the user before removing temporary files. If confirmed, clean up only the current run's scratch directory (other runs may still be in progress or awaiting upload).\n\n**If the video was successfully uploaded**, remove the entire run directory:\n\n```bash\nrm -r .context\u002Fcompound-engineering\u002Ffeature-video\u002F[RUN_ID]\n```\n\n**If in record-only mode or upload failed**, remove only the screenshots but preserve the video so the user can upload later:\n\n```bash\nrm -r .context\u002Fcompound-engineering\u002Ffeature-video\u002F[RUN_ID]\u002Fscreenshots\n```\n\nPresent a completion summary:\n\n```\nFeature Video Complete\n\nPR: #[number] - [title]\nVideo: [VIDEO_URL]\n\nShots captured:\n1. [description]\n2. [description]\n3. [description]\n4. [description]\n\nPR description updated with demo section.\n```\n\n## Usage Examples\n\n```bash\n# Record video for current branch's PR\n\u002Ffeature-video\n\n# Record video for specific PR\n\u002Ffeature-video 847\n\n# Record with custom base URL\n\u002Ffeature-video 847 http:\u002F\u002Flocalhost-5000\n\n# Record for staging environment\n\u002Ffeature-video current https:\u002F\u002Fstaging.example.com\n```\n\n## Tips\n\n- Keep it short: 10-30 seconds is ideal for PR demos\n- Focus on the change: don't include unrelated UI\n- Show before\u002Fafter: if fixing a bug, show the broken state first (if possible)\n- The `--session-name github` session expires when GitHub invalidates the cookies (typically weeks). If upload fails with a login redirect, re-run the auth setup.\n- GitHub DOM selectors (`#fc-new_comment_field`, `#new_comment_field`) may change if GitHub updates its UI. If the upload silently fails, inspect the PR page for updated selectors.\n\n## Troubleshooting\n\n| Symptom | Cause | Fix |\n|---|---|---|\n| `ffmpeg: command not found` | ffmpeg not installed | Install via `brew install ffmpeg` (macOS) or equivalent |\n| `agent-browser: command not found` | agent-browser not installed | Load the `agent-browser` skill for installation instructions |\n| Textarea empty after upload wait | Session expired, or GitHub processing slow | Check session validity (Step 6 auth check). If valid, increase wait time and retry. |\n| Textarea empty, URL is `github.com\u002Flogin` | Session expired | Re-run auth setup (Step 6) |\n| `gh pr view` fails | No PR for current branch | Step 1 handles this -- choose to create a draft PR or record-only mode |\n| Video file too large for upload | Exceeds GitHub's 10MB (free) or 100MB (paid) limit | Re-encode: lower framerate (`-framerate 0.33`), reduce resolution (`scale=960:-2`), or increase CRF (`-crf 28`) |\n| Upload URL does not contain `user-attachments\u002Fassets\u002F` | Wrong upload method or GitHub change | Verify the file input selector is still correct by inspecting the PR page |\n","# Feature Video Walkthrough\n\nRecord browser interactions demonstrating a feature, stitch screenshots into an MP4 video, upload natively to GitHub, and embed in the PR description as an inline video player.\n\n## Prerequisites\n\n- Local development server running (e.g., `bin\u002Fdev`, `npm run dev`, `rails server`)\n- `agent-browser` CLI installed (load the `agent-browser` skill for details)\n- `ffmpeg` installed (for video conversion)\n- `gh` CLI authenticated with push access to the repo\n- Git repository on a feature branch (PR optional -- skill can create a draft or record-only)\n- One-time GitHub browser auth (see Step 6 auth check)\n\n## Main Tasks\n\n### 1. Parse Arguments & Resolve PR\n\n**Arguments:** $ARGUMENTS\n\nParse the input:\n- First argument: PR number, \"current\" (defaults to current branch's PR), or path to an existing `.mp4` file (upload-only resume mode)\n- Second argument: Base URL (defaults to `http:\u002F\u002Flocalhost-3000`)\n\n**Upload-only resume:** If the first argument ends in `.mp4` and the file exists, skip Steps 2-5 and proceed directly to Step 6 using that file. Resolve the PR number from the current branch (`gh pr view --json number -q '.number'`).\n\nIf an explicit PR number was provided, verify it exists and use it directly:\n\n```bash\ngh pr view [number] --json number -q '.number'\n```\n\nIf no explicit PR number was provided (or \"current\" was specified), check if a PR exists for the current branch:\n\n```bash\ngh pr view --json number -q '.number'\n```\n\nIf no PR exists for the current branch, ask the user how to proceed. **Use the platform's blocking question tool** (`AskUserQuestion` in Claude Code, `request_user_input` in Codex, `ask_user` in Gemini):\n\n```\nNo PR found for the current branch.\n\n1. Create a draft PR now and continue (recommended)\n2. Record video only -- save locally and upload later when a PR exists\n3. Cancel\n```\n\nIf option 1: create a draft PR with a placeholder title derived from the branch name, then continue with the new PR number:\n\n```bash\ngh pr create --draft --title \"[branch-name-humanized]\" --body \"Draft PR for video walkthrough\"\n```\n\nIf option 2: set `RECORD_ONLY=true`. Proceed through Steps 2-5 (record and encode), skip Steps 6-7 (upload and PR update), and report the local video path and `[RUN_ID]` at the end.\n\n**Upload-only resume:** To upload a previously recorded video, pass an existing video file path as the first argument (e.g., `\u002Ffeature-video .context\u002Fcompound-engineering\u002Ffeature-video\u002F1711234567\u002Fvideos\u002Ffeature-demo.mp4`). When the first argument is a path to an `.mp4` file, skip Steps 2-5 and proceed directly to Step 6 using that file for upload.\n\n### 1b. Verify Required Tools\n\nBefore proceeding, check that required CLI tools are installed. Fail early with a clear message rather than failing mid-workflow after screenshots have been recorded:\n\n```bash\ncommand -v ffmpeg\n```\n\n```bash\ncommand -v agent-browser\n```\n\n```bash\ncommand -v gh\n```\n\nIf any tool is missing, stop and report which tools need to be installed:\n- `ffmpeg`: `brew install ffmpeg` (macOS) or equivalent\n- `agent-browser`: load the `agent-browser` skill for installation instructions\n- `gh`: `brew install gh` (macOS) or see https:\u002F\u002Fcli.github.com\n\nDo not proceed to Step 2 until all tools are available.\n\n### 2. Gather Feature Context\n\n**If a PR is available**, get PR details and changed files:\n\n```bash\ngh pr view [number] --json title,body,files,headRefName -q '.'\n```\n\n```bash\ngh pr view [number] --json files -q '.files[].path'\n```\n\n**If in record-only mode (no PR)**, detect the default branch and derive context from the branch diff. Run both commands in a single block so the variable persists:\n\n```bash\nDEFAULT_BRANCH=$(gh repo view --json defaultBranchRef -q '.defaultBranchRef.name') && git diff --name-only \"$DEFAULT_BRANCH\"...HEAD && git log --oneline \"$DEFAULT_BRANCH\"...HEAD\n```\n\nMap changed files to routes\u002Fpages that should be demonstrated. Examine the project's routing configuration (e.g., `routes.rb`, `next.config.js`, `app\u002F` directory structure) to determine which URLs correspond to the changed files.\n\n### 3. Plan the Video Flow\n\nBefore recording, create a shot list:\n\n1. **Opening shot**: Homepage or starting point (2-3 seconds)\n2. **Navigation**: How user gets to the feature\n3. **Feature demonstration**: Core functionality (main focus)\n4. **Edge cases**: Error states, validation, etc. (if applicable)\n5. **Success state**: Completed action\u002Fresult\n\nPresent the proposed flow to the user for confirmation before recording.\n\n**Use the platform's blocking question tool when available** (`AskUserQuestion` in Claude Code, `request_user_input` in Codex, `ask_user` in Gemini). Otherwise, present numbered options and wait for the user's reply before proceeding:\n\n```\nProposed Video Flow for PR #[number]: [title]\n\n1. Start at: \u002F[starting-route]\n2. Navigate to: \u002F[feature-route]\n3. Demonstrate:\n   - [Action 1]\n   - [Action 2]\n   - [Action 3]\n4. Show result: [success state]\n\nEstimated duration: ~[X] seconds\n\n1. Start recording\n2. Modify the flow (describe changes)\n3. Add specific interactions to demonstrate\n```\n\n### 4. Record the Walkthrough\n\nGenerate a unique run ID (e.g., timestamp) and create per-run output directories. This prevents stale screenshots from prior runs being spliced into the new video.\n\n**Important:** Shell variables do not persist across separate code blocks. After generating the run ID, substitute the concrete value into all subsequent commands in this workflow. For example, if the timestamp is `1711234567`, use that literal value in all paths below -- do not rely on `[RUN_ID]` expanding in later blocks.\n\n```bash\ndate +%s\n```\n\nUse the output as RUN_ID. Create the directories with the concrete value:\n\n```bash\nmkdir -p .context\u002Fcompound-engineering\u002Ffeature-video\u002F[RUN_ID]\u002Fscreenshots\nmkdir -p .context\u002Fcompound-engineering\u002Ffeature-video\u002F[RUN_ID]\u002Fvideos\n```\n\nExecute the planned flow, capturing each step with agent-browser. Number screenshots sequentially for correct frame ordering:\n\n```bash\nagent-browser open \"[base-url]\u002F[start-route]\"\nagent-browser wait 2000\nagent-browser screenshot .context\u002Fcompound-engineering\u002Ffeature-video\u002F[RUN_ID]\u002Fscreenshots\u002F01-start.png\n```\n\n```bash\nagent-browser snapshot -i\nagent-browser click @e1\nagent-browser wait 1000\nagent-browser screenshot .context\u002Fcompound-engineering\u002Ffeature-video\u002F[RUN_ID]\u002Fscreenshots\u002F02-navigate.png\n```\n\n```bash\nagent-browser snapshot -i\nagent-browser click @e2\nagent-browser wait 1000\nagent-browser screenshot .context\u002Fcompound-engineering\u002Ffeature-video\u002F[RUN_ID]\u002Fscreenshots\u002F03-feature.png\n```\n\n```bash\nagent-browser wait 2000\nagent-browser screenshot .context\u002Fcompound-engineering\u002Ffeature-video\u002F[RUN_ID]\u002Fscreenshots\u002F04-result.png\n```\n\n### 5. Create Video\n\nStitch screenshots into an MP4 using the same `[RUN_ID]` from Step 4:\n\n```bash\nffmpeg -y -framerate 0.5 -pattern_type glob -i \".context\u002Fcompound-engineering\u002Ffeature-video\u002F[RUN_ID]\u002Fscreenshots\u002F*.png\" \\\n  -c:v libx264 -pix_fmt yuv420p -vf \"scale=1280:-2\" \\\n  \".context\u002Fcompound-engineering\u002Ffeature-video\u002F[RUN_ID]\u002Fvideos\u002Ffeature-demo.mp4\"\n```\n\nNotes:\n- `-framerate 0.5` = 2 seconds per frame. Adjust for faster\u002Fslower playback.\n- `-2` in scale ensures height is divisible by 2 (required for H.264).\n\n### 6. Authenticate & Upload to GitHub\n\nUpload produces a `user-attachments\u002Fassets\u002F` URL that GitHub renders as a native inline video player -- the same result as pasting a video into the PR editor manually.\n\nThe approach: close any existing agent-browser session, start a Chrome-engine session with saved GitHub auth, navigate to the PR page, set the video file on the comment form's hidden file input, wait for GitHub to process the upload, extract the resulting URL, then clear the textarea without submitting.\n\n#### Check for existing session\n\nFirst, check if a saved GitHub session already exists:\n\n```bash\nagent-browser close\nagent-browser --engine chrome --session-name github open https:\u002F\u002Fgithub.com\u002Fsettings\u002Fprofile\nagent-browser get title\n```\n\nIf the page title contains the user's GitHub username or \"Profile\", the session is still valid -- skip to \"Upload the video\" below. If it redirects to the login page, the session has expired or was never created -- proceed to \"Auth setup\".\n\n#### Auth setup (one-time)\n\nEstablish an authenticated GitHub session. This only needs to happen once -- session cookies persist across runs via the `--session-name` flag.\n\nClose the current session and open the GitHub login page in a headed Chrome window:\n\n```bash\nagent-browser close\nagent-browser --engine chrome --headed --session-name github open https:\u002F\u002Fgithub.com\u002Flogin\n```\n\nThe user must log in manually in the browser window (handles 2FA, SSO, OAuth -- any login method). **Use the platform's blocking question tool** (`AskUserQuestion` in Claude Code, `request_user_input` in Codex, `ask_user` in Gemini). Otherwise, present the message and wait for the user's reply before proceeding:\n\n```\nGitHub login required for video upload.\n\nA Chrome window has opened to github.com\u002Flogin. Please log in manually\n(this handles 2FA\u002FSSO\u002FOAuth automatically). Reply when done.\n```\n\nAfter login, verify the session works:\n\n```bash\nagent-browser open https:\u002F\u002Fgithub.com\u002Fsettings\u002Fprofile\n```\n\nIf the profile page loads, auth is confirmed. The `github` session is now saved and reusable.\n\n#### Upload the video\n\nNavigate to the PR page and scroll to the comment form:\n\n```bash\nagent-browser open \"https:\u002F\u002Fgithub.com\u002F[owner]\u002F[repo]\u002Fpull\u002F[number]\"\nagent-browser scroll down 5000\n```\n\nSave any existing textarea content before uploading (the comment box may contain an unsent draft):\n\n```bash\nagent-browser eval \"document.getElementById('new_comment_field').value\"\n```\n\nStore this value as `SAVED_TEXTAREA`. If non-empty, it will be restored after extracting the upload URL.\n\nUpload the video via the hidden file input. Use the caller-provided `.mp4` path if in upload-only resume mode, otherwise use the current run's encoded video:\n\n```bash\nagent-browser upload '#fc-new_comment_field' [VIDEO_FILE_PATH]\n```\n\nWhere `[VIDEO_FILE_PATH]` is either:\n- The `.mp4` path passed as the first argument (upload-only resume mode)\n- `.context\u002Fcompound-engineering\u002Ffeature-video\u002F[RUN_ID]\u002Fvideos\u002Ffeature-demo.mp4` (normal recording flow)\n\nWait for GitHub to process the upload (typically 3-5 seconds), then read the textarea value:\n\n```bash\nagent-browser wait 5000\nagent-browser eval \"document.getElementById('new_comment_field').value\"\n```\n\n**Validate the extracted URL.** The value must contain `user-attachments\u002Fassets\u002F` to confirm a successful native upload. If the textarea is empty, contains only placeholder text, or the URL does not match, do not proceed to Step 7. Instead:\n\n1. Check `agent-browser get url` -- if it shows `github.com\u002Flogin`, the session expired. Re-run auth setup.\n2. If still on the PR page, wait an additional 5 seconds and re-read the textarea (GitHub processing can be slow).\n3. If validation still fails after retry, report the failure and the local video path so the user can upload manually.\n\nRestore the original textarea content (or clear if it was empty). A JSON-encoded string is also a valid JavaScript string literal, so assign it directly without `JSON.parse`:\n\n```bash\nagent-browser eval \"const ta = document.getElementById('new_comment_field'); ta.value = [SAVED_TEXTAREA_AS_JS_STRING]; ta.dispatchEvent(new Event('input', { bubbles: true }))\"\n```\n\nTo prepare the value: take the SAVED_TEXTAREA string and produce a JS string literal from it -- escape backslashes, double quotes, and newlines (e.g., `\"text with \\\"quotes\\\" and\\nnewlines\"`). If SAVED_TEXTAREA was empty, use `\"\"`. The result is embedded directly as the right-hand side of the assignment -- no `JSON.parse` call needed.\n\n### 7. Update PR Description\n\nGet the current PR body:\n\n```bash\ngh pr view [number] --json body -q '.body'\n```\n\nAppend a Demo section (or replace an existing one). The video URL renders as an inline player when placed on its own line:\n\n```markdown\n## Demo\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F[uuid]\n\n*Automated video walkthrough*\n```\n\nUpdate the PR:\n\n```bash\ngh pr edit [number] --body \"[updated body with demo section]\"\n```\n\n### 8. Cleanup\n\nAsk the user before removing temporary files. If confirmed, clean up only the current run's scratch directory (other runs may still be in progress or awaiting upload).\n\n**If the video was successfully uploaded**, remove the entire run directory:\n\n```bash\nrm -r .context\u002Fcompound-engineering\u002Ffeature-video\u002F[RUN_ID]\n```\n\n**If in record-only mode or upload failed**, remove only the screenshots but preserve the video so the user can upload later:\n\n```bash\nrm -r .context\u002Fcompound-engineering\u002Ffeature-video\u002F[RUN_ID]\u002Fscreenshots\n```\n\nPresent a completion summary:\n\n```\nFeature Video Complete\n\nPR: #[number] - [title]\nVideo: [VIDEO_URL]\n\nShots captured:\n1. [description]\n2. [description]\n3. [description]\n4. [description]\n\nPR description updated with demo section.\n```\n\n## Usage Examples\n\n```bash\n# Record video for current branch's PR\n\u002Ffeature-video\n\n# Record video for specific PR\n\u002Ffeature-video 847\n\n# Record with custom base URL\n\u002Ffeature-video 847 http:\u002F\u002Flocalhost-5000\n\n# Record for staging environment\n\u002Ffeature-video current https:\u002F\u002Fstaging.example.com\n```\n\n## Tips\n\n- Keep it short: 10-30 seconds is ideal for PR demos\n- Focus on the change: don't include unrelated UI\n- Show before\u002Fafter: if fixing a bug, show the broken state first (if possible)\n- The `--session-name github` session expires when GitHub invalidates the cookies (typically weeks). If upload fails with a login redirect, re-run the auth setup.\n- GitHub DOM selectors (`#fc-new_comment_field`, `#new_comment_field`) may change if GitHub updates its UI. If the upload silently fails, inspect the PR page for updated selectors.\n\n## Troubleshooting\n\n| Symptom | Cause | Fix |\n|---|---|---|\n| `ffmpeg: command not found` | ffmpeg not installed | Install via `brew install ffmpeg` (macOS) or equivalent |\n| `agent-browser: command not found` | agent-browser not installed | Load the `agent-browser` skill for installation instructions |\n| Textarea empty after upload wait | Session expired, or GitHub processing slow | Check session validity (Step 6 auth check). If valid, increase wait time and retry. |\n| Textarea empty, URL is `github.com\u002Flogin` | Session expired | Re-run auth setup (Step 6) |\n| `gh pr view` fails | No PR for current branch | Step 1 handles this -- choose to create a draft PR or record-only mode |\n| Video file too large for upload | Exceeds GitHub's 10MB (free) or 100MB (paid) limit | Re-encode: lower framerate (`-framerate 0.33`), reduce resolution (`scale=960:-2`), or increase CRF (`-crf 28`) |\n| Upload URL does not contain `user-attachments\u002Fassets\u002F` | Wrong upload method or GitHub change | Verify the file input selector is still correct by inspecting the PR page |\n",{"name":5,"description":7,"argument-hint":49},"[PR number or 'current' or path\u002Fto\u002Fvideo.mp4] [optional: base URL, default localhost:3000]","main","0256fccfa68825bb93a1b37467a7377bd34280af",".github\u002Fskills\u002Ffeature-video",1,"https:\u002F\u002Fgithub.com\u002Fshyamsridhar123\u002Fkevin-copilot","https:\u002F\u002Fgithub.com\u002Fshyamsridhar123","Engineer, Printf Debugger, Vibe Coder, AI Enthusiast","2026-08-25 22:42:12",{"source":8,"skillName":5,"commands":59,"prompt":69,"zipAvailable":70},[60,63,66],{"tool":61,"command":62},"npx","npx skills add shyamsridhar123\u002Fkevin-copilot --skill feature-video",{"tool":64,"command":65},"bunx","bunx skills add shyamsridhar123\u002Fkevin-copilot --skill feature-video",{"tool":67,"command":68},"pnpm","pnpm dlx skills add shyamsridhar123\u002Fkevin-copilot --skill feature-video","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fshyamsridhar123\u002Fkevin-copilot\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Ffeature-video\u002FSKILL.md",true,[],[73,87,105,118,135,148],{"skillNo":74,"name":75,"nameZh":6,"description":76,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":77,"categories":78,"keywords":79,"publishedAt":44},"01M71EW4N5RQ70SERKYZB2GBDM","kevin-review","Review a diff and emit concise, evidence-backed findings.","https:\u002F\u002Fgithub.com\u002Fshyamsridhar123\u002Fkevin-copilot\u002Fblob\u002Fmain\u002Fplugin\u002Fskills\u002Fkevin-review\u002FSKILL.md",[],[80,81,36,82,83,84,85,32,86],"kevin review","review","concise","evidence","diff","branch","pull request",{"skillNo":88,"name":89,"nameZh":6,"description":90,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":91,"categories":92,"keywords":93,"publishedAt":44},"01M71EW36CP1KVDES6KGB8APZZ","kevin-merit","Audit a diff for over-engineering and report it as a corporate merit cycle. Satire; the subject is the code, never a person.","https:\u002F\u002Fgithub.com\u002Fshyamsridhar123\u002Fkevin-copilot\u002Fblob\u002Fmain\u002Fplugin\u002Fskills\u002Fkevin-merit\u002FSKILL.md",[],[94,84,86,95,96,32,97,98,85,99,100,101,102,103,30,104,36],"kevin merit","code","report","audit","engineering","never","cycle","as","it","corporate","person",{"skillNo":106,"name":107,"nameZh":6,"description":108,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":109,"categories":110,"keywords":111,"publishedAt":44},"01M71EW0YHNR57136MENKW4YSD","kevin-help","Show Kevin modes, commands, and runtime controls.","https:\u002F\u002Fgithub.com\u002Fshyamsridhar123\u002Fkevin-copilot\u002Fblob\u002Fmain\u002Fplugin\u002Fskills\u002Fkevin-help\u002FSKILL.md",[],[112,113,114,115,43,116,117],"kevin help","help","commands","modes","runtime","controls",{"skillNo":119,"name":120,"nameZh":6,"description":121,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":122,"categories":123,"keywords":124,"publishedAt":44},"01M71EVYYH5QASNZ1KB6C3GMDJ","kevin-enlighten","Explain a topic to someone with no background as a self-contained HTML picture explainer.","https:\u002F\u002Fgithub.com\u002Fshyamsridhar123\u002Fkevin-copilot\u002Fblob\u002Fmain\u002Fplugin\u002Fskills\u002Fkevin-enlighten\u002FSKILL.md",[],[125,126,127,128,129,130,131,101,132,34,133,134],"kevin enlighten","enlighten","repository","explainer","explain","html","self","with","self-contained","background",{"skillNo":136,"name":137,"nameZh":6,"description":138,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":139,"categories":140,"keywords":141,"publishedAt":44},"01M71EVX29VAGHZJZKAKQ97M7X","kevin-compress","Compress an answer without losing required information or safety warnings.","https:\u002F\u002Fgithub.com\u002Fshyamsridhar123\u002Fkevin-copilot\u002Fblob\u002Fmain\u002Fplugin\u002Fskills\u002Fkevin-compress\u002FSKILL.md",[],[142,143,144,145,146,147],"kevin compress","compress","Safety","text","information","answer",{"skillNo":149,"name":150,"nameZh":6,"description":151,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":152,"categories":153,"keywords":154,"publishedAt":44},"01M71EVVDWF888W10KA0D3N4W5","kevin-commit","Generate a terse Conventional Commits message from the staged diff.","https:\u002F\u002Fgithub.com\u002Fshyamsridhar123\u002Fkevin-copilot\u002Fblob\u002Fmain\u002Fplugin\u002Fskills\u002Fkevin-commit\u002FSKILL.md",[],[155,156,157,158,84,159,160,161,162,163],"commit","kevin commit","generate","commits","conventional commits","message","focus","staged","terse"]