[Feature Request] Add video recording capability

[luisrudge]

Summary

The dev-browser skill currently supports screenshots and ARIA snapshots for debugging, but lacks video recording capability. Since it uses Playwright underneath, adding video recording would be straightforward and very helpful for:

• Creating demo videos of features for documentation/PRs
• Debugging complex multi-step flows
• Sharing test results with teammates

Proposed Solution

Playwright supports video recording via the recordVideo option when creating a browser context:

const context = await browser.newContext({
  recordVideo: {
    dir: './videos',
    size: { width: 1366, height: 768 }
  }
});

Option 1: Server flag

Add a --record-video flag to the dev-browser server:

./server.sh --headless --record-video

Option 2: Per-page recording

Add an API to start/stop recording for specific pages:

await client.startRecording('page-name', { dir: './videos' });
// ... do stuff
await client.stopRecording('page-name'); // returns video path

Workaround

Currently, users can bypass dev-browser and use Playwright directly to get video recording:

import { chromium } from 'playwright';

const browser = await chromium.launch({ headless: false });
const context = await browser.newContext({
  recordVideo: { dir: './videos', size: { width: 1366, height: 768 } }
});
const page = await context.newPage();
// ... test code
await context.close(); // finalizes video

This works but loses the persistent page state benefit of dev-browser.

Additional Context

Videos can be converted to GIFs with ffmpeg for easy sharing:

ffmpeg -i video.webm -vf "fps=10,scale=800:-1:flags=lanczos" -loop 0 output.gif