airi: Skill for Codex

Use Vishot with Web

Prefer product-owned Vishot capture roots when available. Otherwise capture a local URL directly.

Workflow

1. Identify the route, state, viewport, theme, locale, and output directory supplied by the caller.

2. Ensure Vishot's Playwright Chromium runtime exists. If Vishot reports a missing executable, run pnpm exec playwright install chromium once and retry.

3. Start the application with its repository-owned development or preview command.

4. Wait until the development server reports that it is listening, then let Vishot handle reload stability with an explicit --settle-ms 2500. Vishot intentionally has no default delay because it serves projects with different readiness contracts.

5. Run the documented scene command when the app exposes Vishot capture roots and a ready signal.

6. Otherwise capture the route directly:

   pnpm exec vishot render \
     --target browser \
     http://127.0.0.1:5173/settings \
     --width 1440 \
     --height 900 \
     --settle-ms 2500 \
     --output-dir /absolute/output/settings
   

7. Repeat for each requested route and viewport. Use --name only when URL-derived names collide or fail to describe the state.

8. Inspect each image for loading screens, stale data, iframe refusal, missing fonts, permission prompts, and animation instability.

9. Return its stable ID, title, viewport, and absolute path to $use-vishot or the caller.

Viewport Sizing

Prefer Vishot's browser dimensions when the size is known before launch:

pnpm exec vishot render \
  --target browser \
  http://127.0.0.1:5173/settings \
  --width 1440 \
  --height 900 \
  --output-dir /absolute/output/settings

Use Playwright's viewport API when a browser scenario must change responsive states during the same run:

await page.setViewportSize({ width: 390, height: 844 })
await page.waitForFunction(size => (
  globalThis.innerWidth === size.width
  && globalThis.innerHeight === size.height
), { width: 390, height: 844 })