Update skills to use view-inspect for sightmap selector discovery

The sightmap setup recipe previously used live-eval-script with JS
one-liners to discover CSS selectors — a hack born from snapshots not
exposing selector info. Replace with live-view-inspect, which returns
the full component tree with tag, id, classes, and attributes natively.

Also adds view-inspect / review-inspect to the live and session tool
catalogs, with clear guidance that these are for sightmap authoring
only — not as a general snapshot replacement.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: joelgwebber

skills/live/SKILL.md

@@ -32,6 +32,7 @@ API catalog for live browser tools (all prefixed `live-`) on the unified subtext
 | `live-view-select` | Switch to a different view |
 | `live-view-close` | Close a view |
 | `live-view-snapshot` | Component tree snapshot (no screenshot) |
+| `live-view-inspect` | Component tree with full CSS selectors — for sightmap authoring only, not general use |
 | `live-view-screenshot` | Visual screenshot of current view |
 | `live-view-resize` | Resize the viewport |
 
@@ -94,6 +95,7 @@ After every `live-connect`, check `capture_status` and respond as follows:
 
 - Always `live-view-snapshot` before interacting — you need element UIDs to click/fill.
 - `live-view-snapshot` is cheaper than `live-view-screenshot`. Prefer snapshots; use screenshots for visual evidence.
+- `live-view-inspect` is for **sightmap authoring only** — it returns verbose CSS selectors on every node. Do not use it as a general snapshot replacement. Use it once to discover selectors, write your `.sightmap/` YAML, then use `live-view-snapshot` for everything else.
 - Component names from sightmap appear in snapshots — use `[src: ...]` annotations to find source files.
 - Close connections when done to free server resources.
 

skills/recipe-sightmap-setup/SKILL.md

@@ -15,14 +15,8 @@ metadata:
 1. **Navigate to the page**: `live-view-navigate(url=...)` or `live-view-new(url=...)`
 2. **Take a baseline snapshot**: `live-view-snapshot()` to see the current a11y tree with generic roles
 3. **Identify key UI components** in the snapshot (navigation, forms, cards, modals, etc.)
-4. **Find good selectors** using `live-eval-script`:
-   ```js
-   (el) => { return el.tagName + '.' + el.className + ' ' + el.id; }
-   ```
-   Prefer `data-*` attributes when available — they're stable and semantically meaningful (e.g., `[data-component="ProductTile"]`, `[data-testid="checkout-button"]`). Check for them with:
-   ```js
-   (el) => { return JSON.stringify(Object.fromEntries([...el.attributes].filter(a => a.name.startsWith('data-')).map(a => [a.name, a.value]))); }
-   ```
+4. **Find good selectors** using `live-view-inspect()` — this returns the full component tree with CSS selectors (tag, id, classes, `data-*` attributes, `aria-*`, `href`, etc.) on every node. Use it to identify stable targeting info, then switch back to `live-view-snapshot()` for normal interaction.
+   Prefer `data-*` attributes when available — they're stable and semantically meaningful (e.g., `[data-component="ProductTile"]`, `[data-testid="checkout-button"]`).
 5. **Create `.sightmap/components.yaml`** with component definitions (see `subtext:sightmap` skill for schema)
 6. **Add memories** to key components — contextual notes that appear in a `[Guide]` section at the top of every snapshot. Focus on:
    - **Auth/access**: passwords, test accounts, login flows (e.g., `"Password is 'argus'"`)

skills/session/SKILL.md

@@ -18,6 +18,7 @@ API catalog for the session replay tools (all prefixed `review-`). These tools l
 |------|-------------|
 | `review-open` | Open a session for analysis. Returns event summaries, metadata, timestamps. |
 | `review-view` | Capture UI state at a timestamp — component tree + screenshot |
+| `review-inspect` | Component tree with full CSS selectors — for sightmap authoring only, not general use |
 | `review-diff` | Compare UI state between two timestamps |
 | `review-close` | Close the session and free resources |