From dev-pipeline
Replicate and validate a GitHub issue by spinning up the project's local app, analyzing the issue, and systematically testing all described symptoms using browser automation. Use when: User wants to reproduce a bug, validate a GitHub issue, confirm a reported problem, or investigate whether an issue is real before working on a fix. Triggers: "replicate issue", "reproduce issue", "validate issue", "confirm bug", "test issue", "can you reproduce", "try to replicate", "verify the bug". Capability: Detects the project's dev server config, switches to main, pulls latest, starts the app, reads the GitHub issue, then uses agent-browser to systematically test every symptom and produce a findings report. NOT for: Fixing issues (only reproduces and reports), general UI testing.
How this skill is triggered — by the user, by Claude, or both
Slash command
/dev-pipeline:replicate-issueThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Systematically reproduce and validate a GitHub issue against the live app.
Systematically reproduce and validate a GitHub issue against the live app. The goal: determine whether the reported behavior is real, identify exact reproduction steps, discover any related issues, and provide actionable fix recommendations.
Issue number: $ARGUMENTS
If $ARGUMENTS is empty, ask the user for the issue number before proceeding.
# Find project root
PROJECT_ROOT=$(git rev-parse --show-toplevel)
cd "$PROJECT_ROOT"
# Stash any local changes
git stash 2>/dev/null || true
# Switch to main and pull latest
git checkout main
git pull origin main
echo "On branch: $(git branch --show-current)"
echo "Latest commit: $(git log --oneline -1)"
Read package.json to find the dev script (priority order):
DEV_CMD="${DEV_PIPELINE_START_CMD:-}"
if [ -z "$DEV_CMD" ]; then
for SCRIPT in dev start "start:dev" serve; do
if jq -e ".scripts.\"$SCRIPT\"" package.json >/dev/null 2>&1; then
DEV_CMD="$SCRIPT"
break
fi
done
fi
if [ -z "$DEV_CMD" ]; then
echo "ERROR: No dev script found in package.json. Set DEV_PIPELINE_START_CMD env var or add a 'dev' script."
exit 1
fi
echo "Dev command: $DEV_CMD"
Check env overrides, then config files, then standard defaults:
# Backend port: env override → look for PORT in scripts/.env → default 3000
BACKEND_PORT="${BACKEND_PORT:-}"
if [ -z "$BACKEND_PORT" ]; then
BACKEND_PORT=$(grep -hE "PORT=[0-9]+" package.json .env 2>/dev/null | grep -oE "PORT=[0-9]+" | head -1 | cut -d= -f2)
BACKEND_PORT="${BACKEND_PORT:-3000}"
fi
# Frontend port: env override → framework heuristic → default
FRONTEND_PORT="${FRONTEND_PORT:-}"
if [ -z "$FRONTEND_PORT" ]; then
if [ -f vite.config.ts ] || [ -f vite.config.js ] || [ -f vite.config.mjs ]; then
FRONTEND_PORT=5173
elif [ -f next.config.js ] || [ -f next.config.mjs ] || [ -f next.config.ts ]; then
FRONTEND_PORT=3000
else
FRONTEND_PORT=3000
fi
fi
echo "Backend port: $BACKEND_PORT, Frontend port: $FRONTEND_PORT"
fuser -k "$BACKEND_PORT/tcp" 2>/dev/null || true
[ "$FRONTEND_PORT" != "$BACKEND_PORT" ] && fuser -k "$FRONTEND_PORT/tcp" 2>/dev/null || true
sleep 2
! fuser "$BACKEND_PORT/tcp" 2>/dev/null && echo "Port $BACKEND_PORT is free" || echo "WARNING: Port $BACKEND_PORT still in use"
Detect the package manager, then run the detected dev script:
PKG_MGR_FILE=$(ls bun.lockb pnpm-lock.yaml yarn.lock package-lock.json 2>/dev/null | head -1)
case "$PKG_MGR_FILE" in
bun.lockb) RUNNER="bun run" ;;
pnpm-lock.yaml) RUNNER="pnpm" ;;
yarn.lock) RUNNER="yarn" ;;
package-lock.json|"") RUNNER="npm run" ;;
esac
$RUNNER "$DEV_CMD" &
DEV_PID=$!
sleep 8
# Verify backend is responding
curl -s "http://localhost:$BACKEND_PORT/" > /dev/null && echo "Backend responding on $BACKEND_PORT" || echo "WARNING: Backend not responding on $BACKEND_PORT"
# Verify frontend is responding
curl -s "http://localhost:$FRONTEND_PORT" > /dev/null && echo "Frontend responding on $FRONTEND_PORT" || echo "Note: Frontend port may have shifted (Vite auto-increments). Check the dev output."
Note: If detection fails or your project uses non-standard ports/startup, override via env vars before invoking the skill: BACKEND_PORT, FRONTEND_PORT, DEV_PIPELINE_START_CMD.
gh issue view $ARGUMENTS --json title,body,labels,comments,state
Parse the issue carefully. Extract:
Based on the issue content, create a checklist of specific things to test. For each symptom described in the issue, define:
Use the agent-browser CLI (NOT Playwright) for all browser interactions.
# 1. Navigate to the page
agent-browser open "http://localhost:$FRONTEND_PORT"
# 2. Get interactive elements
agent-browser snapshot -i
# 3. Interact using refs from the snapshot
agent-browser click @e1
agent-browser fill @e2 "text"
# 4. Re-snapshot after navigation or DOM changes
agent-browser snapshot -i
# 5. Take screenshots at every significant point
agent-browser screenshot /tmp/issue-$ARGUMENTS-{step-name}.png
/tmp/issue-$ARGUMENTS-*.pngagent-browser wait commands for network-dependent operationsIf the issue requires API testing alongside UI reproduction, use curl against the running backend:
curl -s -X POST "http://localhost:$BACKEND_PORT/<endpoint>" \
-H "Content-Type: application/json" \
-d '{"key": "value"}'
Refer to the project's API docs or routes definition for endpoint details.
For each symptom in the issue, record:
| Symptom | Reproduced? | Evidence | Notes |
|---|---|---|---|
| {symptom from issue} | YES / NO / PARTIAL | Screenshot path | {details} |
If the issue was reproduced, do a targeted codebase analysis:
Provide multiple fix options with trade-offs:
For each recommendation:
### Option N: {Short title}
**Approach**: {1-2 sentence description}
**Changes required**:
- {file}: {what changes}
- {file}: {what changes}
**Pros**:
- {benefit}
**Cons**:
- {drawback}
**Complexity**: Low / Medium / High
**Risk**: Low / Medium / High
Provide at least 2-3 options ranging from quick fix to comprehensive solution.
# Close the browser
agent-browser close
# Stop the dev server (optional — leave running if user wants to continue testing)
# kill $DEV_PID 2>/dev/null
# fuser -k "$BACKEND_PORT/tcp" 2>/dev/null
# fuser -k "$FRONTEND_PORT/tcp" 2>/dev/null
Present a final summary to the user:
# Issue #$ARGUMENTS Replication Report
## Issue: {title}
**Status**: Reproduced / Not Reproduced / Partially Reproduced
**Tested on**: main @ {commit hash}
## Reproduction Summary
{2-3 sentences describing what was tested and the outcome}
## Findings
{Detailed findings with screenshot references}
## Root Cause
{If identified — what causes the bug and why}
## Related Issues Discovered
{Any additional problems found during testing}
## Recommendations
{Summary of fix options with recommended approach}
agent-browser (Vercel Agent Browser CLI), NOT Playwright/agent-browser skill if you need a command referencecurl) to distinguish UI bugs from backend bugsagent-browser closeGuides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.
npx claudepluginhub tviles/claude-plugins --plugin dev-pipeline