Browser

Automate browser interactions and capture console logs, network activity, and errors with Playwright.

12|Updated Aug 16, 2019
One-click install
npx skills add https://github.com/phatblat/dotfiles --skill browser-phatblat
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: Browser
Source: https://github.com/phatblat/dotfiles/tree/main/.claude/skills/Browser
Command: npx skills add https://github.com/phatblat/dotfiles --skill browser-phatblat

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides deep, always-on visibility into web page behavior, transforming browser automation from a black box into a transparent, debuggable process. It eliminates the token overhead of traditional methods by executing commands directly.

Core Features & Use Cases

  • Debug-First Automation: Captures console logs, network requests, and errors by default, providing immediate insights into page issues.
  • Efficient Interaction: Offers a code-first API for precise control over browser actions like filling forms, clicking elements, and taking screenshots.
  • Use Case: Troubleshoot a broken frontend by running a diagnostic on the problematic URL. The Skill will report console errors, failed network requests, and provide a screenshot, pinpointing the exact cause of the issue.

Quick Start

Run bun run Browse.ts https://example.com to navigate to the URL and get a full diagnostic report including a screenshot.

Frequently Asked Questions about Browser

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

FAQPage Schema
How do I debug frontend issues by capturing console logs and network requests?

Debug frontend issues by running code-first browser automation that captures console logs, network requests, and errors by default. It provides immediate visibility into web page behavior and pinpoints exact causes of failures through diagnostic reporting.

What is the best way to automate web page interaction without high token usage?

Automate web page interaction using a code-first API that executes Playwright commands directly. This approach minimizes token usage compared to traditional MCP approaches while offering precise control over actions like form filling and element clicking.

Can I use Playwright to generate diagnostic reports with screenshots for automated testing?

Yes, you can use Playwright to generate diagnostic reports with screenshots for automated testing. The Skill navigates to a URL, captures page activity, and outputs a comprehensive report including screenshots to facilitate frontend troubleshooting.

Does browser automation always capture network activity and errors by default?

Yes, browser automation captures network activity and errors by default. This debug-first approach transforms automation into a transparent process, ensuring immediate insights into page issues without requiring additional configuration.

How do I run a diagnostic on a problematic URL to troubleshoot a broken frontend?

Run a diagnostic by executing a command like bun run Browse.ts followed by the problematic URL. The Skill will navigate to the page, report console errors, identify failed network requests, and provide a screenshot for troubleshooting.