skills.rest
podman-desktop
podman-desktopOFFICIAL
Explore all skills by this author →
GitHub

storybook-record-video

Record MP4 videos of Storybook component stories across four themes using Playwright and ffmpeg.

8.0k|560|Updated Mar 3, 2022
Search Tags:#playwright#storybook#FFmpeg#screen capture#video recording#MP4#component themes
One-click install
npx skills add https://github.com/podman-desktop/podman-desktop --skill storybook-record-video
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: storybook-record-video
Source: https://github.com/podman-desktop/podman-desktop/tree/main/.agents/skills/storybook-record-video
Command: npx skills add https://github.com/podman-desktop/podman-desktop --skill storybook-record-video

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Capturing consistent video recordings of Storybook component animations across multiple themes (light, dark, high-contrast light, high-contrast dark) is a repetitive manual task. This Skill automates frame capture and encoding to produce GitHub-compatible H.264 MP4 files for documentation, pull requests, and design reviews.

Core Features & Use Cases

  • Multi-Theme Recording: Records a single Storybook story in all four themes (light, dark, hc-light, hc-dark) via the story iframe URL with theme globals.
  • Automated Frame Capture: Uses Playwright MCP browser automation to capture PNG frames at ~60fps for a configurable duration and viewport size.
  • GitHub-Compatible Encoding: Encodes frames with ffmpeg using libx264, yuv420p pixel format, and faststart flags for inline GitHub playback.
  • Use Case: A developer updating an animated progress component records before/after videos in all themes to attach to a pull request demonstrating the visual change.

Quick Start

Record a 20-second video of the Storybook story progress-linearprogress--basic in all four themes and save the MP4 files to the project root with the prefix linear-progress-old.

Frequently Asked Questions about storybook-record-video

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

FAQPage Schema
How do I record a video of a Storybook story?▼

Provide the story ID from the Storybook URL, an output directory, and a filename prefix. The Skill navigates to the story iframe URL for each theme, captures PNG frames at ~60fps with Playwright, and encodes them into MP4 files with ffmpeg.

How to capture Storybook components in dark and high-contrast themes?▼

The Skill appends a theme global to the story iframe URL, cycling through light, dark, hc-light, and hc-dark values. Each theme produces a separate MP4 file named with the pattern {prefix}-{theme}.mp4.

What tools are required to record Storybook story videos?▼

You need a Storybook dev server running on port 6006, ffmpeg available on the system PATH, and the Playwright MCP server for browser automation. The recording procedure uses Unix/macOS temp directory conventions.

Does Storybook video recording work on Windows?▼

No, this procedure is not supported on Windows. It relies on Unix/macOS temp directory conventions such as TMPDIR and /tmp for storing captured frames before encoding.

Why is my recorded Storybook video not playing inline on GitHub?▼

GitHub inline playback requires H.264 video with yuv420p pixel format and the faststart flag. Encode with ffmpeg using -c:v libx264 -pix_fmt yuv420p -movflags +faststart to ensure compatibility.

How long should the recording be for a static component?▼

For components without animation, a duration of 4-5 seconds is sufficient. Longer durations such as the 20-second default are intended for animated components where the full motion cycle needs capturing.

Related Skills

Explore More Software Engineering Skills→
UiPathUiPath
18

apollo-install

Clone the apollo-ui repository, install dependencies, build packages, and start Storybook on port 6006.

Official
Intermediate
All-The-VibesAll-The-Vibes
50

feature-video

Record browser interactions into MP4 videos and embed them in GitHub PR descriptions.

Official
Advanced
PandelisZPandelisZ
1

storybook-visual-review

Capture viewport-stable screenshots of Storybook stories for visual review.

Community
Intermediate
exiaoexiao
37

demo-video

Record browser interactions and encode frames into MP4, GIF, or WebM videos.

Community
Intermediate