docs: add viewport documentation to SKILL.md (#697)
The `set viewport` command is fully implemented but missing from the agent-facing skill guide. Agents relying on SKILL.md would not know they could resize the viewport, test responsive layouts, or use retina scaling. - Add viewport commands to Essential Commands section - Add Viewport & Responsive Testing pattern with practical examples Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 4.6
parent
82386b1c60
commit
9f41545216
@@ -85,6 +85,11 @@ agent-browser download @e1 ./file.pdf # Click element to trigger downlo
|
|||||||
agent-browser wait --download ./output.zip # Wait for any download to complete
|
agent-browser wait --download ./output.zip # Wait for any download to complete
|
||||||
agent-browser --download-path ./downloads open <url> # Set default download directory
|
agent-browser --download-path ./downloads open <url> # Set default download directory
|
||||||
|
|
||||||
|
# Viewport & Device Emulation
|
||||||
|
agent-browser set viewport 1920 1080 # Set viewport size (default: 1280x720)
|
||||||
|
agent-browser set viewport 1920 1080 2 # 2x retina (same CSS size, higher res screenshots)
|
||||||
|
agent-browser set device "iPhone 14" # Emulate device (viewport + user agent)
|
||||||
|
|
||||||
# Capture
|
# Capture
|
||||||
agent-browser screenshot # Screenshot to temp dir
|
agent-browser screenshot # Screenshot to temp dir
|
||||||
agent-browser screenshot --full # Full page screenshot
|
agent-browser screenshot --full # Full page screenshot
|
||||||
@@ -219,6 +224,29 @@ AGENT_BROWSER_COLOR_SCHEME=dark agent-browser open https://example.com
|
|||||||
agent-browser set media dark
|
agent-browser set media dark
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Viewport & Responsive Testing
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Set a custom viewport size (default is 1280x720)
|
||||||
|
agent-browser set viewport 1920 1080
|
||||||
|
agent-browser screenshot desktop.png
|
||||||
|
|
||||||
|
# Test mobile-width layout
|
||||||
|
agent-browser set viewport 375 812
|
||||||
|
agent-browser screenshot mobile.png
|
||||||
|
|
||||||
|
# Retina/HiDPI: same CSS layout at 2x pixel density
|
||||||
|
# Screenshots stay at logical viewport size, but content renders at higher DPI
|
||||||
|
agent-browser set viewport 1920 1080 2
|
||||||
|
agent-browser screenshot retina.png
|
||||||
|
|
||||||
|
# Device emulation (sets viewport + user agent in one step)
|
||||||
|
agent-browser set device "iPhone 14"
|
||||||
|
agent-browser screenshot device.png
|
||||||
|
```
|
||||||
|
|
||||||
|
The `scale` parameter (3rd argument) sets `window.devicePixelRatio` without changing CSS layout. Use it when testing retina rendering or capturing higher-resolution screenshots.
|
||||||
|
|
||||||
### Visual Browser (Debugging)
|
### Visual Browser (Debugging)
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
|
|||||||
Reference in New Issue
Block a user