New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Browser Recording

by athola in athola/claude-night-market

Records browser sessions via Playwright and converts video to GIF.

MITAuto-check passedTesting & QA

Install Browser Recording

skills CLI
$ npx skills add athola/claude-night-market --skill browser-recording -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install athola/claude-night-market browser-recording --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/athola/claude-night-market.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/scry/skills/browser-recording .claude/skills/browser-recording && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
browser-recording
GitHub stars
341
Token cost
~1.4k tokens
SKILL.md length
423 words
Files
3
Skills in repo
154
Repo updated
First seen
Licence
MIT

At a glance

Records browser sessions via Playwright and converts video to GIF.

  • Works in 4 steps: Validate Playwright Installation → Check Spec File → Execute Recording → …
  • Creating web UI tutorials
  • SKILL.md covers When To Use, When NOT To Use, Overview and Required TodoWrite Items, plus 8 more sections
  • Calls npx, pytest and npm

What it does

Browser Recording is an agent skill from athola/claude-night-market. Records browser sessions via Playwright and converts video to GIF. Use when creating web UI tutorials or demos showing browser interactions.

Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files (for example `modules/spec-execution.md` and `modules/video-capture.md`).

It sits in Testing & QA, covering Browser testing and Frontend development. It works with Playwright and pytest. The repository describes itself as: 23 Claude Code plugins: TDD enforcement hooks, git/PR workflows, spec-driven development, code review, project lifecycle, fix-from-error, maintenance automation, context… The licence is MIT.

When your agent uses it

  • Creating web UI tutorials
  • Demos showing browser interactions

Example prompts

  • “Use the browser-recording skill to record browser sessions via Playwright and converts video to GIF”
  • “/browser-recording”

Requirements

  • Node.js

Workflow steps

4 steps, taken from the step headings in SKILL.md.

  1. Validate Playwright Installation
  2. Check Spec File
  3. Execute Recording
  4. Convert to GIF

What it can do on your machine

Read from SKILL.md and the folder at commit 9f3eb00. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npx
    • pytest
    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npx and npm, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Browser Recording loads about 1.4k tokens when it runs. Until then it costs about 40 tokens; SKILL.md has 423 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~40
When it runs · the whole SKILL.md, loaded when a task matches
~1.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from athola/claude-night-market at commit 9f3eb00, republished under its MIT licence (© athola). 423 words, ~1,394 tokens.

Download SKILL.mdSave it as .claude/skills/browser-recording/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
name
browser-recording
description
Records browser sessions via Playwright and converts video to GIF. Use when creating web UI tutorials or demos showing browser interactions.
alwaysApply
false
category
media-generation
tags
playwright, browser, recording, video, web, tutorial
complexity
medium
model_hint
standard
estimated_tokens
500
progressive_loading
true
modules
modules/spec-execution.md, modules/video-capture.md
dependencies
scry:gif-generation

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:

bash
npx playwright --version

Verification: Run the command with --help flag to verify availability.

If not installed, the user should run:

bash
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:

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

Show full SKILL.md (163 more words)Show less
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

typescript
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:

typescript
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

ErrorResolution
Playwright not installedRun npm install -D @playwright/test
Browser not installedRun npx playwright install chromium
Spec file not foundVerify path and file extension
Video not createdCheck Playwright config has video enabled
Empty video filevalidate 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

© athola, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 2 other files in plugins/scry/skills/browser-recording of athola/claude-night-market.

  • SKILL.md
  • modules/spec-execution.md
  • modules/video-capture.md

Open the folder on GitHubat commit 9f3eb00

Compare with similar skills

Browser Recording next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Browser Recording compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Browser Recording this skillathola/claude-night-market341—~1.4kAutomated safety check: PassMIT
Shogun Screenshotyohey-w/multi-agent-shogun1.4k—~901Automated safety check: NotesMIT
JS-in-HTML Testingliaohch3/claude-tap3.3k—~924Automated safety check: PassMIT
UI Visual DebuggingNangoHQ/nango13k—~1.3kAutomated safety check: PassCustom licence
Playwright CLIbitsocialnet/5chan135—~1.1kAutomated safety check: NotesGPL-3.0
Verify Debbie Codesdebs-obrien/debbie.codes142—~1.9kAutomated safety check: PassNone

