본문으로 건너뛰기
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.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

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의 스킬 모두 보기

이 스킬의 문제 신고