skills.rest
langwatch
langwatchOFFICIAL
Explore all skills by this author →
GitHub

browser-pair

Drives a headed Playwright Chromium session for interactive UI feedback and live code verification.

3.5k|362|Updated Sep 9, 2023
Search Tags:#playwright#ui testing#pair programming#Frontend#hot reload#Chromium#headed browser
One-click install
npx skills add https://github.com/langwatch/langwatch --skill browser-pair
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: browser-pair
Source: https://github.com/langwatch/langwatch/tree/main/.claude/skills/browser-pair
Command: npx skills add https://github.com/langwatch/langwatch --skill browser-pair

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Testing UI changes alone means guessing how the interface looks and behaves, with no real-time visual confirmation. This Skill opens a visible Chromium browser so you and the AI can inspect pages together, spot issues, and verify fixes live.

Core Features & Use Cases

  • Headed Browser Control: Launches a visible Playwright Chromium instance that the user watches while the AI navigates, clicks, and types via MCP tools.
  • Interactive Feedback Loop: Snapshots page state, reports concisely, and waits for user direction before each action instead of running autonomously.
  • Live Code Editing: Reads component files, applies edits based on visual feedback, and refreshes the page so hot reload confirms the fix.
  • Use Case: You are restyling a settings page in a Next.js app. The AI opens the page in a visible browser, you point out that the fonts look wrong, it edits the component, and you confirm the fix after refresh.

Quick Start

Ask the AI to start a browser pair session on localhost port 5560 and navigate to the agents page so you can review the UI together.

Frequently Asked Questions about browser-pair

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I run a headed Playwright browser for UI testing?▼

Use the Playwright MCP headed browser tools to launch a visible Chromium window, then navigate to your local dev server URL. The AI drives navigation, clicks, and typing while you watch and give feedback between steps.

How to iterate on UI changes with live visual feedback?▼

Open the page in a headed browser, snapshot the current state, and describe what you see. When you spot an issue, the AI edits the component code and refreshes so the framework's hot reload shows the change immediately.

What is the difference between headed and headless browser testing?▼

Headed mode opens a visible browser window the user can watch, which suits interactive pairing and visual review. Headless mode runs invisibly and is better for automated test suites, but this Skill only uses the headed variant.

Does this work with Next.js hot reload?▼

Yes. After the AI edits a component file, Next.js hot reload picks up the change automatically. The AI then navigates or refreshes the page so you can verify the updated UI in the visible browser.

Why does the browser session fail to start?▼

The most common cause is the dev server not running on the expected port. Start the app first, for example with make dev, and confirm the URL or port before launching the browser session.

Related Skills

Explore More Software Engineering Skills→
Ouro-labsOuro-labs
14

ce-test-browser

Automate browser testing of web pages changed in pull requests or branches using agent-browser CLI.

Official
Intermediate
zeveckzeveck

verify-changes

Automate end-to-end verification of code changes with diff review, test execution, and UI checks.

Community
Advanced
Hack23Hack23
235

playwright-ui-testing

Automate cross-browser UI tests with Playwright for the CIA platform.

Official
Intermediate
CleanExpoCleanExpo
1

playwright-browser

Automate headless browser tasks and end-to-end tests with Playwright.

Community
Advanced