菜单
Record a video walkthrough of a feature and add it to the PR description
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Run comprehensive agent-native architecture review with scored principles
Use this agent when reviewing code to ensure features are agent-native - that any action a user can take, an agent can also take, and anything a user can see, an agent can see. This enforces the principle that agents should have parity with users in capability and context. <example>Context: The user added a new feature to their application.\nuser: "I just implemented a new email filtering feature"\nassistant: "I'll use the agent-native-reviewer to verify this feature is accessible to agents"\n<commentary>New features need agent-native review to ensure agents can also filter emails, not just humans through UI.</commentary></example><example>Context: The user created a new UI workflow.\nuser: "I added a multi-step wizard for creating reports"\nassistant: "Let me check if this workflow is agent-native using the agent-native-reviewer"\n<commentary>UI workflows often miss agent accessibility - the reviewer checks for API/tool equivalents.</commentary></example>
Use this agent when you need to create or update README files following the Ankane-style template for Ruby gems. This includes writing concise documentation with imperative voice, keeping sentences under 15 words, organizing sections in the standard order (Installation, Quick Start, Usage, etc.), and ensuring proper formatting with single-purpose code fences and minimal prose. Examples: <example>Context: User is creating documentation for a new Ruby gem. user: "I need to write a README for my new search gem called 'turbo-search'" assistant: "I'll use the ankane-readme-writer agent to create a properly formatted README following the Ankane style guide" <commentary>Since the user needs a README for a Ruby gem and wants to follow best practices, use the ankane-readme-writer agent to ensure it follows the Ankane template structure.</commentary></example> <example>Context: User has an existing README that needs to be reformatted. user: "Can you update my gem's README to follow the Ankane style?" assistant: "Let...
Use this agent when you need to analyze code changes from an architectural perspective, evaluate system design decisions, or ensure that modifications align with established architectural patterns. This includes reviewing pull requests for architectural compliance, assessing the impact of new features on system structure, or validating that changes maintain proper component boundaries and design principles. <example>Context: The user wants to review recent code changes for architectural compliance.\nuser: "I just refactored the authentication service to use a new pattern"\nassistant: "I'll use the architecture-strategist agent to review these changes from an architectural perspective"\n<commentary>Since the user has made structural changes to a service, use the architecture-strategist agent to ensure the refactoring aligns with system architecture.</commentary></example><example>Context: The user is adding a new microservice to the system.\nuser: "I've added a new notification service that integrates with...
Use this agent when you need to research and gather external best practices, documentation, and examples for any technology, framework, or development practice. This includes finding official documentation, community standards, well-regarded examples from open source projects, and domain-specific conventions. The agent excels at synthesizing information from multiple sources to provide comprehensive guidance on how to implement features or solve problems according to industry standards. <example>Context: User wants to know the best way to structure GitHub issues for their Rails project. user: "I need to create some GitHub issues for our project. Can you research best practices for writing good issues?" assistant: "I'll use the best-practices-researcher agent to gather comprehensive information about GitHub issue best practices, including examples from successful projects and Rails-specific conventions." <commentary>Since the user is asking for research on best practices, use the best-practices-researcher a...
This skill should be used before implementing features, building components, or making changes. It guides exploring user intent, approaches, and design decisions before planning. Triggers on "let's brainstorm", "help me think through", "what should we build", "explore approaches", ambiguous feature requests, or when the user's request has multiple valid interpretations that need clarification.
| name | feature-video |
| description | Record a video walkthrough of a feature and add it to the PR description |
[PR number or 'current'] [optional: base URL, default localhost:3000]
<command_purpose>Record a video walkthrough demonstrating a feature, upload it, and add it to the PR description.</command_purpose>
Developer Relations Engineer creating feature demo videos
This command creates professional video walkthroughs of features for PR documentation:
Check installation:
command -v agent-browser >/dev/null 2>&1 && echo "Installed" || echo "NOT INSTALLED"
Install if needed:
npm install -g agent-browser && agent-browser install
See the agent-browser skill for detailed usage.
<parse_args>
Arguments: $ARGUMENTS
Parse the input:
http://localhost:3000)# Get PR number for current branch if needed
gh pr view --json number -q '.number'
</parse_args>
<gather_context>
Get PR details:
gh pr view [number] --json title,body,files,headRefName -q '.'
Get changed files:
gh pr view [number] --json files -q '.files[].path'
Map files to testable routes (same as playwright-test):
| File Pattern | Route(s) |
|---|---|
app/views/users/* | /users, /users/:id, /users/new |
app/controllers/settings_controller.rb | /settings |
app/javascript/controllers/*_controller.js | Pages using that Stimulus controller |
app/components/*_component.rb | Pages rendering that component |
</gather_context>
<plan_flow>
Before recording, create a shot list:
Ask user to confirm or adjust the flow:
**Proposed Video Flow**
Based on PR #[number]: [title]
1. Start at: /[starting-route]
2. Navigate to: /[feature-route]
3. Demonstrate:
- [Action 1]
- [Action 2]
- [Action 3]
4. Show result: [success state]
Estimated duration: ~[X] seconds
Does this look right?
1. Yes, start recording
2. Modify the flow (describe changes)
3. Add specific interactions to demonstrate
</plan_flow>
<setup_recording>
Create videos directory:
mkdir -p tmp/videos
Recording approach: Use browser screenshots as frames
agent-browser captures screenshots at key moments, then combine into video using ffmpeg:
ffmpeg -framerate 2 -pattern_type glob -i 'tmp/screenshots/*.png' -vf "scale=1280:-1" tmp/videos/feature-demo.gif
</setup_recording>
<record_walkthrough>
Execute the planned flow, capturing each step:
Step 1: Navigate to starting point
agent-browser open "[base-url]/[start-route]"
agent-browser wait 2000
agent-browser screenshot tmp/screenshots/01-start.png
Step 2: Perform navigation/interactions
agent-browser snapshot -i # Get refs
agent-browser click @e1 # Click navigation element
agent-browser wait 1000
agent-browser screenshot tmp/screenshots/02-navigate.png
Step 3: Demonstrate feature
agent-browser snapshot -i # Get refs for feature elements
agent-browser click @e2 # Click feature element
agent-browser wait 1000
agent-browser screenshot tmp/screenshots/03-feature.png
Step 4: Capture result
agent-browser wait 2000
agent-browser screenshot tmp/screenshots/04-result.png
Create video/GIF from screenshots:
# Create directories
mkdir -p tmp/videos tmp/screenshots
# Create MP4 video (RECOMMENDED - better quality, smaller size)
# -framerate 0.5 = 2 seconds per frame (slower playback)
# -framerate 1 = 1 second per frame
ffmpeg -y -framerate 0.5 -pattern_type glob -i 'tmp/screenshots/*.png' \
-c:v libx264 -pix_fmt yuv420p -vf "scale=1280:-2" \
tmp/videos/feature-demo.mp4
# Create low-quality GIF for preview (small file, for GitHub embed)
ffmpeg -y -framerate 0.5 -pattern_type glob -i 'tmp/screenshots/*.png' \
-vf "scale=640:-1:flags=lanczos,split[s0][s1];[s0]palettegen=max_colors=128[p];[s1][p]paletteuse" \
-loop 0 tmp/videos/feature-demo-preview.gif
Note:
-2 in MP4 scale ensures height is divisible by 2 (required for H.264)</record_walkthrough>
<upload_video>
Upload with rclone:
# Check rclone is configured
rclone listremotes
# Upload video, preview GIF, and screenshots to cloud storage
# Use --s3-no-check-bucket to avoid permission errors
rclone copy tmp/videos/ r2:kieran-claude/pr-videos/pr-[number]/ --s3-no-check-bucket --progress
rclone copy tmp/screenshots/ r2:kieran-claude/pr-videos/pr-[number]/screenshots/ --s3-no-check-bucket --progress
# List uploaded files
rclone ls r2:kieran-claude/pr-videos/pr-[number]/
Public URLs (R2 with public access):
Video: https://pub-4047722ebb1b4b09853f24d3b61467f1.r2.dev/pr-videos/pr-[number]/feature-demo.mp4
Preview: https://pub-4047722ebb1b4b09853f24d3b61467f1.r2.dev/pr-videos/pr-[number]/feature-demo-preview.gif
</upload_video>
<update_pr>
Get current PR body:
gh pr view [number] --json body -q '.body'
Add video section to PR description:
If the PR already has a video section, replace it. Otherwise, append:
IMPORTANT: GitHub cannot embed external MP4s directly. Use a clickable GIF that links to the video:
## Demo
[]([video-mp4-url])
*Click to view full video*
Example:
[](https://pub-4047722ebb1b4b09853f24d3b61467f1.r2.dev/pr-videos/pr-137/feature-demo.mp4)
Update the PR:
gh pr edit [number] --body "[updated body with video section]"
Or add as a comment if preferred:
gh pr comment [number] --body "## Feature Demo
_Automated walkthrough of the changes in this PR_"
</update_pr>
# Optional: Clean up screenshots
rm -rf tmp/screenshots
# Keep videos for reference
echo "Video retained at: tmp/videos/feature-demo.gif"
Present completion summary:
## Feature Video Complete
**PR:** #[number] - [title]
**Video:** [url or local path]
**Duration:** ~[X] seconds
**Format:** [GIF/MP4]
### Shots Captured
1. [Starting point] - [description]
2. [Navigation] - [description]
3. [Feature demo] - [description]
4. [Result] - [description]
### PR Updated
- [x] Video section added to PR description
- [ ] Ready for review
**Next steps:**
- Review the video to ensure it accurately demonstrates the feature
- Share with reviewers for context
# Record video for current branch's PR
/feature-video
# Record video for specific PR
/feature-video 847
# Record with custom base URL
/feature-video 847 http://localhost:5000
# Record for staging environment
/feature-video current https://staging.example.com