chore(ai-workflow): require cross-browser playwright checks

.claude/agents/browser-check.md

@@ -1,7 +1,7 @@
 ---
 name: browser-check
 model: haiku
-description: Verifies UI changes in the browser using playwright-cli. Use after making visual or interaction changes to React components, CSS, layouts, or routing to confirm they render and behave correctly.
+description: Verifies UI changes in the browser using playwright-cli across Blink, Gecko, and WebKit. Use after making visual or interaction changes to React components, CSS, layouts, or routing to confirm they render and behave correctly.
 ---
 
 You are a browser tester for the 5chan project. You verify that UI changes work correctly by checking the running dev server with playwright-cli.
@@ -27,14 +27,15 @@ Default to a fresh isolated `playwright-cli` browser session. If the requested v
 
 ### Step 2: Navigate and Snapshot
 
-Use playwright-cli to check the relevant page:
+Use playwright-cli to check the relevant page in all three browser engines with separate sessions:
 
 ```bash
-playwright-cli open http://5chan.localhost:1355
+playwright-cli -s=verify-chrome open http://5chan.localhost:1355 --browser=chrome
-playwright-cli snapshot
+playwright-cli -s=verify-firefox open http://5chan.localhost:1355 --browser=firefox
+playwright-cli -s=verify-webkit open http://5chan.localhost:1355 --browser=webkit
 ```
 
-Navigate to the specific page/route where the change should be visible.
+Navigate each engine session to the specific page/route where the change should be visible.
 
 ### Step 3: Verify the Changes
 
@@ -43,11 +44,16 @@ Based on what the parent agent asked you to check:
 - Take snapshots of the relevant UI state
 - Check that elements are present and visible
 - Interact with elements if needed (click buttons, open modals, etc.)
-- Check mobile viewport if the change is layout-related:
+- Repeat the requested checks in `chrome`, `firefox`, and `webkit`
+- Check mobile viewport in each engine if the change is layout-related:
 
 ```bash
-playwright-cli resize 375 812
+playwright-cli -s=verify-chrome resize 375 812
-playwright-cli snapshot
+playwright-cli -s=verify-chrome snapshot
+playwright-cli -s=verify-firefox resize 375 812
+playwright-cli -s=verify-firefox snapshot
+playwright-cli -s=verify-webkit resize 375 812
+playwright-cli -s=verify-webkit snapshot
 ```
 
 ### Step 4: Report Back
@@ -62,8 +68,9 @@ playwright-cli snapshot
 - description of each verification
 
 ### Results
-- [PASS/FAIL] description of what was verified
+- [PASS/FAIL] `chrome` - description of what was verified
-- [PASS/FAIL] description of what was verified
+- [PASS/FAIL] `firefox` - description of what was verified
+- [PASS/FAIL] `webkit` - description of what was verified
 
 ### Screenshots
 - Describe what the screenshots show (if taken)

.claude/skills/implement-plan/SKILL.md

@@ -66,7 +66,7 @@ After all batches complete:
 1. Run `yarn build` to confirm everything compiles
 2. Run `yarn lint` and `yarn type-check`
 3. If the plan touched React components/hooks, run `yarn doctor`
-4. For UI changes, verify in the browser with playwright-cli
+4. For UI changes, verify in the browser with `playwright-cli` across `chrome`, `firefox`, and `webkit`, plus a mobile viewport flow in each engine when relevant
 
 ### 6. Report
 

.claude/skills/playwright-cli/SKILL.md

@@ -6,6 +6,22 @@ allowed-tools: Bash(playwright-cli:*)
 
 # Browser Automation with playwright-cli
 
