Merge pull request #12 from fullstorydev/joel/inspect-updates

Update skills to use view-inspect for sightmap selector discovery

Author: joelgwebber

skills/live/SKILL.md

@@ -33,6 +33,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 |
 
@@ -95,6 +96,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 |