From implement-pipeline
Spin up a local dev server, exercise UI routes touched by the current diff in a real browser, capture screenshots/console/network logs. Use when the user runs /browser-test or as stage 4 of /implement.
How this skill is triggered — by the user, by Claude, or both
Slash command
/implement-pipeline:browser-testThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Exercise the primary flows on each UI route changed by the current diff (vs base branch). Capture artifacts to `.claude-pipeline/artifacts/browser/`.
Exercise the primary flows on each UI route changed by the current diff (vs base branch). Capture artifacts to .claude-pipeline/artifacts/browser/.
If args provided, parse BASE, SPEC_PATH, PLAN_PATH, CHANGED_UI_FILES, ARTIFACTS_DIR. Otherwise:
git symbolic-ref refs/remotes/origin/HEAD | sed 's@^refs/remotes/origin/@@' (default main).git diff --name-only "$BASE"...HEAD | grep -E '\.(tsx|jsx|html|css)$|^(pages|app|routes|components)/'..claude-pipeline/artifacts/browser/.Infer routes. From changed files, map to URL paths. (e.g. app/settings/page.tsx → /settings; pages/users/[id].tsx → /users/123.) If unclear, ask the user.
Ensure dev server is running.
lsof -nP -iTCP -sTCP:LISTEN | grep -E ':(3000|5173|8080|4173)\s' to check common ports.package.json scripts for dev|start|serve and start it in background: npm run dev > .claude-pipeline/dev-server.log 2>&1 & (or yarn/pnpm equivalent based on lockfile). Wait up to 30s for port to open.Login wall. Try .env.test creds if present (TEST_USER, TEST_PASS). If login fails or no creds:
<@U0ADJBVPGUC> in #all_ (channel C0ACZAG5QVD) with:
<@U0ADJBVPGUC> browser test waiting on login at <localhost-url>. React with ✅ when done.
Agent tool that polls thread + channel history with exponential backoff (1m, 3m, 9m). Resume when ✅ is seen.VERDICT: ESCALATE: login-wall timeout.Exercise each route. Use the claude-in-chrome MCP tools (already on Pranav's system):
mcp__claude-in-chrome__navigate).mcp__claude-in-chrome__gif_creator (start recording before interaction, end after).mcp__claude-in-chrome__read_console_messages); look for errors/warnings introduced by the change.{route-slug}.png, {route-slug}.gif, {route-slug}.console.log in $ARTIFACTS_DIR.Evaluate. A route passes if:
End with the verdict line. List passed/failed routes inline.
Routes tested:
/settings PASS artifacts/browser/settings.png
/users/123 FAIL console error: ReferenceError: foo
VERDICT: FAIL: 1 of 2 routes failed (see above)
PASS / FAIL / ESCALATE — pick exactly one for the trailing VERDICT line.
Provides a checklist for code reviews covering functionality, security, performance, maintainability, tests, and quality. Use for pull requests, audits, team standards, and developer training.
npx claudepluginhub pranav7/domux --plugin implement-pipeline