skills.rest
jesusprodriguezUnir
jesusprodriguezUnirCOMMUNITY
Explore all skills by this author →
GitHub

playwright-automation

Automates Chromium with Playwright to record demo videos and capture screenshots of the app.

Updated May 14, 2026
Search Tags:#social media#screenshots#browser automation#playwright#ffmpeg#video recording#chromium
One-click install
npx skills add https://github.com/jesusprodriguezUnir/bracketMundial --skill playwright-automation-jesusprodriguezunir
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: playwright-automation
Source: https://github.com/jesusprodriguezUnir/bracketMundial/tree/main/.agents/skills/playwright-automation
Command: npx skills add https://github.com/jesusprodriguezUnir/bracketMundial --skill playwright-automation-jesusprodriguezunir

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, ffmpeg.

What problem does it solve? Creating demo videos and screenshots of a web app for social media and marketing normally requires manual screen recording and repetitive navigation. This Skill automates Chromium with Playwright to record platform-specific videos, capture high-resolution screenshots, and run interactive flows without manual effort. ## Core Features & Use Cases - Multi-platform video recording: Generates MP4 H.264 videos in the correct resolution and aspect ratio for Instagram, TikTok, Facebook, and Twitter, including batch recording across all platforms with a single dev server. - Specialized flow recordings: Records dedicated flows such as prediction simulation, private league creation, and interactive manual sessions. - Screenshots and reels: Captures 9:16 reels with Panini-style banners and 16:9 or 1:1 images for X posts. - Use Case: You need a 30-second TikTok video showing the app's standings, matchdays, and squads. Run the video command for TikTok and the Skill starts the dev server, navigates the app via custom events with smooth scrolling, and outputs a ready-to-publish MP4. ## Quick Start Ask the assistant to record a 30-second demo video of the app for TikTok using the Playwright automation skill.

Frequently Asked Questions about playwright-automation

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

FAQPage Schema
How do I record a demo video of a web app with Playwright?▼

Use the record-video script, which starts the Vite dev server, launches headless Chromium with recordVideo enabled, navigates app sections via custom events with smooth scrolling, and converts the raw WebM to MP4 with ffmpeg.

How to record videos for TikTok and Instagram at the correct resolution?▼

Run the video command with the platform name, such as npm run video -- tiktok. Instagram and TikTok record at 1080x1920 (9:16), Facebook at 1080x1080 (1:1), and Twitter at 1920x1080 (16:9), all exported as MP4 H.264.

Can Playwright interact with elements inside Shadow DOM?▼

Yes. Playwright pierces open shadow roots automatically, so locators like .bottom-nav-btn work without extra configuration. The app built with Lit uses open Shadow DOM, and navigation can also be triggered by dispatching custom navigate events.

Why does Playwright video recording fail to produce an MP4 file?▼

Playwright records raw WebM video, so ffmpeg must be installed and available on the system PATH to transcode it to MP4 H.264. Also verify the dev server responds on localhost:5173 before recording starts.

How do I record videos for multiple social platforms in one run?▼

Use the batch recording command npm run video:all, which iterates over instagram, tiktok, facebook, and twitter while reusing a single dev server instance. You can pass a custom duration in seconds as an argument.

Related Skills

Explore More Software Engineering Skills→
C-RossC-Ross
2

playwright-testing

Automate LlamaOfFate web UI interactions with Playwright in a headless browser.

Community
Intermediate
maximoseomaximoseo

ai-marketing-videos

Generate ready-to-publish marketing videos for multiple platforms from a simple prompt.

Community
Advanced
gotempshgotempsh
620

add-react-analytics

Integrate Temps analytics into React apps with provider-based tracking.

Official
Intermediate
cdubiel08cdubiel08
2

record-demo

Record screen and narration demos and attach them to GitHub issues.

Community
Intermediate