Update to Vercel

{
  "name": "agent-browser-verify",
  "description": "Automated browser verification for dev servers. Triggers when a dev server starts to run a visual gut-check with agent-browser — verifies the page loads, checks for console errors, validates key UI elements, and reports pass/fail before continuing.",
  "included_files": [
    {
      "relative_path": "agents/openai.yaml",
      "size_in_bytes": 120
    }
  ],
  "skill_md_contents": "---\nname: agent-browser-verify\ndescription: Automated browser verification for dev servers. Triggers when a dev server starts to run a visual gut-check with agent-browser — verifies the page loads, checks for console errors, validates key UI elements, and reports pass/fail before continuing.\nmetadata:\n  priority: 2\n  docs:\n    - \"https://openai.com/index/introducing-codex/\"\n  pathPatterns: []\n  bashPatterns:\n    - '\\bnext\\s+dev\\b'\n    - '\\bnpm\\s+run\\s+dev\\b'\n    - '\\bpnpm\\s+dev\\b'\n    - '\\bbun\\s+run\\s+dev\\b'\n    - '\\byarn\\s+dev\\b'\n    - '\\bvite\\s*(dev)?\\b'\n    - '\\bnuxt\\s+dev\\b'\n    - '\\bvercel\\s+dev\\b'\n  promptSignals:\n    phrases:\n      - \"check the page\"\n      - \"check the browser\"\n      - \"check the site\"\n      - \"is the page working\"\n      - \"is it loading\"\n      - \"blank page\"\n      - \"white screen\"\n      - \"nothing showing\"\n      - \"page is broken\"\n      - \"screenshot the page\"\n      - \"take a screenshot\"\n      - \"check for errors\"\n      - \"console errors\"\n      - \"browser errors\"\n      - \"page is stuck\"\n      - \"page is hanging\"\n      - \"page not loading\"\n      - \"page frozen\"\n      - \"spinner not stopping\"\n      - \"page not responding\"\n      - \"page won't load\"\n      - \"page will not load\"\n      - \"nothing renders\"\n      - \"nothing rendered\"\n      - \"ui is broken\"\n      - \"screen is blank\"\n      - \"screen is white\"\n      - \"app won't load\"\n    allOf:\n      - [check, page]\n      - [check, browser]\n      - [check, site]\n      - [blank, page]\n      - [white, screen]\n      - [console, errors]\n      - [page, broken]\n      - [page, loading]\n      - [not, rendering]\n      - [page, stuck]\n      - [page, hanging]\n      - [page, frozen]\n      - [page, timeout]\n    anyOf:\n      - \"page\"\n      - \"browser\"\n      - \"screen\"\n      - \"rendering\"\n      - \"visual\"\n      - \"spinner\"\n      - \"loading\"\n    minScore: 6\n---\n\n# Dev Server Verification with agent-browser\n\n**You MUST verify the dev server with agent-browser after starting it.** Do not assume the page works just because the dev server process started. Many issues (blank pages, hydration errors, missing env vars, broken imports) are only visible in the browser. Run this verification before continuing with any other work:\n\n## Quick Verification Flow\n\n```bash\n# 1. Open the dev server\nagent-browser open http://localhost:3000\nagent-browser wait --load networkidle\n\n# 2. Screenshot for visual check\nagent-browser screenshot --annotate\n\n# 3. Check for errors\nagent-browser eval 'JSON.stringify(window.__consoleErrors || [])'\n\n# 4. Snapshot interactive elements\nagent-browser snapshot -i\n```\n\n## Verification Checklist\n\nRun each check and report results:\n\n1. **Page loads** — `agent-browser open` succeeds without timeout\n2. **No blank page** — snapshot shows meaningful content (not empty body)\n3. **No error overlay** — no Next.js/Vite error overlay detected\n4. **Console errors** — evaluate `document.querySelectorAll('[data-nextjs-dialog]')` for error modals\n5. **Key elements render** — snapshot `-i` shows expected interactive elements\n6. **Navigation works** — if multiple routes exist, verify at least the home route\n\n## Error Detection\n\n```bash\n# Check for framework error overlays\nagent-browser eval 'document.querySelector(\"[data-nextjs-dialog], .vite-error-overlay, #webpack-dev-server-client-overlay\") ? \"ERROR_OVERLAY\" : \"OK\"'\n\n# Check page isn't blank\nagent-browser eval 'document.body.innerText.trim().length > 0 ? \"HAS_CONTENT\" : \"BLANK\"'\n```\n\n## On Failure\n\nIf verification fails:\n\n1. Screenshot the error state: `agent-browser screenshot error-state.png`\n2. Capture the error overlay text or console output\n3. Close the browser: `agent-browser close`\n4. Fix the issue in code\n5. Re-run verification (max 2 retry cycles to avoid infinite loops)\n\n## Diagnosing a Hanging or Stuck Page\n\nWhen the page appears stuck (spinner, blank content after load, frozen UI), the browser is only half the story. Correlate what you see in the browser with server-side evidence:\n\n### 1. Capture Browser Evidence\n\n```bash\n# Screenshot the stuck state\nagent-browser screenshot stuck-state.png\n\n# Check for pending network requests (XHR/fetch that never resolved)\nagent-browser eval 'JSON.stringify(performance.getEntriesByType(\"resource\").filter(r => r.duration === 0).map(r => r.name))'\n\n# Check console for errors or warnings\nagent-browser eval 'JSON.stringify(window.__consoleErrors || [])'\n\n# Look for fetch calls to workflow/API routes that are pending\nagent-browser eval 'document.querySelector(\"[data-nextjs-dialog]\") ? \"ERROR_OVERLAY\" : \"OK\"'\n```\n\n### 2. Check Server Logs\n\nAfter capturing browser state, immediately check the backend:\n\n```bash\n# Stream Vercel runtime logs for the deployment\nvercel logs --follow\n\n# If using Workflow DevKit, check run status\nnpx workflow inspect runs\nnpx workflow inspect run <run_id>\n\n# Check workflow health\nnpx workflow health\n```\n\n### 3. Correlate Browser + Server\n\n| Browser Shows | Server Shows | Likely Issue |\n|--------------|-------------|-------------|\n| Spinner / loading forever | No recent function invocations | API route not being called — check fetch URL in client code |\n| Spinner / loading forever | Function started but no step logs | Workflow step is stuck — add `console.log` at step entry/exit |\n| Blank page, no errors | Build succeeded, no runtime errors | Hydration issue or missing data — check SSR vs client rendering |\n| Network request pending | 504 Gateway Timeout in logs | Function timeout — increase `maxDuration` or optimize step |\n| Console: \"Failed to fetch\" | OIDC/credential error in logs | Missing `vercel env pull` — run `vercel link && vercel env pull` |\n| Error overlay visible | Stack trace in runtime logs | Read the server error — it usually has more detail than the client |\n\n### 4. Fix and Re-verify\n\nAfter fixing the issue:\n\n```bash\n# Re-open and verify the fix\nagent-browser open http://localhost:3000\nagent-browser wait --load networkidle\nagent-browser screenshot after-fix.png\nagent-browser eval 'document.body.innerText.trim().length > 0 ? \"HAS_CONTENT\" : \"BLANK\"'\nagent-browser close\n```\n\n## On Success\n\n```bash\nagent-browser close\n```\n\nReport: \"Dev server verified — page loads, no errors detected, key UI elements render correctly.\"\n\n## Suggest Verification After Implementation\n\nWhen you finish building or implementing a feature (wrote code, created routes, set up a project), briefly let the user know they can ask you to verify everything works with a browser check. One sentence is enough. Don't force it if only a small fix or question was involved.\n"
}