agent-browser

Automate browser UI validation and capture screenshots, videos, and profiler traces.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/PixelDroid19/cells-agents --skill agent-browser-pixeldroid19
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: agent-browser
Source: https://github.com/PixelDroid19/cells-agents/tree/main/skills/agent-browser
Command: npx skills add https://github.com/PixelDroid19/cells-agents --skill agent-browser-pixeldroid19

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Validate and prove browser-visible behavior for Cells components and demos without manually driving a real browser, reducing flaky manual checks and providing repeatable visual evidence for UI changes.

Core Features & Use Cases

  • Reuse existing dev servers and CDP ports to avoid spinning up fresh browsers and preserve real runtime state.
  • Snapshot-driven interactions using compact element refs (@e1 style) to click, fill, select, and verify DOM changes with minimal context.
  • Capture structured evidence: screenshots, full-page PDFs, video recordings, and Chrome DevTools profiles for debugging and CI artifacts.
  • Manage authenticated sessions and state persistence to run automation against protected pages and reuse logins safely.
  • Use cases: visual regression checks for component demos, automated form submission and verification, profiling slow interactions, and recording reproducible test evidence.

Quick Start

Open the dev server, connect agent-browser to the CDP port, take an interactive snapshot, perform the desired interaction, and capture a screenshot to verify the UI change.

Frequently Asked Questions about agent-browser

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

FAQPage Schema
How do I automate browser UI validation and capture visual evidence during development?

Browser UI validation is automated by connecting to a Chromium CDP port, taking interactive DOM snapshots, performing interactions via compact element refs, and capturing screenshots or video recordings as evidence.

Can I reuse existing authenticated sessions for browser automation instead of logging in repeatedly?

Authenticated sessions can be saved and restored for browser automation, allowing you to run automated tests against protected pages and safely reuse existing logins without repeating authentication.

What's the best way to profile slow browser interactions and generate DevTools traces for debugging?

Profiling slow browser interactions is handled by connecting to the browser's CDP port and capturing Chrome DevTools profiles, providing repeatable profiler traces for debugging and CI artifacts.

Do I need a specific browser setup to run end-to-end visual regression checks with CDP?

End-to-end visual regression checks require a Chromium-based browser with CDP access and the agent-browser CLI, allowing you to reuse existing dev servers and runtime state without spinning up fresh browsers.

How does snapshot-driven interaction work for automated form submission and verification?

Snapshot-driven interaction works by generating compact element references like @e1 from a DOM snapshot, which you use to click, fill, select, and verify form submission changes with minimal context overhead.

What types of structured evidence can I capture for CI artifacts during browser automation?

Structured evidence for CI artifacts includes screenshots, full-page PDFs, video recordings, and Chrome DevTools profiles, captured automatically during browser-based UI validation and test execution.