From da5d008197bde0b2be0b923bdea73e7cb4e22ac3 Mon Sep 17 00:00:00 2001 From: Garry Tan Date: Sun, 29 Mar 2026 20:25:38 -0700 Subject: [PATCH] docs: document inspect, style, cleanup, prettyscreenshot browse commands Co-Authored-By: Claude Opus 4.6 (1M context) --- SKILL.md | 4 ++++ browse/SKILL.md | 28 ++++++++++++++++++++++++++++ browse/SKILL.md.tmpl | 24 ++++++++++++++++++++++++ 3 files changed, 56 insertions(+) diff --git a/SKILL.md b/SKILL.md index fa272905..5c6eadb3 100644 --- a/SKILL.md +++ b/SKILL.md @@ -585,6 +585,7 @@ Refs are invalidated on navigation — run `snapshot` again after `goto`. ### Interaction | Command | Description | |---------|-------------| +| `cleanup [--ads] [--cookies] [--sticky] [--social] [--all]` | Remove page clutter (ads, cookie banners, sticky elements, social widgets) | | `click ` | Click element | | `cookie =` | Set cookie on current page domain | | `cookie-import ` | Import cookies from JSON file | @@ -597,6 +598,7 @@ Refs are invalidated on navigation — run `snapshot` again after `goto`. | `press ` | Press key — Enter, Tab, Escape, ArrowUp/Down/Left/Right, Backspace, Delete, Home, End, PageUp, PageDown, or modifiers like Shift+Enter | | `scroll [sel]` | Scroll element into view, or scroll to page bottom if no selector | | `select ` | Select dropdown option by value, label, or visible text | +| `style | style --undo [N]` | Modify CSS property on element (with undo support) | | `type ` | Type into focused element | | `upload [file2...]` | Upload file(s) | | `useragent ` | Set user agent | @@ -612,6 +614,7 @@ Refs are invalidated on navigation — run `snapshot` again after `goto`. | `css ` | Computed CSS value | | `dialog [--clear]` | Dialog messages | | `eval ` | Run JavaScript from file and return result as string (path must be under /tmp or cwd) | +| `inspect [selector] [--all] [--history]` | Deep CSS inspection via CDP — full rule cascade, box model, computed styles | | `is ` | State check (visible/hidden/enabled/disabled/checked/editable/focused) | | `js ` | Run JavaScript expression and return result as string | | `network [--clear]` | Network requests | @@ -623,6 +626,7 @@ Refs are invalidated on navigation — run `snapshot` again after `goto`. |---------|-------------| | `diff ` | Text diff between pages | | `pdf [path]` | Save as PDF | +| `prettyscreenshot [--scroll-to sel|text] [--cleanup] [--hide sel...] [--width px] [path]` | Clean screenshot with optional cleanup, scroll positioning, and element hiding | | `responsive [prefix]` | Screenshots at mobile (375x812), tablet (768x1024), desktop (1280x720). Saves as {prefix}-mobile.png etc. | | `screenshot [--viewport] [--clip x,y,w,h] [selector|@ref] [path]` | Save screenshot (supports element crop via CSS/@ref, --clip region, --viewport) | diff --git a/browse/SKILL.md b/browse/SKILL.md index a9f95ec2..ed56cbbd 100644 --- a/browse/SKILL.md +++ b/browse/SKILL.md @@ -434,6 +434,30 @@ $B click @c1 # cursor-interactive ref (from -C) Refs are invalidated on navigation — run `snapshot` again after `goto`. +## CSS Inspector & Style Modification + +### Inspect element CSS +```bash +$B inspect .header # full CSS cascade for selector +$B inspect # latest picked element from sidebar +$B inspect --all # include user-agent stylesheet rules +$B inspect --history # show modification history +``` + +### Modify styles live +```bash +$B style .header background-color #1a1a1a # modify CSS property +$B style --undo # revert last change +$B style --undo 2 # revert specific change +``` + +### Clean screenshots +```bash +$B cleanup --all # remove ads, cookies, sticky, social +$B cleanup --ads --cookies # selective cleanup +$B prettyscreenshot --cleanup --scroll-to ".pricing" --width 1440 ~/Desktop/hero.png +``` + ## Full Command List ### Navigation @@ -462,6 +486,7 @@ Refs are invalidated on navigation — run `snapshot` again after `goto`. ### Interaction | Command | Description | |---------|-------------| +| `cleanup [--ads] [--cookies] [--sticky] [--social] [--all]` | Remove page clutter (ads, cookie banners, sticky elements, social widgets) | | `click ` | Click element | | `cookie =` | Set cookie on current page domain | | `cookie-import ` | Import cookies from JSON file | @@ -474,6 +499,7 @@ Refs are invalidated on navigation — run `snapshot` again after `goto`. | `press ` | Press key — Enter, Tab, Escape, ArrowUp/Down/Left/Right, Backspace, Delete, Home, End, PageUp, PageDown, or modifiers like Shift+Enter | | `scroll [sel]` | Scroll element into view, or scroll to page bottom if no selector | | `select ` | Select dropdown option by value, label, or visible text | +| `style | style --undo [N]` | Modify CSS property on element (with undo support) | | `type ` | Type into focused element | | `upload [file2...]` | Upload file(s) | | `useragent ` | Set user agent | @@ -489,6 +515,7 @@ Refs are invalidated on navigation — run `snapshot` again after `goto`. | `css ` | Computed CSS value | | `dialog [--clear]` | Dialog messages | | `eval ` | Run JavaScript from file and return result as string (path must be under /tmp or cwd) | +| `inspect [selector] [--all] [--history]` | Deep CSS inspection via CDP — full rule cascade, box model, computed styles | | `is ` | State check (visible/hidden/enabled/disabled/checked/editable/focused) | | `js ` | Run JavaScript expression and return result as string | | `network [--clear]` | Network requests | @@ -500,6 +527,7 @@ Refs are invalidated on navigation — run `snapshot` again after `goto`. |---------|-------------| | `diff ` | Text diff between pages | | `pdf [path]` | Save as PDF | +| `prettyscreenshot [--scroll-to sel|text] [--cleanup] [--hide sel...] [--width px] [path]` | Clean screenshot with optional cleanup, scroll positioning, and element hiding | | `responsive [prefix]` | Screenshots at mobile (375x812), tablet (768x1024), desktop (1280x720). Saves as {prefix}-mobile.png etc. | | `screenshot [--viewport] [--clip x,y,w,h] [selector|@ref] [path]` | Save screenshot (supports element crop via CSS/@ref, --clip region, --viewport) | diff --git a/browse/SKILL.md.tmpl b/browse/SKILL.md.tmpl index a11505ea..0a320fcd 100644 --- a/browse/SKILL.md.tmpl +++ b/browse/SKILL.md.tmpl @@ -137,6 +137,30 @@ After `resume`, you get a fresh snapshot of wherever the user left off. {{SNAPSHOT_FLAGS}} +## CSS Inspector & Style Modification + +### Inspect element CSS +```bash +$B inspect .header # full CSS cascade for selector +$B inspect # latest picked element from sidebar +$B inspect --all # include user-agent stylesheet rules +$B inspect --history # show modification history +``` + +### Modify styles live +```bash +$B style .header background-color #1a1a1a # modify CSS property +$B style --undo # revert last change +$B style --undo 2 # revert specific change +``` + +### Clean screenshots +```bash +$B cleanup --all # remove ads, cookies, sticky, social +$B cleanup --ads --cookies # selective cleanup +$B prettyscreenshot --cleanup --scroll-to ".pricing" --width 1440 ~/Desktop/hero.png +``` + ## Full Command List {{COMMAND_REFERENCE}}