skills.rest
posit-dev
posit-devOFFICIAL
Explore all skills by this author →
GitHub

positron-demo-video

Creates scripted demo videos of Positron features using Playwright tests and ffmpeg.

4.2k|179|Updated May 24, 2022
Search Tags:#playwright#FFmpeg#positron#E2E Testing#demo video#Screen Recording#Pull request
One-click install
npx skills add https://github.com/posit-dev/positron --skill positron-demo-video
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: positron-demo-video
Source: https://github.com/posit-dev/positron/tree/main/.claude/skills/positron-demo-video
Command: npx skills add https://github.com/posit-dev/positron --skill positron-demo-video

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, ffmpeg, and includes references (resource) components.

What problem does it solve?

Recording a polished feature walkthrough video for a pull request normally requires manual screen recording, editing, and captioning. This Skill automates the process by turning an approved script into a Playwright-driven recording with overlay captions, then trimming and converting it to MP4.

Core Features & Use Cases

  • Collaborative Script Workflow: Researches the current branch's changes, proposes a step-by-step demo script with overlay text and durations, and iterates with the user before recording.
  • Automated Recording: Translates the approved script into a Playwright demo test using helpers like setupDemoLayout(), narrate(), humanType(), and pause() for human-paced, captioned recordings at 1920x1080.
  • Trim, Convert, and Verify: Uses ffmpeg to cut initialization frames and convert WebM to MP4, then delegates frame-level visual verification to a subagent.
  • Use Case: After implementing notebook cell drag-to-reorder, ask for a demo video; the Skill inspects the branch, drafts a 16-second script, records it via Playwright, and delivers a trimmed MP4 ready to drop into the PR description.

Quick Start

Record a demo video of the feature on my current branch and give me an MP4 I can attach to the PR.

Frequently Asked Questions about positron-demo-video

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

FAQPage Schema
How do I record a demo video for a Positron pull request?▼

Ask for a demo video of your branch's feature. The Skill reviews recent commits, proposes a step-by-step script with overlay captions, and after your approval writes a Playwright demo test, records it, and delivers a trimmed MP4.

How do I add captions or overlay text to a Playwright screen recording?▼

Use the narrate() or showOverlay() helpers from demo-utils.ts inside the demo test. Overlays persist across steps and are combined with pause() calls so viewers have time to read each caption.

What video format and size does the demo recording produce?▼

Recordings are captured at 1920x1080 as WebM, then converted to MP4 with ffmpeg using libx264 at CRF 20. WebM works on GitHub, while MP4 offers better Safari compatibility; GitHub limits are 10MB free and 100MB paid.

Why does the demo video need trimming after recording?▼

The first 10-15 seconds of every recording contain application initialization, and the tail contains editor-close cleanup frames. A subagent identifies the trim points, then ffmpeg cuts them with -ss and -t flags.

Can I adapt an existing e2e test into a demo video recording?▼

Yes. Copy the test to test/e2e/demos/, import demo-utils, add a 300-second timeout, insert pause() calls between actions, and replace locator.fill() with humanType() so typing appears naturally in the video.

Related Skills

Explore More Software Engineering Skills→
narusenianarusenia

kickoff

Clarify implementation requirements and confirm git workflow before starting work.

Community
Intermediate
jhlee0409jhlee0409
7

afc:release-notes

Generate categorized release notes from git commits and pull requests.

Community
Advanced
fcsonlinefcsonline
49

ui-screenshots

Coordinate before/after UI screenshot capture, annotation, and embedding for PRs.

Community
Intermediate
llmh333llmh333

ui-demo

Record web application walkthroughs as WebM with cursor and subtitle overlays.

Community
Advanced