Nm Scry Browser Recording

Record browser sessions using Playwright for web UI tutorials, converts

Security Scan

The skill's instructions match its stated purpose (Playwright-based browser recording), but there are clear incoherences in metadata and the runtime instructions (undeclared tool dependencies, an unrelated pytest check, and an undeclared env var) that merit caution before installing.

Purpose & Capability

The skill's purpose is Playwright-based browser recording and GIF conversion (matches content). However the registry metadata declares no required binaries or env vars while the SKILL.md repeatedly instructs use of Node/npm/npx, Playwright, and ffmpeg (none are declared). The declared config path night-market.scry:gif-generation matches the conversion step, but the omission of required binaries/tools in metadata is inconsistent.

Instruction Scope

Instructions are mostly limited to running Playwright tests, finding the produced WebM, and invoking gif-generation, which is in-scope. But the SKILL.md repeatedly tells the user/agent to run `pytest -v` to verify tests — pytest is unrelated to Playwright/JS tests and appears erroneous. That unrelated instruction could cause unnecessary or confusing actions. The modules also reference process.env.RECORD (conditional recording), which is not declared in metadata.

Install Mechanism

This is an instruction-only skill (no install spec), which minimizes disk-write risk. It does advise installing @playwright/test and running `npx playwright install chromium`, and suggests using ffmpeg for conversions; those are reasonable for the functionality but should have been reflected in required-binaries metadata. No remote download URLs or extract operations are present.

Credentials

The skill requests no credentials (good). However the documentation references an environment variable RECORD for conditional recording (modules/video-capture.md) but requires.env does not declare it. Other implied requirements (Node/npm/npx, ffmpeg) are also undeclared. There are no requests for unrelated secrets, but the mismatch between documented env usage and declared envs is an inconsistency.

Persistence & Privilege

The skill is not always-enabled and uses default autonomous invocation settings; it does not request persistent system-wide privileges or attempt to modify other skills' configs. No elevated persistence is requested.

What to consider before installing

This skill appears to implement Playwright-based recording and GIF conversion, but several inconsistencies could cause surprises. Before installing or invoking: 1) Confirm you have Node/npm/npx, Playwright (@playwright/test), and ffmpeg available — the SKILL.md expects them even though metadata doesn't list them. 2) Ignore or remove the repeated `pytest -v` verification lines (pytest is unrelated to Playwright) or ask the publisher to fix them. 3) If you rely on conditional recording, ensure the RECORD env var is set intentionally — the module references process.env.RECORD but it is not declared. 4) Verify the night-market.scry:gif-generation config is present and that you trust the gif-generation skill it invokes. 5) Run the skill in an isolated environment (or CI runner) first to confirm behavior and outputs before using on sensitive systems. If the publisher updates the metadata to list required binaries and to remove the pytest instructions (or explains why pytest is present), my confidence would increase toward 'benign'.

Night Market Skill — ported from claude-night-market/scry. For the full experience with agents, hooks, and commands, install the Claude Code plugin.

Table of Contents

• Overview
• Required TodoWrite Items
• Process
• Step 1: Validate Playwright Installation
• Step 2: Check Spec File
• Step 3: Execute Recording
• Step 4: Convert to GIF
• Example Playwright Spec
• Playwright Configuration
• Exit Criteria
• Error Handling
• Output Locations
• See Also

Browser Recording Skill

Record browser sessions using Playwright to create video captures of web UI interactions for tutorials and documentation.

When To Use

• Recording browser sessions with Playwright
• Creating web application demo recordings

When NOT To Use

• Terminal-only workflows - use scry:vhs-recording instead
• Static screenshots - use standard screenshot tools

Overview

This skill uses Playwright's built-in video recording to capture browser interactions. The workflow:

1. Validate Playwright installation
2. Execute a Playwright spec with video recording enabled
3. Retrieve the recorded video (WebM format)
4. Convert to GIF using the gif-generation skill

💡 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.

Required TodoWrite Items

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.

Process

Step 1: Validate Playwright Installation

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.

Step 2: Check Spec File

Verify the Playwright spec file exists. Spec files should:

• Be located in a specs/ or tests/ directory
• Have .spec.ts or .spec.js extension
• Include video configuration (see spec-execution module)

Step 3: Execute Recording

Run 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.

Step 4: Convert to GIF

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.

Example Playwright Spec

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.

Playwright Configuration

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.

Exit Criteria

• Playwright spec executed successfully (exit code 0)
• Video file exists in output directory
• Video has non-zero file size
• GIF conversion completed (if requested)

Error Handling

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

Output Locations

Default output paths:

• Videos: ./test-results/<test-name>/video.webm
• Screenshots: ./test-results/<test-name>/screenshot.png

Module Reference

• See modules/spec-execution.md for detailed Playwright execution options
• See modules/video-capture.md for video format and quality settings

See Also

• scry:gif-generation: Convert video to optimized GIF

Troubleshooting

Common Issues

Command 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