Record browser sessions using Playwright for web UI tutorials, converts video to GIF.
Records browser sessions with Playwright and converts videos to GIFs for tutorials.
/plugin marketplace add athola/claude-night-market/plugin install scry@claude-night-marketThis skill inherits all available tools. When active, it can use any tool Claude has access to.
modules/spec-execution.mdmodules/video-capture.mdRecord browser sessions using Playwright to create video captures of web UI interactions for tutorials and documentation.
This skill uses Playwright's built-in video recording to capture browser interactions. The workflow:
💡 Note: Claude Code 2.0.72+ includes native Chrome integration for interactive browser control. This skill (Playwright) is designed for automated recording workflows, CI/CD, and cross-browser support. For interactive debugging and live testing, consider using native Chrome integration. Both approaches complement each other - develop interactively with Chrome, then automate with Playwright specs.
When invoking this skill, create todos for:
- [ ] Validate Playwright is installed and configured
- [ ] Check spec file exists at specified path
- [ ] Execute Playwright spec with video recording
- [ ] Locate and verify video output
- [ ] Convert video to GIF using gif-generation skill
Verification: Run the command with --help flag to verify availability.
Check that Playwright is available:
npx playwright --version
Verification: Run the command with --help flag to verify availability.
If not installed, the user should run:
npm install -D @playwright/test
npx playwright install chromium
Verification: Run pytest -v to verify tests pass.
Verify the Playwright spec file exists. Spec files should:
specs/ or tests/ directory.spec.ts or .spec.js extensionRun the spec with video enabled:
npx playwright test <spec-file> --config=playwright.config.ts
Verification: Run pytest -v to verify tests pass.
The config must enable video recording. See the spec-execution module for configuration details.
After recording completes, use the gif-generation skill to convert the WebM video to an optimized GIF:
**Verification:** Run the command with `--help` flag to verify availability.
Invoke scry:gif-generation with:
- input: <path-to-webm>
- output: <desired-gif-path>
- fps: 10 (recommended for tutorials)
- width: 800 (adjust based on content)
Verification: Run the command with --help flag to verify availability.
import { test, expect } from '@playwright/test';
test('demo workflow', async ({ page }) => {
// Navigate to the application
await page.goto('http://localhost:3000');
// Wait for page to be ready
await page.waitForLoadState('networkidle');
// Perform demo actions
await page.click('button[data-testid="start"]');
await page.waitForTimeout(500); // Allow animation to complete
await page.fill('input[name="query"]', 'example search');
await page.waitForTimeout(300);
await page.click('button[type="submit"]');
await page.waitForSelector('.results');
// Final pause to show results
await page.waitForTimeout(1000);
});
Verification: Run pytest -v to verify tests pass.
Create or update playwright.config.ts:
import { defineConfig } from '@playwright/test';
export default defineConfig({
use: {
video: {
mode: 'on',
size: { width: 1280, height: 720 }
},
viewport: { width: 1280, height: 720 },
launchOptions: {
slowMo: 100 // Slow down actions for visibility
}
},
outputDir: './test-results',
});
Verification: Run pytest -v to verify tests pass.
| Error | Resolution |
|---|---|
| Playwright not installed | Run npm install -D @playwright/test |
| Browser not installed | Run npx playwright install chromium |
| Spec file not found | Verify path and file extension |
| Video not created | Check Playwright config has video enabled |
| Empty video file | validate spec actions complete before test ends |
Default output paths:
./test-results/<test-name>/video.webm./test-results/<test-name>/screenshot.pngmodules/spec-execution.md for detailed Playwright execution optionsmodules/video-capture.md for video format and quality settingsCommand not found Ensure all dependencies are installed and in PATH
Permission errors Check file permissions and run with appropriate privileges
Unexpected behavior
Enable verbose logging with --verbose flag
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.