Similar skills

  • Shogun Screenshot

    yohey-w/multi-agent-shogun

    スクリーンショットの取得・加工を行う。ローカルスクショから最新画像を取得、 PlaywrightでWebページをキャプチャ、画像のトリミング・リサイズ、機微情報を黒塗りマスキング。

    1.4k GitHub stars~901 tokensUpdated 2 mo ago
    Testing & QAAuto-check: notes

  • JS-in-HTML Testing

    liaohch3/claude-tap

    Tests JavaScript embedded in an HTML file in two layers: pytest checks of the logic ported to Python, and Playwright runs in a real browser for the DOM.

    3.3k GitHub stars~924 tokensUpdated 16 days ago
    Testing & QAAuto-check passed

  • UI Visual Debugging

    NangoHQ/nango

    A skill your agent uses when modifying or visually debugging Nango frontend UI, including packages/webapp, packages/connect-ui, browser interactions, screenshots, and visual regressions.

    13k GitHub stars~1.3k tokensUpdated today
    Testing & QAAuto-check passed

  • Playwright CLI

    bitsocialnet/5chan

    Verify browser behavior or reproduce a web UI issue with the installed Playwright CLI.

    135 GitHub stars~1.1k tokensUpdated yesterday
    Testing & QAAuto-check: notes

  • Verify Debbie Codes

    debs-obrien/debbie.codes

    Drive the live debbie.codes Nuxt site (web UI) the way a user does via Playwright — launch the dev server, doctor health, exercise mapped features, capture screenshots/ARIA evidence, and clean up.

    142 GitHub stars~1.9k tokensUpdated today
    Testing & QAAuto-check passed

  • E2E Testing

    Opentrons/opentrons

    E2E testing conventions for Protocol Designer and Labware Library using Playwright + pytest in e2e-testing/.

    523 GitHub stars~3k tokensUpdated today
    Testing & QAAuto-check: notes

More from athola/claude-night-market

All 154 skills in this repo

  • Night Market Diagnostics Toolkit

    athola/claude-night-market

    Run and interpret repo diagnostic scripts (ratchets, validators, token stats).

    341 GitHub stars~3.4k tokensUpdated 3 days ago
    Auto-check passed

  • Skills Eval

    athola/claude-night-market

    Evaluate Claude skill quality through auditing. An agent skill from athola/claude-night-market.

    341 GitHub stars~1.6k tokensUpdated 3 days ago
    Auto-check passed

  • Agent Teams

    athola/claude-night-market

    Coordinates Claude agent teams via filesystem protocol. An agent skill from athola/claude-night-market.

    341 GitHub stars~2.5k tokensUpdated 3 days ago
    Auto-check passed

  • Delegation Core

    athola/claude-night-market

    Delegates execution to eight CLIs (Gemini, Qwen, MiniMax, GLM, Muse, Codex, OpenCode, Glimmer).

    341 GitHub stars~2.5k tokensUpdated 3 days ago
    Auto-check passed

  • Elegant Code

    athola/claude-night-market

    Guide minimal code via a decision ladder with full safety, edge, and negative-case coverage.

    341 GitHub stars~2.1k tokensUpdated 3 days ago
    Auto-check passed

  • Skill Library Mission

    athola/claude-night-market

    Build a project skill library in .claude/skills/ via discovery, parallel authoring, and review.

    341 GitHub stars~1.6k tokensUpdated 3 days ago
    Auto-check passed

Works with

Categories

Questions about Browser Recording

What does Browser Recording do?

Records browser sessions via Playwright and converts video to GIF. Browser Recording is an agent skill from athola/claude-night-market. Records browser sessions via Playwright and converts video to GIF.

When should I use Browser Recording?

Browser Recording fits situations like: creating web UI tutorials; demos showing browser interactions.

How do I install Browser Recording in Claude Code?

Run `npx skills add athola/claude-night-market --skill browser-recording -a claude-code`. Or copy the skill folder (plugins/scry/skills/browser-recording in athola/claude-night-market) into .claude/skills/browser-recording in your project. Claude Code loads it when a task matches its description.

How do I install Browser Recording in Codex?

Run `npx skills add athola/claude-night-market --skill browser-recording -a codex`. Or copy the skill folder (plugins/scry/skills/browser-recording in athola/claude-night-market) into .agents/skills/browser-recording in your project. Codex loads it when a task matches its description.

Can I use Browser Recording in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add athola/claude-night-market --skill browser-recording -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/browser-recording, .gemini/skills/browser-recording, .github/skills/browser-recording and .opencode/skills/browser-recording in your project.

What does Browser Recording need to run?

Going by SKILL.md and its folder, Browser Recording needs the command-line tools its instructions call (npx, pytest and npm). Our summary lists: Node.js.

Does Browser Recording access the network?

SKILL.md contains no URLs. Its commands use npx and npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Browser Recording safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Browser Recording use?

Browser Recording is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Browser Recording use?

About 1.4k tokens (SKILL.md is roughly 5.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Browser Recording?

Skills that share tags, products or a category with Browser Recording: Shogun Screenshot (yohey-w/multi-agent-shogun, 1.4k stars), JS-in-HTML Testing (liaohch3/claude-tap, 3.3k stars), UI Visual Debugging (NangoHQ/nango, 13k stars) and Playwright CLI (bitsocialnet/5chan, 135 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Browser Recording?

athola (a GitHub user) maintains it in athola/claude-night-market, which has 341 GitHub stars. The repository holds 154 skills in this directory. The repository was last updated on October 6, 2026.

Source: athola/claude-night-market on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.