+## Cross-Browser UI Verification
+
+When using `playwright-cli` to verify rendering, styling, layout, or interactions in this repo, run the relevant flow in all three major browser engines:
+
+- `chrome` for Blink
+- `firefox` for Gecko
+- `webkit` for Safari/WebKit coverage
+
+Use separate named sessions per engine, compare the results, and record any engine-specific differences instead of treating Chromium output as sufficient.
+
+```bash
+playwright-cli -s=verify-chrome open http://example.com --browser=chrome
+playwright-cli -s=verify-firefox open http://example.com --browser=firefox
+playwright-cli -s=verify-webkit open http://example.com --browser=webkit
+```
+
 ## Quick start
 
 ```bash

.claude/skills/review-and-merge-pr/SKILL.md

@@ -89,7 +89,7 @@ After code changes, follow repo verification rules from `AGENTS.md`:
 - run `yarn build`, `yarn lint`, and `yarn type-check`
 - run `yarn test` after adding or changing tests
 - run `yarn doctor` after React UI logic changes
-- use `playwright-cli` for UI/visual changes on desktop and mobile
+- use `playwright-cli` for UI/visual changes across `chrome`, `firefox`, and `webkit`, plus a mobile viewport flow in each engine when relevant
 
 ### 5. Report back on the PR before merging
 

.codex/agents/browser-check.toml

@@ -6,6 +6,7 @@ Verify only the route, user flow, and acceptance criteria the parent agent gives
 Use playwright-cli against the already-running local app at http://5chan.localhost:1355 unless the parent agent gives a different URL. Never start, restart, or stop the dev server.
 Default to a fresh isolated playwright-cli browser session. If verification depends on auth, cookies, extensions, open tabs, or other existing browser state and the parent agent did not specify session mode, stop and ask whether to use a fresh browser or the contributor's current browser session.
 Never attach to a live personal browser session without explicit permission. If current-session reuse is requested, use the supported attach path only when available; otherwise report the limitation instead of silently switching modes.
-Check desktop and mobile viewport when the request touches layout, responsiveness, or touch interactions.
+Run the requested verification flow in all three main browser engines: chrome/Blink, firefox/Gecko, and webkit/Safari. Use separate named playwright-cli sessions per engine unless the parent agent explicitly requires a different attach mode.
-Return concrete PASS/FAIL findings with the route, actions taken, and evidence observed. Do not modify application code or expand the audit beyond the requested flow.
+Check desktop and mobile viewport in each browser engine when the request touches layout, responsiveness, or touch interactions.
+Return concrete PASS/FAIL findings with the route, engine, actions taken, and evidence observed. Do not modify application code or expand the audit beyond the requested flow.
 """

.codex/config.toml

@@ -3,7 +3,7 @@ max_threads = 8
 max_depth = 1
 
 [agents.browser-check]
-description = "Browser verification agent for UI changes using playwright-cli on the local 5chan app."
+description = "Browser verification agent for UI changes using playwright-cli across Blink, Gecko, and WebKit on the local 5chan app."
 config_file = "agents/browser-check.toml"
 
 [agents.code-quality]

.codex/skills/implement-plan/SKILL.md

@@ -66,7 +66,7 @@ After all batches complete:
 1. Run `yarn build` to confirm everything compiles
 2. Run `yarn lint` and `yarn type-check`
 3. If the plan touched React components/hooks, run `yarn doctor`
-4. For UI changes, verify in the browser with playwright-cli
+4. For UI changes, verify in the browser with `playwright-cli` across `chrome`, `firefox`, and `webkit`, plus a mobile viewport flow in each engine when relevant
 
 ### 6. Report
 

.codex/skills/playwright-cli/SKILL.md

@@ -6,6 +6,22 @@ allowed-tools: Bash(playwright-cli:*)
 
 # Browser Automation with playwright-cli
 
+## Cross-Browser UI Verification
+
+When using `playwright-cli` to verify rendering, styling, layout, or interactions in this repo, run the relevant flow in all three major browser engines:
+
+- `chrome` for Blink
+- `firefox` for Gecko
+- `webkit` for Safari/WebKit coverage
+
+Use separate named sessions per engine, compare the results, and record any engine-specific differences instead of treating Chromium output as sufficient.
+
+```bash
+playwright-cli -s=verify-chrome open http://example.com --browser=chrome
+playwright-cli -s=verify-firefox open http://example.com --browser=firefox
+playwright-cli -s=verify-webkit open http://example.com --browser=webkit
+```
+
 ## Quick start
 
 ```bash

.codex/skills/review-and-merge-pr/SKILL.md

@@ -89,7 +89,7 @@ After code changes, follow repo verification rules from `AGENTS.md`:
 - run `yarn build`, `yarn lint`, and `yarn type-check`
 - run `yarn test` after adding or changing tests
 - run `yarn doctor` after React UI logic changes
-- use `playwright-cli` for UI/visual changes on desktop and mobile
+- use `playwright-cli` for UI/visual changes across `chrome`, `firefox`, and `webkit`, plus a mobile viewport flow in each engine when relevant
 
 ### 5. Report back on the PR before merging
 

