Skip to content
cccskills
FreePublished on GitHub

agent-browser-viewport

Size the agent-browser Chromium window to fill its current screen, leaving a configurable bottom margin for the desktop panel. Use before any agent-browser automation that needs the full screen visible without elements overlapping or scrolling off (e.g. Xero, dense web apps).

The English summary is being prepared. Showing the original description.

See how to install

Files included (2)

  • SKILL.md3.2 KB
  • scripts/fit-viewport.py3.6 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

agent-browser viewport sizing

The default agent-browser viewport (1280x720) is too short for many real-world web apps, causing elements to overlap or scroll unexpectedly. This skill sizes the agent-browser Chromium window to fill its current screen, leaving a configurable bottom margin for the desktop panel / status bar.

Usage

.agents/skills/agent-browser-viewport/scripts/fit-viewport.py        # default 50px bottom margin
.agents/skills/agent-browser-viewport/scripts/fit-viewport.py 80     # larger panel

Takes effect immediately on the current agent-browser session — no reload needed. Run once before starting automation. Re-run if the window has been moved to a different physical monitor.

Why a script, not a fixed -N fudge

agent-browser set viewport <w> <h> sets the outer Chromium window size, but Chromium then adds its tab strip + URL bar on top, so the actual window ends up larger than the value you pass. The overhead varies by Chromium version, theme, devicePixelRatio and window manager — no fixed -120 constant is reliable across machines.

How the script works

It derives Chromium's chrome overhead directly from the existing window state (no probe / resize loop, so the page layout isn't disturbed mid-fit):

  • horizontal overhead = outerWidth - innerWidth × devicePixelRatio
  • vertical overhead = outerHeight - innerHeight × devicePixelRatio

innerWidth / innerHeight are CSS pixels; outerWidth / outerHeight are device pixels. Multiplying inner by DPR brings them into the same unit, and the difference is the chrome (tab strip + URL bar + window border) in device pixels — exactly what set viewport needs as its correction.

The script then:

  1. Reads the screen the agent-browser window is currently on via window-screen-info -n .agent-browser-data (device pixels). Works correctly on multi-monitor setups.
  2. Reads the in-page innerWidth / innerHeight / outerWidth / outerHeight / devicePixelRatio via agent-browser eval.
  3. Computes overhead as above.
  4. Issues one agent-browser set viewport (screen_width - over_w, screen_height - bottom_margin - over_h) call.

The final outer window matches screen_width × (screen_height - bottom_margin) exactly (modulo half-pixel rounding at non-integer DPR).

Notes

  • The script identifies the agent-browser window by its WM_CLASS instance .agent-browser-data — Chromium sets this from the --user-data-dir path that agent-browser passes.
  • Reported screen dimensions are device pixels. agent-browser set viewport also takes device pixels, so values pass through directly. At devicePixelRatio > 1 the in-page innerWidth / innerHeight will be smaller (CSS pixels = device pixels ÷ DPR), which is expected.
  • If you need a different bottom margin (e.g. taller panel, multi-row taskbar), pass it as the first argument.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Applies local reliability, viewport, tab-safety, stale-ref, widget, and browser-boundary lessons to every agent-browser automation. Use alongside the upstream agent-browser skill whenever navigating, clicking, filling, testing, extracting, taking screenshots, or debugging any website with agent-browser.

The English summary is being prepared. Showing the original description.

aspiers/ai-config15Updated Oct 9, 2026

Create Claude Code slash commands, OpenCode command files, Pi prompt templates, and Codex custom prompts that delegate to the right subagent or skill. Use when creating new commands, porting commands across agent platforms, or refactoring existing commands to follow platform conventions.

The English summary is being prepared. Showing the original description.

aspiers/ai-config15Updated Oct 9, 2026

Adds or changes allowed commands in AI agent permission configs for OpenCode and Claude Code. Use when a command needs adding to an agent's allow list, when permission settings for existing commands need changing, when setting up a new AI tool that requires command permissions, or when the user asks to stop being prompted for a particular command.

The English summary is being prepared. Showing the original description.

aspiers/ai-config15Updated Oct 9, 2026

bc

Free

Creates a Beads issue for a described problem or piece of work without doing the work itself. Use when the user invokes `/bc` or `$bc`, or asks to file, log, or record a bead for something. To also carry out the work, use the `bx` skill instead.

The English summary is being prepared. Showing the original description.

aspiers/ai-config15Updated Oct 9, 2026

bdr

Free

Stores a persistent memory or learning with `bd remember` so it survives across sessions. Use when the user invokes `/bdr` or `$bdr`, or asks to remember, note, or persist an insight in a Beads workspace.

The English summary is being prepared. Showing the original description.

aspiers/ai-config15Updated Oct 9, 2026

beads

Free

Use when working in a repository that uses bd or Beads for durable project task tracking, issue dependencies, blocker management, multi-session handoff, or shared work memory. Trigger when the user asks to find ready work, claim or close tasks, create follow-up work, inspect blockers, recover project context, or choose between local planning and persistent project tracking.

The English summary is being prepared. Showing the original description.

aspiers/ai-config15Updated Oct 9, 2026

See all skills by aspiers

Report a problem with this skill