Menu
Capture before/after UI screenshots and video for Invoker plans that modify the UI.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Generate a reusable loop instruction doc, loop driver script, and Invoker workflow from an interview. Trigger: "loop generator", "generate a loop", "invoker-loop-generator", "/invoker-loop-generator", or requests to build a reusable babysit/watch/retry loop. For benchmark/direct-output prompts with "Required output path", write the requested artifact directly to that literal path, do not ask clarifying questions, and do not validate, review-gate, or submit.
Convert a plan into an Invoker YAML plan file. Trigger: "convert to invoker", "submit to invoker", "create invoker plan", "invoker-plan-to-invoker", "/invoker-plan-to-invoker", "/plan-to-invoker", or turning a plan file into Invoker tasks. For benchmark/direct-output prompts with "Required output path", write a complete YAML document directly to that literal path; it must start with top-level name, onFinish, mergeMode, repoUrl, and tasks, never version or metadata wrappers, and must not scan, validate, submit, or discover env vars.
Create or update a pull request in this repo using the preferred PR schema, upstream-first branch workflow, and repo-specific publication rules. Trigger when asked to make a PR, update a PR body, prepare PR text, publish a stacked PR branch, or whenever a branch/PR change means the GitHub PR metadata may now be stale.
Shape code changes, workflow plans, and PR stacks so each diff is easy to review: one local claim, one safety invariant, clear architectural effect, and an explicit reason for the slice.
Land (queue/merge) a Mergify-managed PR stack safely. Trigger when asked to land, merge, ship, or queue a PR or PR stack with Mergify. Enforces that you act only on SHA-verified PR numbers — never a PR found by branch name.
Get a new machine "good to go" for Invoker and optionally wire up the Slack integration. Trigger when asked to set up Invoker, run the setup/tutorial, check the environment, fix missing tools, or configure the Slack bot ("set up slack", "/setup", "am I good to go?").
| name | visual-proof |
| description | Capture before/after UI screenshots and video for Invoker plans that modify the UI. |
Capture before/after UI screenshots and video for Invoker plans that modify the UI.
visualProof: true (i.e. it modifies packages/ui/)The script scripts/ui-visual-proof.sh provides four explicit subcommands:
Capture "before" screenshots to packages/app/e2e/visual-proof/before/.
bash scripts/ui-visual-proof.sh capture-before
Builds UI and app, runs Playwright tests, saves screenshots and video. Fails fast if build fails.
Capture "after" screenshots to packages/app/e2e/visual-proof/after/.
bash scripts/ui-visual-proof.sh capture-after
Same build and capture process as capture-before, outputs to after/ directory.
Generate diff images and side-by-side video comparison.
bash scripts/ui-visual-proof.sh compare
Requires:
before/ and after/ directories exist with matching .png filesffmpeg installed (for video comparison)compare (for per-image pixel diffs)Outputs to packages/app/e2e/visual-proof/diff/.
Generate markdown with base64-encoded before/after images.
bash scripts/ui-visual-proof.sh embed
Requires before/ and after/ directories. Outputs to packages/app/e2e/visual-proof/EMBED.md.
packages/app/e2e/visual-proof.spec.ts defines the UI states to capture. Each test case:
loadPlan, startPlan, etc.)captureScreenshot(page, 'state-name') which saves a PNG when CAPTURE_MODE is setcaptureScreenshot is defined in packages/app/e2e/fixtures/electron-app.ts. It's a no-op unless CAPTURE_MODE env var is set.
When visualProof: true is set on a plan, the merge gate in TaskExecutor.runVisualProofCapture() (in packages/executors/src/task-executor.ts) runs the capture subcommands and uploads assets to R2 via scripts/upload-pr-images.mjs
Edit packages/app/e2e/visual-proof.spec.ts and add a test case that calls captureScreenshot(page, 'my-state'). The capture subcommands will automatically include it.
Example:
test('approval modal', async ({ page }) => {
await loadPlan(page, PLAN_WITH_MANUAL_APPROVAL);
await startPlan(page);
await waitForTaskStatus(page, 'task-1', 'awaiting_approval', 30000);
await page.locator('[data-testid="rf__node-task-1"]').click();
await page.getByText('Approve').click();
await captureScreenshot(page, 'approval-modal');
});
| File | Role |
|---|---|
scripts/ui-visual-proof.sh | Capture script (build + Playwright + collect outputs) |
packages/app/e2e/visual-proof.spec.ts | Playwright spec defining UI states to capture |
packages/app/e2e/fixtures/electron-app.ts | captureScreenshot, loadPlan, startPlan helpers |
packages/app/playwright.config.ts | Playwright config (video, screenshot, timeout settings) |
packages/executors/src/task-executor.ts | runVisualProofCapture() — merge gate integration |
scripts/upload-pr-images.mjs | Upload captured assets to Cloudflare R2 |
scripts/create-pr.mjs | Create GitHub PR with uploaded visual proof |
UI-change plans must include explicit visual proof tasks, not just the visualProof: true flag.
During plan verification (Phase 1b), capture "before" screenshots on the base branch:
bash scripts/ui-visual-proof.sh capture-before
The implementation plan must include two visual-proof-related tasks:
E2E test case task (prompt): Adds a plan-specific test to visual-proof.spec.ts that
captures the exact UI state being changed. Runs in parallel with implementation tasks.
Capture task (command): Captures "after" screenshots. Depends on all
implementation tasks + the E2E test case task:
bash scripts/ui-visual-proof.sh capture-after
Each UI plan should add a test case to packages/app/e2e/visual-proof.spec.ts that targets
the exact UI state being changed.
test('<plan-slug> — <state description>', async ({ page }) => {
await loadPlan(page, MY_PLAN);
await startPlan(page);
await waitForTaskStatus(page, 'task-id', 'awaiting_approval', 30000);
await page.locator('[data-testid="rf__node-task-id"]').click();
await page.getByText('Approve').click();
await captureScreenshot(page, '<plan-slug>-<state>');
});
All from packages/app/e2e/fixtures/electron-app.ts:
| Helper | Purpose |
|---|---|
loadPlan(page, plan) | Load a plan object via IPC and wait for DAG to render |
startPlan(page) | Start plan execution via IPC |
waitForTaskStatus(page, taskId, status, timeout) | Poll until task reaches status |
captureScreenshot(page, name) | Save screenshot (only when CAPTURE_MODE is set) |
waitForStableUI(page) | Wait for animations to settle |
getTasks(page) | Get all current tasks via IPC |