Agent skill

Browser Testing

by benchflow-ai in benchflow-ai/skillsbench

VERIFY your changes work. An agent skill from benchflow-ai/skillsbench.

Apache-2.0Auto-check passedTesting & QA

Install Browser Testing

skills CLI

$ npx skills add benchflow-ai/skillsbench --skill browser-testing -a claude-code

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

GitHub CLI

$ gh skill install benchflow-ai/skillsbench browser-testing --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/benchflow-ai/skillsbench.git skills-src && mkdir -p .claude/skills && cp -r skills-src/tasks/fix-visual-stability/environment/skills/browser-testing .claude/skills/browser-testing && 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/

Paste into Claude Code

Install the "browser-testing" agent skill from https://github.com/benchflow-ai/skillsbench/tree/main/tasks/fix-visual-stability/environment/skills/browser-testing into .claude/skills/browser-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "browser-testing", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/benchflow-ai/skillsbench/tree/main/tasks/fix-visual-stability/environment/skills/browser-testing

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add benchflow-ai/skillsbench --skill browser-testing -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install benchflow-ai/skillsbench browser-testing --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/benchflow-ai/skillsbench.git skills-src && mkdir -p .agents/skills && cp -r skills-src/tasks/fix-visual-stability/environment/skills/browser-testing .agents/skills/browser-testing && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "browser-testing" agent skill from https://github.com/benchflow-ai/skillsbench/tree/main/tasks/fix-visual-stability/environment/skills/browser-testing into .agents/skills/browser-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "browser-testing", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add benchflow-ai/skillsbench --skill browser-testing -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install benchflow-ai/skillsbench browser-testing --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/benchflow-ai/skillsbench.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/tasks/fix-visual-stability/environment/skills/browser-testing .cursor/skills/browser-testing && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "browser-testing" agent skill from https://github.com/benchflow-ai/skillsbench/tree/main/tasks/fix-visual-stability/environment/skills/browser-testing into .cursor/skills/browser-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "browser-testing", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/benchflow-ai/skillsbench.git --path tasks/fix-visual-stability/environment/skills/browser-testing

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add benchflow-ai/skillsbench --skill browser-testing -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install benchflow-ai/skillsbench browser-testing --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/benchflow-ai/skillsbench.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/tasks/fix-visual-stability/environment/skills/browser-testing .gemini/skills/browser-testing && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "browser-testing" agent skill from https://github.com/benchflow-ai/skillsbench/tree/main/tasks/fix-visual-stability/environment/skills/browser-testing into .gemini/skills/browser-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "browser-testing", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install benchflow-ai/skillsbench browser-testing

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add benchflow-ai/skillsbench --skill browser-testing -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/benchflow-ai/skillsbench.git skills-src && mkdir -p .github/skills && cp -r skills-src/tasks/fix-visual-stability/environment/skills/browser-testing .github/skills/browser-testing && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "browser-testing" agent skill from https://github.com/benchflow-ai/skillsbench/tree/main/tasks/fix-visual-stability/environment/skills/browser-testing into .github/skills/browser-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "browser-testing", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add benchflow-ai/skillsbench --skill browser-testing -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install benchflow-ai/skillsbench browser-testing --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/benchflow-ai/skillsbench.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/tasks/fix-visual-stability/environment/skills/browser-testing .opencode/skills/browser-testing && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "browser-testing" agent skill from https://github.com/benchflow-ai/skillsbench/tree/main/tasks/fix-visual-stability/environment/skills/browser-testing into .opencode/skills/browser-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "browser-testing", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: browser-testing
GitHub stars: 1.8k
Token cost: ~1.6k tokens
SKILL.md length: 465 words
Files: 4
Skills in repo: 178
Repo updated: Jul 23, 2026
First seen: Oct 7, 2026
Licence: Apache-2.0

At a glance

VERIFY your changes work. An agent skill from benchflow-ai/skillsbench.

Works in 3 steps: Network.requestWillBeSent - Event fired… → Network.responseReceived - Event fired… → Performance.getMetrics - Returns…
Tasks that involve Browser testing
SKILL.md covers Quick Start, Understanding the Output, What to Look For and Measuring API Endpoints Directly, plus 2 more sections
Runs TypeScript scripts from its folder; calls npx

