feature-video_skill

Overview

This skill records a short, professional video walkthrough of a feature and embeds it into a pull request description. It captures browser screenshots, combines them into an MP4/GIF, uploads the assets to public storage, and updates the PR with a clickable preview. The workflow is optimized for quick demos that provide reviewers immediate context.

How this skill works

The skill inspects the PR to collect changed files and maps them to likely routes to test. It runs agent-browser commands to navigate the app, capture screenshots for key shots, and uses ffmpeg to build an MP4 and a small GIF preview. Finally it uploads assets to a public bucket (rclone/R2) and edits the PR body or posts a comment with a clickable GIF linking to the MP4.

When to use it

• When you want to demonstrate how a UI change behaves in a PR.
• To show a bug fix with before/after behavior for faster review.
• When textual description is insufficient for complex interactions.
• Before merging feature work that touches user flows or components.
• When reviewers are remote and need a quick visual context.

Best practices

• Keep demos short (10–30 seconds) and focus on the change under review.
• Plan a simple shot list: start, navigation, core demo, edge case, success.
• Capture high-quality MP4 and a small GIF preview for GitHub embedding.
• Validate public URLs (HTTP 200) before updating the PR to avoid broken links.
• Use consistent naming and a tmp/videos directory to keep artifacts organized.

Example use cases

• Record the new user onboarding flow to show reviewers the complete experience.
• Demonstrate a form validation fix by showing the broken state then the corrected state.
• Show a new component in context by navigating to the page that renders it.
• Provide a short feature demo for product managers and non-dev reviewers.
• Attach a visual acceptance test for complex interactions in a pull request.