.cursor/agents/browser-check.md

@@ -1,7 +1,7 @@
 ---
 name: browser-check
 model: composer-2
-description: Verifies UI changes in the browser using playwright-cli. Use after making visual or interaction changes to React components, CSS, layouts, or routing to confirm they render and behave correctly.
+description: Verifies UI changes in the browser using playwright-cli across Blink, Gecko, and WebKit. Use after making visual or interaction changes to React components, CSS, layouts, or routing to confirm they render and behave correctly.
 ---
 
 You are a browser tester for the 5chan project. You verify that UI changes work correctly by checking the running dev server with playwright-cli.
@@ -27,14 +27,15 @@ Default to a fresh isolated `playwright-cli` browser session. If the requested v
 
 ### Step 2: Navigate and Snapshot
 
-Use playwright-cli to check the relevant page:
+Use playwright-cli to check the relevant page in all three browser engines with separate sessions:
 
 ```bash
-playwright-cli open http://5chan.localhost:1355
+playwright-cli -s=verify-chrome open http://5chan.localhost:1355 --browser=chrome
-playwright-cli snapshot
+playwright-cli -s=verify-firefox open http://5chan.localhost:1355 --browser=firefox
+playwright-cli -s=verify-webkit open http://5chan.localhost:1355 --browser=webkit
 ```
 
-Navigate to the specific page/route where the change should be visible.
+Navigate each engine session to the specific page/route where the change should be visible.
 
 ### Step 3: Verify the Changes
 
@@ -43,11 +44,16 @@ Based on what the parent agent asked you to check:
 - Take snapshots of the relevant UI state
 - Check that elements are present and visible
 - Interact with elements if needed (click buttons, open modals, etc.)
-- Check mobile viewport if the change is layout-related:
+- Repeat the requested checks in `chrome`, `firefox`, and `webkit`
+- Check mobile viewport in each engine if the change is layout-related:
 
 ```bash
-playwright-cli resize 375 812
+playwright-cli -s=verify-chrome resize 375 812
-playwright-cli snapshot
+playwright-cli -s=verify-chrome snapshot
+playwright-cli -s=verify-firefox resize 375 812
+playwright-cli -s=verify-firefox snapshot
+playwright-cli -s=verify-webkit resize 375 812
+playwright-cli -s=verify-webkit snapshot
 ```
 
 ### Step 4: Report Back
@@ -62,8 +68,9 @@ playwright-cli snapshot
 - description of each verification
 
 ### Results
-- [PASS/FAIL] description of what was verified
+- [PASS/FAIL] `chrome` - description of what was verified
-- [PASS/FAIL] description of what was verified
+- [PASS/FAIL] `firefox` - description of what was verified
+- [PASS/FAIL] `webkit` - description of what was verified
 
 ### Screenshots
 - Describe what the screenshots show (if taken)

.cursor/skills/implement-plan/SKILL.md

@@ -66,7 +66,7 @@ After all batches complete:
 1. Run `yarn build` to confirm everything compiles
 2. Run `yarn lint` and `yarn type-check`
 3. If the plan touched React components/hooks, run `yarn doctor`
-4. For UI changes, verify in the browser with playwright-cli
+4. For UI changes, verify in the browser with `playwright-cli` across `chrome`, `firefox`, and `webkit`, plus a mobile viewport flow in each engine when relevant
 
 ### 6. Report
 

.cursor/skills/playwright-cli/SKILL.md

@@ -6,6 +6,22 @@ allowed-tools: Bash(playwright-cli:*)
 
 # Browser Automation with playwright-cli
 
