feature-video

Record browser walkthroughs, encode MP4s, and insert video URLs into pull requests.

Updated Nov 11, 2023
One-click install
npx skills add https://github.com/michaelvolz/redmuffin.Blazor.StaticWeb --skill feature-video-michaelvolz
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: feature-video
Source: https://github.com/michaelvolz/redmuffin.Blazor.StaticWeb/tree/main/.opencode/skills/ce/feature-video
Command: npx skills add https://github.com/michaelvolz/redmuffin.Blazor.StaticWeb --skill feature-video-michaelvolz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes friction from demonstrating UI changes by automating video walkthrough capture, encoding, and upload so reviewers can instantly see the visual impact of a PR.

Core Features & Use Cases

  • Guided recording: Captures browser interactions step-by-step with agent-browser, numbering screenshots to preserve sequence.
  • Encoding & upload: Uses ffmpeg to stitch screenshots into MP4 and uploads via GitHub with authenticated sessions, validating the resulting user-attachments URL.
  • Use case: When a PR needs a visual demo, run the skill to record the revised flow locally and embed the generated video link directly into the PR description.

Quick Start

Use feature-video to capture a localhost walkthrough for the current branch and append the resulting upload to the PR.

Frequently Asked Questions about feature-video

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a video walkthrough to a GitHub pull request?

To add a video walkthrough to a GitHub pull request, you can automate the capture of browser interactions, encode the screenshots into an MP4 using ffmpeg, and upload the asset to insert the URL directly into the PR body.

How do I capture a UI demo video for a feature branch locally?

Capture a UI demo video for a feature branch by using agent-browser to record the revised flow step-by-step, numbering screenshots to preserve sequence, and then stitching them together with ffmpeg into an MP4 file.

Do I need ffmpeg and gh CLI to automate PR video uploads?

Yes, you need ffmpeg and gh CLI to automate PR video uploads. You also need agent-browser and an authenticated GitHub session to capture screenshots, encode MP4s, validate the user-attachments URL, and insert it into the PR.

Can I embed a demo video in a PR description without manual uploads?

You can embed a demo video in a PR description without manual uploads by capturing the localhost walkthrough for the current branch, uploading the generated MP4 via authenticated GitHub sessions, and appending the resulting attachment link to the PR.

What is the best way to show visual UI changes in a pull request?

The best way to show visual UI changes in a pull request is creating an inline video walkthrough that captures browser interactions, encodes the screenshots into an MP4, and embeds the validated asset URL directly into the PR description for reviewers.

Why use agent-browser for recording PR walkthroughs?

Use agent-browser for recording PR walkthroughs because it captures browser interactions step-by-step while numbering screenshots to preserve the sequence, ensuring the resulting ffmpeg-encoded MP4 accurately demonstrates the revised UI flow.