figloops-go-capture

Files (1)

• SKILL.md

SKILL.md (first lines)

## Setup
Resolve `FIGLOOPS_PLUGIN_DIR` from env or `.env`. If unset, abort: `"FIGLOOPS_PLUGIN_DIR is not set. Add it to .env or your shell. See README."` Scripts: `cd "<CONSUMING_REPO>" && "<PLUGIN_DIR>/node_modules/.bin/tsx" "<PLUGIN_DIR>/scripts/<name>.ts" <args>`. Always double-quote paths.

## Style
Tables for 2+ comparable fields (escape `|` → `\|`, newlines → spaces in cells). `AskUserQuestion` options carry no descriptions.

## Errors
TS exits non-zero → relay stderr verbatim, don't retry. State load fail → abort + tell user to restore backup and re-run `/figloops:init`.

Auth-gated pages: if captures show a sign-in/SSO screen instead of the real page, the target is behind auth. Two options in `figloops.config.json` under `auth` (if both set, `cdpEndpoint` wins) — see README "Auth-gated pages":
- **CDP attach** — `"auth": { "cdpEndpoint": "http://localhost:9222" }`. User quits Chrome, then runs the launcher (opens their real Chrome with the debug port + profile, navigates to the app); they ensure VPN on + signed in, leave it running:
  ```bash
  "<PLUGIN_DIR>/node_modules/.bin/tsx" "<PLUGIN_DIR>/scripts/auth-cdp.ts"
  ```
  Capture reuses that live session; figloops never closes their Chrome. Best for hard-to-reproduce VPN+SSO sessions. Capture errors with a connect hint if Chrome isn't listening.
- **storageState** — `"auth": { "storageState": "feedback/.auth/storageState.json" }`. Gitignore that path, then run the login helper (headed browser; user signs in, presses Enter to save):
  ```bash
  "<PLUGIN_DIR>/node_modules/.bin/tsx" "<PLUGIN_DIR>/scripts/auth-login.ts"
  ```
  Re-run when capture hits sign-in pages again (session expired). Capture errors with a pointer here when `storageState` is set but the file is missing.

---

## Handler

1. Mark task `[FIGLOOPS] Capture screenshots` as `in_progress` via `TaskUpdate`.

2. Run:
   ```bash
   "<PLUGIN_DIR>/node_modules/.bin/tsx" "<PLUGIN_DIR>/scripts/capture.ts"
   ```
   Parse stdout JSON: `{ round, captures: [{label, path, filename}], failed: [] }`.

3. **Preview gate.** Print a markdown table — one row per capture:

   ```
   📸 Captured N items for Round <round>:

   | # | Filename | Source | Figma frame |
   |---|---|---|---|
   | 01 | `01-login.jpg` | route | "01 - Login" |
   | 02 | `02-sign-up-modal.jpg` | scenario | "02 - Sign up modal" |

   Expected Figma layout on page "Round <round>": 3 columns wide, rows added as needed.
   ```

   Columns: `#` (2-digit, 1-indexed), `Filename`, `Source` (`route` or `scenario`), `Figma frame` (the frame name it will become). If `failed` is non-empty, append a second table:

   ```
   Failed (N):

   | Label | Error |
   |---|---|
   | Old checkout | net::ERR_ABORTED at /old-checkout |
   ```

   Then use `AskUserQuestion`:
   ```
   question: "Do these captures look right?"
   header: "Preview"
   options:
     - label: "Approve — push to Figma  (Recommended)"
     - label: "Re-capture"
     - label: "Cancel"
   ```

4. **On "Approve — push to Figma":** mark task `[FIGLOOPS] Capture screenshots` as `completed`. Run:
   ```bash
   "<PLUGIN_DIR>/node_modules/.bin/tsx" "<PLUGIN_DIR>/scripts/advance-phase.ts" push
   ```
   Then invoke skill `figloops-go-push`.

5. **On "Re-capture":** re-run step 2.

6. **On "Cancel":** stop here. Do not advance state.

From tyburrowbridge/figloops, MIT.

More from tyburrowbridge/figloops