john/claude-engineering-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[2.22.1] Improve feature-video with GitHub embed learnings

Browse Source 
- Add low-quality preview GIF creation (640px, 128 colors)
- Use --s3-no-check-bucket flag for rclone uploads
- Document GitHub limitation: external MP4s don't embed
- Use clickable GIF linking to video for PR descriptions

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Kieran Klaassen
2026-01-05 11:10:53 -08:00
parent 84890f1e16
commit be30002bbe
1 changed files with 25 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
plugins/compound-engineering/commands/feature-video.md
View File

@@ -193,16 +193,18 @@ ffmpeg -y -framerate 0.5 -pattern_type glob -i '.playwright-mcp/tmp/screenshots/
-c:v libx264 -pix_fmt yuv420p -vf "scale=1280:-2" \ -c:v libx264 -pix_fmt yuv420p -vf "scale=1280:-2" \
tmp/videos/feature-demo.mp4 tmp/videos/feature-demo.mp4
# Create GIF (larger file, but works everywhere) # Create low-quality GIF for preview (small file, for GitHub embed)
ffmpeg -y -framerate 0.7 -pattern_type glob -i '.playwright-mcp/tmp/screenshots/*.png' \ ffmpeg -y -framerate 0.5 -pattern_type glob -i '.playwright-mcp/tmp/screenshots/*.png' \
-vf "scale=1280:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" \ -vf "scale=640:-1:flags=lanczos,split[s0][s1];[s0]palettegen=max_colors=128[p];[s1][p]paletteuse" \
-loop 0 tmp/videos/feature-demo.gif -loop 0 tmp/videos/feature-demo-preview.gif
# Copy screenshots to project folder for easy access # Copy screenshots to project folder for easy access
cp -r .playwright-mcp/tmp/screenshots tmp/ cp -r .playwright-mcp/tmp/screenshots tmp/
``` ```
**Note:** The `-2` in scale ensures height is divisible by 2 (required for H.264). **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)
</record_walkthrough> </record_walkthrough>
@@ -216,17 +218,19 @@ cp -r .playwright-mcp/tmp/screenshots tmp/
# Check rclone is configured # Check rclone is configured
rclone listremotes rclone listremotes
# Upload video and screenshots to cloud storage # Upload video, preview GIF, and screenshots to cloud storage
rclone copy tmp/videos/feature-demo.mp4 r2:your-bucket/pr-videos/ --progress # Use --s3-no-check-bucket to avoid permission errors
rclone copy tmp/screenshots/ r2:your-bucket/pr-videos/screenshots/ --progress 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 # List uploaded files
rclone ls r2:your-bucket/pr-videos/ rclone ls r2:kieran-claude/pr-videos/pr-[number]/
``` ```
The public URL depends on your bucket configuration. For R2 with public access: Public URLs (R2 with public access):
``` ```
https://pub-XXXXX.r2.dev/pr-videos/feature-demo.mp4 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> </upload_video>
@@ -244,12 +248,19 @@ gh pr view [number] --json body -q '.body'
If the PR already has a video section, replace it. Otherwise, append: 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:
```markdown ```markdown
## Demo Video ## Demo
![Feature Demo]([video-url]) [![Feature Demo]([preview-gif-url])]([video-mp4-url])
_Walkthrough recorded with Playwright_ *Click to view full video*
```
Example:
```markdown
[![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:** **Update the PR:**