Agent skill · Frontend

hive.browser-automation

Required before any browser_* tool call. Teaches the screenshot + browser_click_coordinate workflow that reaches shadow-DOM inputs selectors can't see, the CSS-pixel coordinate rule (not physical px), rich-text editor quirks ("send button stays disabled" failures), and CSP gotchas. Covers Chrome via CDP through the GCU Beeline extension. Skipping this causes repeated failures on LinkedIn / Reddit / X. Verified against real production sites 2026-04-11.

aden-hivegithub.com/aden-hiveGitHub ↗
claude-codeApache-2.0
Install
npx skills add aden-hive/hive --skill browser-automation --agent claude-code

Same command for any agent — swap --agent for codex, cursor, copilot.

Facts
Files in the skill folder: 1
SKILL.md size: 42 KB
Bundled scripts: none
Version: 2.0
Declared author: hive
Path: core/framework/skills/_preset_skills/browser-automation/SKILL.md
Open the folder on GitHub →
Where it comes from
Stars: 10,850
Language: Python
Read our review of the source →

Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.

Review
written from the skill's own SKILL.md · Aug 5, 2026

What it does

All GCU browser tools drive a real Chrome instance through the Beeline extension and Chrome DevTools Protocol (CDP). That means clicks, keystrokes, and screenshots are processed by the actual browser's native hit testing, focus, and layout engines — not a synthetic event layer.

How it works

  • Coordinates: tools operating on coordinates use fractions of the viewport (0..1 for both axes). Example mappings include browser_click_coordinate(x, y) and browser_hover_coordinate(x, y). Rect-returning tools return fractions and are converted to CSS pixels before dispatching to Chrome.
  • Shadow DOM: browser_click_coordinate routes through CDP hit testing to traverse shadow roots; browser_type_focused inserts text into document.activeElement; browser_shadow_query and browser_get_rect support shadow-piercing with >>> syntax. The canonical click-type loop is to click with coordinates, verify focused_element from the response, then type if editable.
  • Workflow: Start with browser_screenshot to inspect, identify target position, click via coordinates, verify focus, type into focused element with browser_type_focused(text=...), and verify via screenshots or browser_evaluate checks.
  • Typing: ALWAYS click before typing into rich-text editors; typing uses Input.insertText by default for reliability in editors like Lexical, Draft.js, and ProseMirror. If per-keystroke dispatch is needed, use use_insert_text=False to fall back to keyDown/keyUp.
  • Beforeunload: Use browser_evaluate to strip beforeunload handlers before navigating or closing tabs to avoid native confirm dialogs.

When to use it

  • Use on shadow-heavy sites where shadow boundaries block selector-based interactions.
  • When dealing with rich-text editors (X/Twitter, LinkedIn, Reddit, Gmail, Slack, Discord, Notion, Monaco) to ensure input events are properly registered.
  • When needing reliable coordinates-based interaction that leverages CDP hit testing for accurate focus within complex layouts.

What it can touch

  • Tools: browser_screenshot, browser_click_coordinate, browser_type_focused, browser_type, browser_shadow_query, browser_get_rect, browser_navigate, browser_wait_for_selector, browser_evaluate. The skill notes these as ways to drive a real Chrome instance via Beeline and CDP.

Caveats

  • The workflow relies on CDP/Beeline and assumes a Chrome instance is available; shadow-heavy contexts require coordinate-based targeting rather than plain selector-based clicks.
  • The typing reliability depends on default use_insert_text behavior; per-keystroke dispatch requires an option flag change.
  • Some sites with dynamic SPAs may require navigation sleep to hydrate before interacting.
From the SKILL.md

# GCU Browser Automation All GCU browser tools drive a real Chrome instance through the Beeline extension and Chrome DevTools Protocol (CDP). That means clicks, keystrokes, and screenshots are processed by the actual browser's native hit testing, focus, and layout engines — **not** a synthetic event layer. Understanding this unlocks strategies that make hard sites easy. ## Coordinates Every browser tool that takes or returns coordinates operates in **fractions of the viewport (0..1 for both axes)**. Read a target's proportional position off `browser_screenshot` — "this button is about 35% from the left and 20% from the top" → pass `(0.35, 0.20)`. Rect-returning tools (`browser_get_rect`, `browser_shadow_query`, and the `rect` inside `focused_element`) also return fractions. The tools convert to CSS pixels internally before dispatching to Chrome. ``` browser_screenshot() → image + cssWidth/cssHeight in meta browser_click_coordinate(x, y) → x, y are fractions 0..1 browser_hover_coordinate(x, y) → fractions browser_press_at(x, y, key) → fractions browser_get_rect(selector) → rect → rect.cx / rect.cy are fractions browser_shadow_query(...) → rect → same ``` **Why fractions:** every vis

What's inside
Steps it walks through
  1. Coordinates
  2. Screenshot + coordinates is shadow-agnostic — prefer it on shadow-heavy sites
  3. Recommended workflow on shadow-heavy sites
  4. The click→type loop (canonical pattern)
  5. Empirically verified (2026-04-11)
  6. Shadow-piercing selectors
  7. Navigation and waiting
  8. The basics
  9. Timing expectations (measured against real sites)
  10. After navigate, always let SPA hydrate
  11. Reading pages efficiently
  12. Typing and keyboard input
  13. ALWAYS click before typing into rich-text editors
  14. Safe "click-then-type-then-verify" pattern
More from hive
All skills →
About this skill
What does the hive.browser-automation skill do?

Required before any browser_* tool call. Teaches the screenshot + browser_click_coordinate workflow that reaches shadow-DOM inputs selectors can't see, the CSS-pixel coordinate rule (not physical px), rich-text editor quirks ("send button stays disabled" failures), and CSP gotchas. Covers Chrome via CDP through the GCU Beeline extension. Skipping this causes repeated failures on LinkedIn / Reddit / X. Verified against real production sites 2026-04-11.

How do I install it?

Run `npx skills add aden-hive/hive --skill browser-automation --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.

Where does this skill come from?

From aden-hive/hive, a repository with 10,850 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.

Is a popular skill a good skill?

Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.

Keep going