Frontend-test — run it, drive it, measure it

Always use the playwright-cli skill for browser work (never claude-in-chrome or webapp-testing). Scope everything to the changed routes/components — testing the whole app on every diff is noise.

1. Server: reuse-or-start

Probe the repo's standard ports first (references/stacks.md — read it for ports + start commands per repo). A server already up → reuse it (note: it may serve Luc's dirty dev state — say so in the report if results look inconsistent with the diff). Nothing up → start it yourself on a free port (netstat -ano | findstr :<PORT> first, per global rules), track the PID, and always kill what you started — never leave orphaned processes. Never kill a server you didn't start.

2. Compile gate

Watch the dev-server output: compile errors and warnings get fixed before any browser work (3-strike loop, root cause first). A warning-free boot is the entry ticket.

3. Browser passes (playwright-cli)

For each affected route, in both viewports — mobile 375×812 and desktop 1440×900:

• User click-through — drive the changed flows like a user would: click, type, submit, open/close. Runtime errors fix-loop immediately.
• States — loading (throttle if needed), empty (no-data), and error states (kill the API call or use a bad ID). Each must render intentionally, not as a blank or a crash.
• Console — zero errors; warnings triaged (fix yours, report pre-existing ones).
• Layout shift — watch for visible CLS during load and interaction; screenshot offenders.
• Network waterfall — flag duplicate requests, oversized payloads, obvious request chains on the changed routes.
• Performance trace + Core Web Vitals — run a trace on the main changed route; audit against the standard thresholds: LCP ≤ 2.5s, CLS ≤ 0.1, INP ≤ 200ms. A regression caused by this diff is a finding to fix; a pre-existing miss is reported, not silently absorbed.

4. Fix loop

Same discipline as verify: full output, root cause, smallest fix, re-run only the failing check, 3 attempts per issue then FAILED + diagnosis. Forbidden suppressions apply (no silencing console errors, no skipped states).

Output

FRONTEND-TEST — <PASS | FAIL>
Server: <reused :port | started+killed :port>
<route × viewport>: <ok | fixed: what | FAILED: root cause>
Console: … | CWV: LCP/CLS/INP vs thresholds | Evidence: <screenshot paths>

Close every browser context when done.