What it does

Browser Testing is an agent skill from benchflow-ai/skillsbench. VERIFY your changes work. Measure CLS, detect theme flicker, test visual stability, check performance. Use BEFORE and AFTER making changes to confirm fixes. Includes ready-to-run scripts: measure-cls.ts, detect-flicker.ts

Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files (for example `detect-flicker.ts`, `measure-cls.ts` and `measure.ts`).

It sits in Testing & QA, covering Browser testing. The repository describes itself as: SkillsBench evaluates how well skills work and how effective agents are at using them. The licence is Apache-2.0.

When your agent uses it

Tasks that involve Browser testing

Example prompts

“/browser-testing”

Requirements

Node.js

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

Network.requestWillBeSent - Event fired when request starts, we record timestamp
Network.responseReceived - Event fired when response arrives, we calculate duration
Performance.getMetrics - Returns Chrome's internal counters (memory, layout, script time)

What it can do on your machine

Read from SKILL.md and the folder at commit 9a1f4dd. 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
Ships script files (TypeScript), which the agent can run.
Shell commands in SKILL.md call:
- npx
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npx, 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 Testing loads about 1.6k tokens when it runs. Until then it costs about 59 tokens; SKILL.md has 465 words of instructions outside code blocks.

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

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 benchflow-ai/skillsbench at commit 9a1f4dd, republished under its Apache-2.0 licence (© benchflow-ai). 465 words, ~1,601 tokens.

Download SKILL.mdSave it as .claude/skills/browser-testing/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.

name: browser-testing
description: VERIFY your changes work. Measure CLS, detect theme flicker, test visual stability, check performance. Use BEFORE and AFTER making changes to confirm fixes. Includes ready-to-run scripts: measure-cls.ts, detect-flicker.ts

Performance Measurement with Playwright CDP

Diagnose performance issues by measuring actual load times and network activity.

Playwright is pre-installed. Just use the measurement script.

Quick Start

A measure.ts script is included in this skill's directory. Find it and run:

bash

# Measure a page (outputs JSON with waterfall data)
npx ts-node <path-to-this-skill>/measure.ts http://localhost:3000

# Measure an API endpoint
npx ts-node <path-to-this-skill>/measure.ts http://localhost:3000/api/products

The script is in the same directory as this SKILL.md file.

Understanding the Output

The script outputs JSON with:

json

{
  "url": "http://localhost:3000",
  "totalMs": 1523,
  "requests": [
    { "url": "http://localhost:3000/", "ms": 45.2 },
    { "url": "http://localhost:3000/api/products", "ms": 512.3 },
    { "url": "http://localhost:3000/api/featured", "ms": 301.1 }
  ],
  "metrics": {
    "JSHeapUsedSize": 4521984,
    "LayoutCount": 12,
    "ScriptDuration": 0.234
  }
}

Reading the Waterfall

The requests array shows network timing. Look for sequential patterns:

BAD (sequential - each waits for previous):
  /api/products    |████████|                        512ms
  /api/featured             |██████|                 301ms  (starts AFTER products)
  /api/categories                  |████|            201ms  (starts AFTER featured)
  Total: 1014ms

GOOD (parallel - all start together):
  /api/products    |████████|                        512ms
  /api/featured    |██████|                          301ms  (starts SAME TIME)
  /api/categories  |████|                            201ms  (starts SAME TIME)
  Total: 512ms (just the slowest one)

Key Metrics

Metric	What it means	Red flag
`totalMs`	Total page load time	> 1000ms
`JSHeapUsedSize`	Memory used by JS	Growing over time
`LayoutCount`	Layout recalculations	> 50 per page
`ScriptDuration`	Time in JS execution	> 0.5s

What to Look For

Symptom	Likely Cause	Fix
Requests in sequence	Sequential `await` statements	Use `Promise.all()`
Same URL requested twice	Fetch before cache check	Check cache first
Long time before response starts	Blocking operation before sending	Make it async/non-blocking
High LayoutCount	Components re-rendering	Add `React.memo`, `useMemo`

Measuring API Endpoints Directly

For quick API timing without browser overhead:

typescript

async function measureAPI(url: string) {
  const start = Date.now();
  const response = await fetch(url);
  const elapsed = Date.now() - start;
  return { url, time_ms: elapsed, status: response.status };
}

