External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Tommaso Casaburi
2026-04-10 14:31:49 +07:00
parent 02f8d3467e
commit a1962189d9
16 changed files with 105 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.claude/agents/browser-check.md
+17 -10
View File
@@ -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 snapshot
playwright-cli -s=verify-chrome open http://5chan.localhost:1355 --browser=chrome
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 snapshot
playwright-cli -s=verify-chrome resize 375 812
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] description of what was verified
- [PASS/FAIL] `chrome` - 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
+1 -1
View File
@@ -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
+16
View File
@@ -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
+1 -1
View File
@@ -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
+3 -2
View File
@@ -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.
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.
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.
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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+16
View File
@@ -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
+1 -1
View File
@@ -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
+17 -10
View File
@@ -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 snapshot
playwright-cli -s=verify-chrome open http://5chan.localhost:1355 --browser=chrome
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 snapshot
playwright-cli -s=verify-chrome resize 375 812
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] description of what was verified
- [PASS/FAIL] `chrome` - 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
+1 -1
View File
@@ -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
+16
View File
@@ -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
+1 -1
View File
@@ -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
+3 -2
View File
@@ -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
+2
View File
@@ -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
+8
View File
@@ -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