langwatch/browser-pair
.claude/skills/browser-pair/SKILL.md
Collaborative headed browser session for UI work. Launch Playwright Chromium visible to the user, handle auth, then interactively drive the browser while the user watches and gives real-time visual feedback. Edit code and refresh to verify fixes live. Use when the user says 'browser pair', 'paired browser', 'let's look at this together', 'open chromium', or wants to iterate on UI with live visual feedback.
$ install --global
skillsauthnpx skillsauth add langwatch/langwatch browser-pairInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 15, 2026, 1:21 PM6.0s1 file scanned
SKILL.md
- name:
- browser-pair
- description:
- Collaborative headed browser session for UI work. Launch Playwright Chromium visible to the user, handle auth, then interactively drive the browser while the user watches and gives real-time visual feedback. Edit code and refresh to verify fixes live. Use when the user says 'browser pair', 'paired browser', 'let's look at this together', 'open chromium', or wants to iterate on UI with live visual feedback.
- user-invocable:
- true
- argument-hint:
- [url-or-port] [page-or-feature]
Browser Pair — Collaborative UI Session
Open a headed Chromium browser the user can see, then drive it interactively. The user watches, gives visual feedback, you make code changes and verify live. This is pair programming for UI.
Key difference from /browser-test: This is interactive and headed. You wait for user direction between actions. You edit code when they spot issues, then refresh to verify.
Setup
Parse $ARGUMENTS for:
- URL or port (optional): full URL or just a port number (e.g.
5560becomeshttp://localhost:5560) - Page (optional): where to navigate after login (e.g. "agents page", "run plans")
If not provided, check for .dev-port file or ask the user.
Tools
Use only mcp__playwright-headed__* tools. Never use mcp__playwright__* (headless). The user must see the browser.
Key tools:
mcp__playwright-headed__browser_navigate— go to a URLmcp__playwright-headed__browser_snapshot— read page state (preferred over screenshots)mcp__playwright-headed__browser_click— click elements by refmcp__playwright-headed__browser_type— type into inputs by refmcp__playwright-headed__browser_take_screenshot— only when user asks to capture something
Workflow
Step 0: Track Progress
Before starting, create a task for each step below using TaskCreate. Chain sequential steps with addBlockedBy. As you work, update each task's status to in_progress when starting it and completed when done.
1. Launch and authenticate
Navigate to the app URL. Take a snapshot to see the page state.
If you land on a login/signup page:
- Check
scripts/verify-browser-test.jsin the project for test credentials - Register or sign in with those credentials
- Complete any onboarding flow (pick quick defaults)
- Navigate to the main app
2. Navigate to the requested page
If the user specified a page, navigate there. Otherwise, take a snapshot and tell the user where you are.
3. Interactive loop
This is the core. Repeat:
- Snapshot the current page
- Report what's visible in 1-2 sentences — don't dump the full tree
- Wait for the user's direction
When the user gives feedback:
- Navigation: "go to X" — navigate and snapshot
- UI issue: "the fonts don't match" — read the relevant component code, edit it, tell the user to refresh (or navigate away and back)
- Interaction: "click the button" — click it and snapshot the result
- Verification: "does it look right now?" — snapshot and describe
4. Code changes
When editing code based on visual feedback:
- Read the component file first
- Make the edit
- Tell the user the change is saved — Next.js hot reload should pick it up
- Navigate or refresh to verify:
mcp__playwright-headed__browser_navigateto the same URL
Final Check
Run TaskList. If any task is not completed, go back and finish it now.
Rules
- Always use
browser_snapshotfor state awareness, not screenshots - Keep reports concise — the user can see the browser, they don't need a full description
- Don't take autonomous actions — wait for the user between steps
- When making code edits, describe the change briefly so the user knows what to look for
- If the app isn't running, tell the user and suggest
make devor the relevant start command
Related Skills
langwatch/tracing
development
VerifiedTrustedCommunity
Add LangWatch tracing and observability to your code. Use for both onboarding (instrument an entire codebase) and targeted operations (add tracing to a specific function or module). Supports Python and TypeScript with all major frameworks.
3,203SKILL.mdUpdated Apr 15, 2026
langwatch/scenarios
tools
VerifiedTrustedCommunity
Test your AI agent with simulation-based scenarios. Covers writing scenario test code (Scenario SDK), creating platform scenarios (CLI or MCP), and red teaming for security vulnerabilities. Auto-detects whether to use code or platform approach based on context.
3,203SKILL.mdUpdated Apr 15, 2026
langwatch/test-compliance
testing
VerifiedTrustedCommunity
Test that your AI agent stays observational and doesn't give prescriptive advice in regulated domains (healthcare, finance, legal). Creates scenario tests for boundary enforcement and red team tests for adversarial probing. Use when your agent advises but must not prescribe.
3,203SKILL.mdUpdated Apr 15, 2026
langwatch/test-cli-usability
tools
VerifiedTrustedCommunity
Write scenario tests that verify your CLI tool is usable by AI agents. Ensures commands work non-interactively, provide clear output, and don't hang on prompts. Use when you want to prove your CLI is agent-friendly.
3,203SKILL.mdUpdated Apr 15, 2026