// Example
const endpoints = [
  'http://localhost:3000/api/products',
  'http://localhost:3000/api/products?cache=false',
  'http://localhost:3000/api/checkout',
];

for (const endpoint of endpoints) {
  const result = await measureAPI(endpoint);
  console.log(`${endpoint}: ${result.time_ms}ms`);
}

How the Measurement Script Works

The script uses Chrome DevTools Protocol (CDP) to intercept browser internals:

Network.requestWillBeSent - Event fired when request starts, we record timestamp
Network.responseReceived - Event fired when response arrives, we calculate duration
Performance.getMetrics - Returns Chrome's internal counters (memory, layout, script time)

This gives you the same data as Chrome DevTools Network tab, but programmatically.

Visual Stability Measurement

Measure CLS (Cumulative Layout Shift)

bash

npx ts-node <path-to-this-skill>/measure-cls.ts http://localhost:3000

Output:

json

{
  "url": "http://localhost:3000",
  "cls": 0.42,
  "rating": "poor",
  "shifts": [
    {
      "value": 0.15,
      "hadRecentInput": false,
      "sources": [
        {"nodeId": 42, "previousRect": {...}, "currentRect": {...}}
      ]
    }
  ]
}

CLS Thresholds

CLS Score	Rating	Action
< 0.1	Good	No action needed
0.1 - 0.25	Needs Improvement	Review shift sources
> 0.25	Poor	Fix immediately

Detect Theme Flicker

bash

npx ts-node <path-to-this-skill>/detect-flicker.ts http://localhost:3000

Detects if dark theme flashes white before loading. Sets localStorage theme before navigation and checks background color at first paint.

Show full SKILL.md (190 more words)Show less

Accurate CLS Measurement

CLS only measures shifts within the viewport. Content that loads below the fold doesn't contribute until you scroll. For accurate measurement:

Recommended testing sequence:

Load page
Wait 3 seconds (let late-loading content appear)
Scroll to bottom
Wait 2 seconds
Trigger 1-2 UI actions (theme toggle, filter click, etc.)
Wait 2 seconds
Read final CLS

bash

# Basic measurement (may miss shifts from late content)
npx ts-node <path-to-this-skill>/measure-cls.ts http://localhost:3000

# With scrolling (catches more shifts)
npx ts-node <path-to-this-skill>/measure-cls.ts http://localhost:3000 --scroll

Why measurements vary:

Production vs development builds have different timing
Viewport size affects what's "in view" during shifts
setTimeout delays vary slightly between runs
Network conditions affect when content loads

The relative difference (before/after fix) matters more than absolute values.

Common CLS Causes

Shift Source	Likely Cause	Fix
`<img>` elements	Missing width/height	Add dimensions or use `next/image`
Theme wrapper	Hydration flicker	Use inline script before React
Skeleton loaders	Size mismatch	Match skeleton to final content size
Dynamic banners	No reserved space	Add `min-height` to container
Late-loading sidebars	Content appears and pushes main content	Reserve space with CSS or show placeholder
Pagination/results bars	UI element appears after data loads	Show immediately with loading state
Font loading	Custom fonts cause text reflow	Use `font-display: swap` or preload fonts

Files

SKILL.md and 3 other files in tasks/fix-visual-stability/environment/skills/browser-testing of benchflow-ai/skillsbench.

SKILL.md
detect-flicker.ts
measure-cls.ts
measure.ts

Open the folder on GitHubat commit 9a1f4dd

Compare with similar skills

Browser Testing 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 Testing compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Browser Testing this skillbenchflow-ai/skillsbench	1.8k	—	~1.6k	Automated safety check: Pass	Apache-2.0	2 mo ago
Web Application Testinganthropics/skills	180k	51 repos	~966	Automated safety check: Pass	Apache-2.0	2 days ago
BrowserStack Live Testinghandsontable/handsontable	22k	—	~950	Automated safety check: Pass	Custom licence	today
Chrome Tracelayoutit/polycss	759	—	~2k	Automated safety check: Pass	MIT	1 mo ago
Browser Testing With ScreenshotsAgentWorkforce/relay	866	1 repos	~2.2k	Automated safety check: Pass	Apache-2.0	today
JS-in-HTML Testingliaohch3/claude-tap	3.3k	—	~924	Automated safety check: Pass	MIT	15 days ago

