mirror of https://github.com/garrytan/gstack.git
fix: improve snapshot flags docs completeness for LLM judge
Adds $B placeholder explanation, explicit syntax line, and detailed flag behavior (-d depth values, -s CSS selector syntax, -D unified diff format and baseline persistence, -a screenshot vs text output relationship). Fixes snapshot flags reference LLM eval scoring completeness < 4. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
89846594b0
commit
114924c91e
9
SKILL.md
9
SKILL.md
|
|
@ -706,6 +706,9 @@ $B css ".button" "background-color"
|
||||||
## Snapshot System
|
## Snapshot System
|
||||||
|
|
||||||
The snapshot is your primary tool for understanding and interacting with pages.
|
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.
|
-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.
|
All flags can be combined freely. `-o` only applies when `-a` is also used.
|
||||||
Example: `$B snapshot -i -a -C -o /tmp/annotated.png`
|
Example: `$B snapshot -i -a -C -o /tmp/annotated.png`
|
||||||
|
|
||||||
|
**Flag details:**
|
||||||
|
- `-d <N>`: depth 0 = root element only, 1 = root + direct children, etc. Default: unlimited. Works with all other flags including `-i`.
|
||||||
|
- `-s <sel>`: 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.
|
**Ref numbering:** @e refs are assigned sequentially (@e1, @e2, ...) in tree order.
|
||||||
@c refs from `-C` are numbered separately (@c1, @c2, ...).
|
@c refs from `-C` are numbered separately (@c1, @c2, ...).
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -574,6 +574,9 @@ After `resume`, you get a fresh snapshot of wherever the user left off.
|
||||||
## Snapshot Flags
|
## Snapshot Flags
|
||||||
|
|
||||||
The snapshot is your primary tool for understanding and interacting with pages.
|
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.
|
-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.
|
All flags can be combined freely. `-o` only applies when `-a` is also used.
|
||||||
Example: `$B snapshot -i -a -C -o /tmp/annotated.png`
|
Example: `$B snapshot -i -a -C -o /tmp/annotated.png`
|
||||||
|
|
||||||
|
**Flag details:**
|
||||||
|
- `-d <N>`: depth 0 = root element only, 1 = root + direct children, etc. Default: unlimited. Works with all other flags including `-i`.
|
||||||
|
- `-s <sel>`: 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.
|
**Ref numbering:** @e refs are assigned sequentially (@e1, @e2, ...) in tree order.
|
||||||
@c refs from `-C` are numbered separately (@c1, @c2, ...).
|
@c refs from `-C` are numbered separately (@c1, @c2, ...).
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -54,6 +54,9 @@ export function generateCommandReference(_ctx: TemplateContext): string {
|
||||||
export function generateSnapshotFlags(_ctx: TemplateContext): string {
|
export function generateSnapshotFlags(_ctx: TemplateContext): string {
|
||||||
const lines: string[] = [
|
const lines: string[] = [
|
||||||
'The snapshot is your primary tool for understanding and interacting with pages.',
|
'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('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('Example: `$B snapshot -i -a -C -o /tmp/annotated.png`');
|
||||||
lines.push('');
|
lines.push('');
|
||||||
|
lines.push('**Flag details:**');
|
||||||
|
lines.push('- `-d <N>`: depth 0 = root element only, 1 = root + direct children, etc. Default: unlimited. Works with all other flags including `-i`.');
|
||||||
|
lines.push('- `-s <sel>`: 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('**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('@c refs from `-C` are numbered separately (@c1, @c2, ...).');
|
||||||
lines.push('');
|
lines.push('');
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue