diff --git a/SKILL.md b/SKILL.md index 7838996b..3d951a67 100644 --- a/SKILL.md +++ b/SKILL.md @@ -706,6 +706,9 @@ $B css ".button" "background-color" ## Snapshot System The snapshot is your primary tool for understanding and interacting with pages. +`$B` is the browse binary (resolved from `$_ROOT/.claude/skills/gstack/browse/dist/browse` or `~/.claude/skills/gstack/browse/dist/browse`). + +**Syntax:** `$B snapshot [flags]` ``` -i --interactive Interactive elements only (buttons, links, inputs) with @e refs. Also auto-enables cursor-interactive scan (-C) to capture dropdowns and popovers. @@ -721,6 +724,12 @@ The snapshot is your primary tool for understanding and interacting with pages. All flags can be combined freely. `-o` only applies when `-a` is also used. Example: `$B snapshot -i -a -C -o /tmp/annotated.png` +**Flag details:** +- `-d `: depth 0 = root element only, 1 = root + direct children, etc. Default: unlimited. Works with all other flags including `-i`. +- `-s `: any valid CSS selector (`#main`, `.content`, `nav > ul`, `[data-testid="hero"]`). Scopes the tree to that subtree. +- `-D`: outputs a unified diff (lines prefixed with `+`/`-`/` `) comparing the current snapshot against the previous one. First call stores the baseline and returns the full tree. Baseline persists across navigations until the next `-D` call resets it. +- `-a`: saves an annotated screenshot (PNG) with red overlay boxes and @ref labels drawn on each interactive element. The screenshot is a separate output from the text tree — both are produced when `-a` is used. + **Ref numbering:** @e refs are assigned sequentially (@e1, @e2, ...) in tree order. @c refs from `-C` are numbered separately (@c1, @c2, ...). diff --git a/browse/SKILL.md b/browse/SKILL.md index 2aad0cec..5bc9b02b 100644 --- a/browse/SKILL.md +++ b/browse/SKILL.md @@ -574,6 +574,9 @@ After `resume`, you get a fresh snapshot of wherever the user left off. ## Snapshot Flags The snapshot is your primary tool for understanding and interacting with pages. +`$B` is the browse binary (resolved from `$_ROOT/.claude/skills/gstack/browse/dist/browse` or `~/.claude/skills/gstack/browse/dist/browse`). + +**Syntax:** `$B snapshot [flags]` ``` -i --interactive Interactive elements only (buttons, links, inputs) with @e refs. Also auto-enables cursor-interactive scan (-C) to capture dropdowns and popovers. @@ -589,6 +592,12 @@ The snapshot is your primary tool for understanding and interacting with pages. All flags can be combined freely. `-o` only applies when `-a` is also used. Example: `$B snapshot -i -a -C -o /tmp/annotated.png` +**Flag details:** +- `-d `: depth 0 = root element only, 1 = root + direct children, etc. Default: unlimited. Works with all other flags including `-i`. +- `-s `: any valid CSS selector (`#main`, `.content`, `nav > ul`, `[data-testid="hero"]`). Scopes the tree to that subtree. +- `-D`: outputs a unified diff (lines prefixed with `+`/`-`/` `) comparing the current snapshot against the previous one. First call stores the baseline and returns the full tree. Baseline persists across navigations until the next `-D` call resets it. +- `-a`: saves an annotated screenshot (PNG) with red overlay boxes and @ref labels drawn on each interactive element. The screenshot is a separate output from the text tree — both are produced when `-a` is used. + **Ref numbering:** @e refs are assigned sequentially (@e1, @e2, ...) in tree order. @c refs from `-C` are numbered separately (@c1, @c2, ...). diff --git a/scripts/resolvers/browse.ts b/scripts/resolvers/browse.ts index b3c2eb9f..9a20447b 100644 --- a/scripts/resolvers/browse.ts +++ b/scripts/resolvers/browse.ts @@ -54,6 +54,9 @@ export function generateCommandReference(_ctx: TemplateContext): string { export function generateSnapshotFlags(_ctx: TemplateContext): string { const lines: string[] = [ 'The snapshot is your primary tool for understanding and interacting with pages.', + '`$B` is the browse binary (resolved from `$_ROOT/.claude/skills/gstack/browse/dist/browse` or `~/.claude/skills/gstack/browse/dist/browse`).', + '', + '**Syntax:** `$B snapshot [flags]`', '', '```', ]; @@ -68,6 +71,12 @@ export function generateSnapshotFlags(_ctx: TemplateContext): string { lines.push('All flags can be combined freely. `-o` only applies when `-a` is also used.'); lines.push('Example: `$B snapshot -i -a -C -o /tmp/annotated.png`'); lines.push(''); + lines.push('**Flag details:**'); + lines.push('- `-d `: depth 0 = root element only, 1 = root + direct children, etc. Default: unlimited. Works with all other flags including `-i`.'); + lines.push('- `-s `: any valid CSS selector (`#main`, `.content`, `nav > ul`, `[data-testid="hero"]`). Scopes the tree to that subtree.'); + lines.push('- `-D`: outputs a unified diff (lines prefixed with `+`/`-`/` `) comparing the current snapshot against the previous one. First call stores the baseline and returns the full tree. Baseline persists across navigations until the next `-D` call resets it.'); + lines.push('- `-a`: saves an annotated screenshot (PNG) with red overlay boxes and @ref labels drawn on each interactive element. The screenshot is a separate output from the text tree — both are produced when `-a` is used.'); + lines.push(''); lines.push('**Ref numbering:** @e refs are assigned sequentially (@e1, @e2, ...) in tree order.'); lines.push('@c refs from `-C` are numbered separately (@c1, @c2, ...).'); lines.push('');