jat-verify

name	jat-verify
description	Escalatory browser verification - open the app in a real browser and test the feature you built. Use after showing "READY FOR REVIEW" when the user asks you to verify in a browser.
metadata	{"author":"jat","version":"1.0"}

/skill:jat-verify - Browser Verification

Test your work in a real browser using JAT's browser automation tools.

Usage

/skill:jat-verify                           # Auto-detect what to test
/skill:jat-verify http://localhost:5173/tasks  # Test specific URL
/skill:jat-verify /tasks                     # Test specific path

When to Use

• User asks to "verify in browser" or "actually test this"
• After showing "READY FOR REVIEW"
• NOT for static checks (tests, lint) - those are in /skill:jat-complete

Browser Tools

JAT includes browser automation tools in ~/.local/bin/:

Tool	Purpose
browser-start.js	Launch Chrome with DevTools port
browser-nav.js	Navigate to URL
browser-screenshot.js	Capture screenshot
browser-eval.js	Execute JavaScript in page
browser-pick.js	Click element by selector
browser-cookies.js	Get/set cookies
browser-wait.js	Wait for condition

Steps

STEP 1: Determine What to Test

Based on your recent work, identify:

• URL: What page to open
• Feature: What to test
• Success criteria: How to know it works

If unclear, ask the user.

STEP 2: Open Browser and Navigate

browser-start.js
browser-nav.js --url "http://localhost:5173/tasks"
browser-screenshot.js --output /tmp/verify-initial.png

Show the screenshot and describe what you see.

STEP 3: Test the Feature

Interact with what you built:

# Click elements
browser-pick.js --selector "button.create-task"

# Fill form fields
browser-eval.js "document.querySelector('input[name=title]').value = 'Test'"

# Check for elements
browser-eval.js "!!document.querySelector('.success-message')"

# Wait for content
browser-wait.js --text "Task created"

Take screenshots after each significant action.

STEP 4: Check Console for Errors

browser-eval.js "window.__errors = []; const orig = console.error; console.error = (...a) => { window.__errors.push(a.join(' ')); orig.apply(console, a); }"
# ... test the feature ...
browser-eval.js "window.__errors"

STEP 5: Report Findings

BROWSER VERIFICATION: {TASK_ID}

URL: http://localhost:5173/tasks
Feature: Task creation drawer

  [pass] Page loaded successfully
  [pass] Button visible and clickable
  [pass] Form renders correctly
  [pass] No console errors

Screenshots:
  /tmp/verify-initial.png
  /tmp/verify-after-action.png

If issues found, fix them and re-verify.

After Verification

• Passed: Return to "READY FOR REVIEW" state
• Failed: Fix issues, re-verify, then return to review state