Similar skills

Web Application Testing
anthropics/skills
Official
Tests local web applications with Python Playwright scripts, checking frontend behavior, capturing screenshots and reading browser console logs.
180k GitHub starsUsed in 51 repos~966 tokens
Testing & QAAuto-check passed
BrowserStack Live Testing
handsontable/handsontable
Opens a live BrowserStack session on a real Android, iOS or desktop browser for a local or public URL, tunneling localhost through Cloudflare when needed.
22k GitHub stars~950 tokensUpdated today
Testing & QAAuto-check passed
Chrome Trace
layoutit/polycss
Capture and analyze Chrome/Chromium performance traces with Playwright around a concrete browser interaction.
759 GitHub stars~2k tokensUpdated 1 mo ago
Testing & QAAuto-check passed
Browser Testing With Screenshots
AgentWorkforce/relay
A skill your agent uses when testing web applications with visual verification - automates Chrome browser interactions, element selection, and screenshot capture for confirming UI functionality
866 GitHub starsUsed in 1 repo~2.2k tokens
Testing & QAAuto-check passed
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 15 days ago
Testing & QAAuto-check passed
Diff-Driven QA
Skyvern-AI/skyvern
Reads your git diff, decides whether the change needs browser QA, API checks or repo tests, runs that validation and reports pass or fail with evidence.
23k GitHub stars~4.7k tokensUpdated today
Testing & QAAuto-check: warnings

Questions about Browser Testing

What does Browser Testing do?

VERIFY your changes work. An agent skill from benchflow-ai/skillsbench. Browser Testing is an agent skill from benchflow-ai/skillsbench. VERIFY your changes work.

When should I use Browser Testing?

Browser Testing fits situations like: tasks that involve Browser testing.

How do I install Browser Testing in Claude Code?

Run `npx skills add benchflow-ai/skillsbench --skill browser-testing -a claude-code`. Or copy the skill folder (tasks/fix-visual-stability/environment/skills/browser-testing in benchflow-ai/skillsbench) into .claude/skills/browser-testing in your project. Claude Code loads it when a task matches its description.

How do I install Browser Testing in Codex?

Run `npx skills add benchflow-ai/skillsbench --skill browser-testing -a codex`. Or copy the skill folder (tasks/fix-visual-stability/environment/skills/browser-testing in benchflow-ai/skillsbench) into .agents/skills/browser-testing in your project. Codex loads it when a task matches its description.

Can I use Browser Testing 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 benchflow-ai/skillsbench --skill browser-testing -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-testing, .gemini/skills/browser-testing, .github/skills/browser-testing and .opencode/skills/browser-testing in your project.

What does Browser Testing need to run?

Going by SKILL.md and its folder, Browser Testing needs TypeScript for the scripts in its folder and the command-line tools its instructions call (npx). Our summary lists: Node.js.

Does Browser Testing access the network?

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

Is Browser Testing 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 Testing use?

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

How many tokens does Browser Testing use?

About 1.6k tokens (SKILL.md is roughly 6.4k 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 Testing?

Skills that share tags, products or a category with Browser Testing: Web Application Testing (anthropics/skills, 180k stars), BrowserStack Live Testing (handsontable/handsontable, 22k stars), Chrome Trace (layoutit/polycss, 759 stars) and Browser Testing With Screenshots (AgentWorkforce/relay, 866 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Browser Testing?

benchflow-ai (a GitHub organization) maintains it in benchflow-ai/skillsbench, which has 1,832 GitHub stars. The repository holds 178 skills in this directory. The repository was last updated on July 23, 2026.

Source: benchflow-ai/skillsbench on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Browser Testing

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Performance Measurement with Playwright CDP

Quick Start

Understanding the Output

Reading the Waterfall

Key Metrics

What to Look For

Measuring API Endpoints Directly

How the Measurement Script Works

Visual Stability Measurement

Measure CLS (Cumulative Layout Shift)

CLS Thresholds

Detect Theme Flicker

Accurate CLS Measurement

Common CLS Causes

Files

Compare with similar skills

Similar skills

More from benchflow-ai/skillsbench

Related

Questions about Browser Testing