本文へ移動
cccskills
無料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).

インストール方法を見る

含まれるファイル(2)

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

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

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.

日本語の概要は準備中です。原文の説明を表示しています。

aspiers/ai-config152026年10月9日 更新

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.

日本語の概要は準備中です。原文の説明を表示しています。

aspiers/ai-config152026年10月9日 更新

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.

日本語の概要は準備中です。原文の説明を表示しています。

aspiers/ai-config152026年10月9日 更新

bc

無料

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.

日本語の概要は準備中です。原文の説明を表示しています。

aspiers/ai-config152026年10月9日 更新

bdr

無料

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.

日本語の概要は準備中です。原文の説明を表示しています。

aspiers/ai-config152026年10月9日 更新

beads

無料

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.

日本語の概要は準備中です。原文の説明を表示しています。

aspiers/ai-config152026年10月9日 更新

aspiers のスキルをすべて見る

このスキルの問題を報告する