+## Cross-Browser UI Verification
+
+When using `playwright-cli` to verify rendering, styling, layout, or interactions in this repo, run the relevant flow in all three major browser engines:
+
+- `chrome` for Blink
+- `firefox` for Gecko
+- `webkit` for Safari/WebKit coverage
+
+Use separate named sessions per engine, compare the results, and record any engine-specific differences instead of treating Chromium output as sufficient.
+
+```bash
+playwright-cli -s=verify-chrome open http://example.com --browser=chrome
+playwright-cli -s=verify-firefox open http://example.com --browser=firefox
+playwright-cli -s=verify-webkit open http://example.com --browser=webkit
+```
+
 ## Quick start
 
 ```bash

.cursor/skills/review-and-merge-pr/SKILL.md

@@ -89,7 +89,7 @@ After code changes, follow repo verification rules from `AGENTS.md`:
 - run `yarn build`, `yarn lint`, and `yarn type-check`
 - run `yarn test` after adding or changing tests
 - run `yarn doctor` after React UI logic changes
-- use `playwright-cli` for UI/visual changes on desktop and mobile
+- use `playwright-cli` for UI/visual changes across `chrome`, `firefox`, and `webkit`, plus a mobile viewport flow in each engine when relevant
 
 ### 5. Report back on the PR before merging
 

AGENTS.md

@@ -32,7 +32,7 @@ Only record items that are repo-specific, likely to recur, and have a concrete m
 | Translation key/value changed | Use `docs/agent-playbooks/translations.md` |
 | Bug report in a specific file/line | Start with git history scan from `docs/agent-playbooks/bug-investigation.md` before editing |
 | `CHANGELOG.md` or package version changed | Run `yarn blotter:check`; if needed add a concise release one-liner |
-| UI/visual behavior changed | Verify in browser with `playwright-cli`; test desktop and mobile viewport; if existing browser state matters, confirm whether to use a fresh session or the contributor's current browser session |
+| UI/visual behavior changed | Verify in browser with `playwright-cli` across Chrome/Blink, Firefox/Gecko, and WebKit/Safari; test desktop and mobile viewport; if existing browser state matters, confirm whether to use a fresh session or the contributor's current browser session |
 | Long-running task spans multiple sessions, handoffs, or spawned agents | Use `docs/agent-playbooks/long-running-agent-workflow.md`, keep a machine-readable feature list plus a progress log, and run `./scripts/agent-init.sh --smoke` before starting a fresh feature slice |
 | New reviewable feature/fix started while on `master` | Create a short-lived `codex/feature/*`, `codex/fix/*`, `codex/docs/*`, or `codex/chore/*` branch from `master` before editing; use a separate worktree only for parallel tasks |
 | New unrelated task started while another task branch is already checked out or being worked on by another agent | Create a separate worktree from `master`, create a new short-lived task branch there, and keep each agent on its own worktree/branch/PR |
@@ -118,7 +118,8 @@ src/
 - Do not commit or force-add local rebuild output. `build/` is the main generated build output in this repo; remove or restore generated output directories after local verification before committing.
 - After React UI logic changes, run: `yarn doctor`.
 - Treat React Doctor output as actionable guidance; prioritize `error` then `warning`.
-- For UI/visual changes, verify with `playwright-cli` on desktop and mobile viewport.
+- For UI/visual changes, verify with `playwright-cli` across Chrome/Blink, Firefox/Gecko, and WebKit/Safari.
+- Cover desktop and a mobile viewport flow in each browser engine when the change affects layout, touch behavior, or responsiveness.
 - For browser automation and verification, default to a fresh isolated `playwright-cli` session for reproducibility.
 - If the task depends on existing auth, cookies, extensions, open tabs, or another live browser state, explicitly confirm whether to use a fresh isolated session or the contributor's current browser session.
 - Do not assume permission to drive the contributor's active personal browser session.

docs/agent-playbooks/hooks-setup.md

@@ -55,6 +55,8 @@ exit $status
 
 By default, `scripts/agent-hooks/verify.sh` exits non-zero when `corepack yarn build`, `corepack yarn lint`, or `corepack yarn type-check` fails. Set `AGENT_VERIFY_MODE=advisory` only when you intentionally need signal from a broken tree without blocking the hook.
 
+Lifecycle hooks do not replace manual browser verification. For UI or visual changes, still run `playwright-cli` checks across `chrome`, `firefox`, and `webkit`, plus a mobile viewport flow in each engine when responsiveness or touch behavior changed.
+
 ### Yarn Install Hook
 
 ```bash

docs/agent-playbooks/skills-and-tools.md

@@ -39,6 +39,14 @@ Default to a fresh isolated browser session for normal verification. If the task
 
 Do not attach to a live personal browser session without explicit confirmation.
 
+When using `playwright-cli` for repo UI verification, run the relevant flow in all three main browser engines:
+
+- `chrome` for Blink
+- `firefox` for Gecko
+- `webkit` for Safari/WebKit coverage
+
+Use separate named sessions per engine so results stay isolated. If an engine is intentionally skipped, record why.
+
 ```bash
 npm install -g @playwright/cli@latest
 playwright-cli install --skills