airi: Skill for Codex

Use Vishot with Electron

Keep product routes, selectors, window identities, and interaction scenarios in the product repository.

Workflow

1. Identify the Electron package, built main entrypoint, requested window and state, and output directory supplied by the caller.

2. Search for an existing defineScenario module. In AIRI, start with packages/scenarios-stage-tamagotchi-electron.

3. Build the application when its main entrypoint is absent or stale. For a production/file renderer, wait for the repository build command to exit successfully. Pass --settle-ms 2500 so Vishot waits through Vite bundling or renderer reloads; Vishot intentionally has no default delay.

4. Run the product scenario with vishot capture --target electron.

5. When no scenario is needed, use Vishot's direct window capture:

   pnpm exec vishot capture \
     --target electron \
     --app-entrypoint ./path/to/electron-main.js \
     --cwd . \
     --window-url '#/' \
     --settle-ms 2500 \
     --output-dir /absolute/output/main
   

6. Select a unique window with --window-url or --window-title. Omit both only when the first created window is intentionally the target.

7. If Playwright cannot discover Electron through the package-manager layout, resolve the app package's Electron binary and pass its absolute path with --electron-executable.

8. For a non-default state, create a temporary product scenario or extend the existing product-owned scenario with Playwright actions. Do not add product selectors to this skill.

9. Inspect every screenshot and confirm it depicts the intended window and state.

10. Return its stable ID, title, window identity, and absolute path to $use-vishot or the caller.

Window Sizing

Resize the native BrowserWindow through Playwright's Electron handle when a scenario needs a deterministic content size:

const size = { width: 1200, height: 900 }
const browserWindow = await electronApp.browserWindow(page)

try {
  await browserWindow.evaluate((window, target) => {
    window.setContentSize(target.width, target.height)
  }, size)
}
finally {
  await browserWindow.dispose()
}

await page.waitForFunction(target => (
  globalThis.innerWidth === target.width
  && globalThis.innerHeight === target.height
), size)