How do I install the Create Feature Video skill?

Run npx skillmds add majiayu000/create-feature-video in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Create Feature Video skill do?

Record a video walkthrough of a feature and add it to the PR description It is listed under Coding & Dev Tools on SkillMD.

Is Create Feature Video safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Create Feature Video?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Create Feature Video free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Create Feature Video?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Create Feature Video by majiayu000 — Agent Skill

Name: Create Feature Video
Rating: 4.2 (5 reviews)
Author: majiayu000

Arguments

[PR number or 'current'] [optional: base URL, default localhost:3000]

Feature Video Walkthrough

Record a video walkthrough demonstrating a feature, upload it, and add it to the PR description.

Introduction

Developer Relations Engineer creating feature demo videos

This command creates professional video walkthroughs of features for PR documentation:

Records browser interactions using agent-browser CLI
Demonstrates the complete user flow
Uploads the video for easy sharing
Updates the PR description with an embedded video

Prerequisites

Setup

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.

Main Tasks

1. Parse Arguments

Arguments: $ARGUMENTS

Parse the input:

First argument: PR number or "current" (defaults to current branch's PR)
Second argument: Base URL (defaults to http://localhost:3000)

# Get PR number for current branch if needed
gh pr view --json number -q '.number'

2. Gather Feature 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

3. Plan the Video Flow

Before recording, create a shot list:

Opening shot: Homepage or starting point (2-3 seconds)
Navigation: How user gets to the feature
Feature demonstration: Core functionality (main focus)
Edge cases: Error states, validation, etc. (if applicable)
Success state: Completed action/result

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

4. Setup Video 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

5. Record the 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:

The -2 in MP4 scale ensures height is divisible by 2 (required for H.264)
Preview GIF uses 640px width and 128 colors to keep file size small (~100-200KB)

6. Upload the 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

7. Update PR Description

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

[![Feature Demo]([preview-gif-url])]([video-mp4-url])

*Click to view full video*

Example:

[![Feature Demo](https://pub-4047722ebb1b4b09853f24d3b61467f1.r2.dev/pr-videos/pr-137/feature-demo-preview.gif)](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

![Demo]([video-url])

_Automated walkthrough of the changes in this PR_"

8. Cleanup

# Optional: Clean up screenshots
rm -rf tmp/screenshots

# Keep videos for reference
echo "Video retained at: tmp/videos/feature-demo.gif"

9. Summary

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

Quick Usage Examples

# Record video for current branch's PR
/create-feature-video

# Record video for specific PR
/create-feature-video 847

# Record with custom base URL
/create-feature-video 847 http://localhost:5000

# Record for staging environment
/create-feature-video current https://staging.example.com

Tips

Keep it short: 10-30 seconds is ideal for PR demos
Focus on the change: Don't include unrelated UI
Show before/after: If fixing a bug, show the broken state first (if possible)
Annotate if needed: Add text overlays for complex features

Create Feature Video

File contents

Arguments

Feature Video Walkthrough

Introduction

Prerequisites

Setup

Main Tasks

1. Parse Arguments

2. Gather Feature Context

3. Plan the Video Flow

4. Setup Video Recording

5. Record the Walkthrough

6. Upload the Video

7. Update PR Description

8. Cleanup

9. Summary

Quick Usage Examples

Tips

Frequently asked questions

Create Feature Video

File contents

Arguments

Feature Video Walkthrough

Introduction

Prerequisites

Setup

Main Tasks

1. Parse Arguments

2. Gather Feature Context

3. Plan the Video Flow

4. Setup Video Recording

5. Record the Walkthrough

6. Upload the Video

7. Update PR Description

8. Cleanup

9. Summary

Quick Usage Examples

Tips

Related skills

Frequently asked questions

How do I install the Create Feature Video skill?

What does the Create Feature Video skill do?

Is Create Feature Video safe to use?

Which AI agents work with Create Feature Video?

Is Create Feature Video free to use?

Who published Create Feature Video?