{"id":"6539d67e-ca4e-44bf-8d1f-fe12ba7d84c2","shortId":"YtvpEb","kind":"skill","title":"visual-validate","tagline":"Validate UI changes in a real browser using Chrome DevTools or Playwright MCP. Takes screenshots, compares before/after, exercises interactions, captures console errors. Use when user asks to \"visual validate\", \"/hb:visual-validate\", \"check the UI\", \"screenshot before/after\", or ","description":"# Visual Validate\n\nDrive a real browser via MCP to verify a UI change works as intended. Auto-detects which browser MCP is available (`chrome-devtools` preferred, `playwright` fallback). Screenshots, interactions, and console capture confirm the change is real — not just type-checked.\n\n## Pre-loaded context\n\n- Available MCPs: !`echo \"Check via tool availability at runtime\"`\n- Branch: !`git branch --show-current`\n- Last-changed UI files: !`git diff --name-only HEAD~1 -- '*.jsx' '*.tsx' '*.html' '*.css' 2>/dev/null | head -20`\n\n## MCP Auto-Detection\n\nAt the start of the workflow, detect which MCP is available:\n\n1. Check for `chrome-devtools` MCP tools (`mcp__chrome-devtools__*`)\n2. If absent, check for `playwright` MCP tools (`mcp__playwright__*` or similar namespacing)\n3. If neither → STOP with clear message: \"No browser MCP available. Install `chrome-devtools` or `playwright` MCP server to use this skill.\"\n\nState the detected MCP at the start: \"Using chrome-devtools MCP for visual validation.\"\n\n## Workflow\n\n### Phase 1 — Setup\n\n1. Confirm the dev server URL with the user (default to `http://localhost:3000` if a Next.js/Vite project is detected; otherwise ask).\n2. If the dev server is not running, ask the user to start it. Do NOT start it automatically — port collisions are easy and dev servers are user state.\n3. Open the page via the detected MCP:\n   - chrome-devtools: `new_page` → `navigate_page`\n   - playwright: equivalent navigate tool\n\n### Phase 2 — Capture baseline (before)\n\n4. Take a \"before\" screenshot of the relevant page/component. Save reference to it.\n5. Capture the initial console state.\n6. If the user provides a specific element or component to focus on, take an element-scoped screenshot via DOM snapshot.\n\n### Phase 3 — Exercise the change\n\n7. Ask the user what interactions to validate (e.g., \"click the toggle\", \"submit form with X data\", \"resize to mobile width\").\n8. Execute interactions via MCP:\n   - chrome-devtools: `click`, `fill`, `hover`, `press_key`, `resize_page`\n   - playwright: equivalent tools\n9. Wait for any animations / network requests to settle (`wait_for` or equivalent).\n\n### Phase 4 — Capture after\n\n10. Take \"after\" screenshot(s).\n11. Capture console messages and any new network errors via `list_console_messages` and `list_network_requests`.\n12. Run accessibility audit on the final state via `lighthouse_audit` (chrome-devtools) if available.\n\n### Phase 5 — Report\n\n13. Present findings in this structure:\n\n```\n## Visual Validation — <feature>\n\n**MCP**: chrome-devtools (or playwright)\n**URL**: <url>\n**Interactions exercised**: <list>\n\n### Screenshots\n- Before: <path or reference>\n- After: <path or reference>\n\n### Console\n- Errors: <count> — <summary>\n- Warnings: <count>\n\n### Network\n- Failed requests: <count>\n- Slow requests (>1s): <count>\n\n### Accessibility (if lighthouse_audit ran)\n- Score: <n>\n- Critical issues: <list>\n\n### Verdict\n- PASS: change works as intended, no new console errors, no a11y regressions\n- FAIL: console errors / a11y regressions / unexpected visual changes — list each issue with screenshot reference\n```\n\n## Rules\n\n- Always auto-detect MCP at the start; never assume one is available\n- Always take before + after screenshots — single screenshot is not a comparison\n- Never start the dev server yourself; ask the user\n- Never modify files during validation; this is read-only browser interaction\n- Always close the browser page at the end (`close_page`) to free resources\n- Capture console messages even on PASS — silent regressions surface in console first\n\n## Error Handling\n\n- No MCP available → STOP with installation hint (chrome-devtools or playwright MCP server setup)\n- Dev server unreachable → ask user to confirm URL and start the server\n- Navigation timeout (>30s) → report and stop; likely a build error or wrong URL\n- MCP tool errors mid-flow → report which step failed, attempt cleanup (close_page), stop\n\n## Choosing chrome-devtools vs playwright\n\n- **chrome-devtools** preferred when: you need DevTools-specific features (lighthouse audit, network throttling, performance profiling, memory snapshots)\n- **playwright** preferred when: you need cross-browser testing (Firefox, Safari/WebKit) or are validating against an existing Playwright test setup\n\nIf both are installed, this skill defaults to **chrome-devtools** for the richer audit surface. Override by stating \"use playwright\" in the user prompt.","tags":["visual","validate","agent","skills","helderberto","agent-skills","ai-tools","antigravity","claude-code","cursor","developer-tools","gemini-cli"],"capabilities":["skill","source-helderberto","skill-visual-validate","topic-agent-skills","topic-ai-tools","topic-antigravity","topic-claude-code","topic-cursor","topic-developer-tools","topic-gemini-cli","topic-markdown","topic-plugin","topic-sdlc","topic-skills","topic-tracer-bullet"],"categories":["agent-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/helderberto/agent-skills/visual-validate","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add helderberto/agent-skills","source_repo":"https://github.com/helderberto/agent-skills","install_from":"skills.sh"}},"qualityScore":"0.454","qualityRationale":"deterministic score 0.45 from registry signals: · indexed on github topic:agent-skills · 8 github stars · SKILL.md body (4,423 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:09:15.308Z","embedding":null,"createdAt":"2026-05-18T13:14:55.551Z","updatedAt":"2026-05-18T19:09:15.308Z","lastSeenAt":"2026-05-18T19:09:15.308Z","tsv":"'-20':126 '/dev/null':124 '/hb':33 '/vite':226 '1':142,207,209 '10':387 '11':392 '12':409 '13':428 '1s':456 '2':123,154,232,281 '3':167,261,327 '3000':221 '30s':594 '4':285,384 '5':298,426 '6':304 '7':331 '8':352 '9':370 'a11y':476,481 'absent':156 'access':411,457 'alway':493,506,538 'anim':374 'ask':29,231,240,332,523,583 'assum':502 'attempt':615 'audit':412,419,460,638,679 'auto':60,129,495 'auto-detect':59,128,494 'automat':250 'avail':66,92,98,141,177,424,505,567 'baselin':283 'before/after':20,41 'branch':101,103 'browser':10,48,63,175,536,541,652 'build':600 'captur':23,77,282,299,385,393,551 'chang':6,55,80,109,330,467,485 'check':37,87,95,143,157 'choos':620 'chrome':12,68,146,152,180,199,270,358,421,438,573,622,627,674 'chrome-devtool':67,145,151,179,198,269,357,420,437,572,621,626,673 'cleanup':616 'clear':172 'click':340,360 'close':539,546,617 'collis':252 'compar':19 'comparison':516 'compon':313 'confirm':78,210,586 'consol':24,76,302,394,403,448,473,479,552,561 'context':91 'critic':463 'cross':651 'cross-brows':650 'css':122 'current':106 'data':347 'default':218,671 'detect':61,130,137,192,229,267,496 'dev':212,235,256,520,580 'devtool':13,69,147,153,181,200,271,359,422,439,574,623,628,634,675 'devtools-specif':633 'diff':113 'dom':324 'drive':45 'e.g':339 'easi':254 'echo':94 'element':311,320 'element-scop':319 'end':545 'equival':277,368,382 'error':25,400,449,474,480,563,601,607 'even':554 'execut':353 'exercis':21,328,444 'exist':661 'fail':452,478,614 'fallback':72 'featur':636 'file':111,528 'fill':361 'final':415 'find':430 'firefox':654 'first':562 'flow':610 'focus':315 'form':344 'free':549 'git':102,112 'handl':564 'head':117,125 'hint':571 'hover':362 'html':121 'initi':301 'instal':178,570,668 'intend':58,470 'interact':22,74,336,354,443,537 'issu':464,488 'jsx':119 'key':364 'last':108 'last-chang':107 'lighthous':418,459,637 'like':598 'list':402,406,486 'load':90 'localhost':220 'mcp':16,50,64,127,139,148,150,160,162,176,184,193,201,268,356,436,497,566,577,605 'mcps':93 'memori':643 'messag':173,395,404,553 'mid':609 'mid-flow':608 'mobil':350 'modifi':527 'name':115 'name-on':114 'namespac':166 'navig':274,278,592 'need':632,649 'neither':169 'network':375,399,407,451,639 'never':501,517,526 'new':272,398,472 'next.js':225 'next.js/vite':224 'one':503 'open':262 'otherwis':230 'overrid':681 'page':264,273,275,366,542,547,618 'page/component':293 'pass':466,556 'perform':641 'phase':206,280,326,383,425 'playwright':15,71,159,163,183,276,367,441,576,625,645,662,685 'port':251 'pre':89 'pre-load':88 'prefer':70,629,646 'present':429 'press':363 'profil':642 'project':227 'prompt':689 'provid':308 'ran':461 'read':534 'read-on':533 'real':9,47,82 'refer':295,491 'regress':477,482,558 'relev':292 'report':427,595,611 'request':376,408,453,455 'resiz':348,365 'resourc':550 'richer':678 'rule':492 'run':239,410 'runtim':100 'safari/webkit':655 'save':294 'scope':321 'score':462 'screenshot':18,40,73,289,322,390,445,490,510,512 'server':185,213,236,257,521,578,581,591 'settl':378 'setup':208,579,664 'show':105 'show-curr':104 'silent':557 'similar':165 'singl':511 'skill':189,670 'skill-visual-validate' 'slow':454 'snapshot':325,644 'source-helderberto' 'specif':310,635 'start':133,196,244,248,500,518,589 'state':190,260,303,416,683 'step':613 'stop':170,568,597,619 'structur':433 'submit':343 'surfac':559,680 'take':17,286,317,388,507 'test':653,663 'throttl':640 'timeout':593 'toggl':342 'tool':97,149,161,279,369,606 'topic-agent-skills' 'topic-ai-tools' 'topic-antigravity' 'topic-claude-code' 'topic-cursor' 'topic-developer-tools' 'topic-gemini-cli' 'topic-markdown' 'topic-plugin' 'topic-sdlc' 'topic-skills' 'topic-tracer-bullet' 'tsx':120 'type':86 'type-check':85 'ui':5,39,54,110 'unexpect':483 'unreach':582 'url':214,442,587,604 'use':11,26,187,197,684 'user':28,217,242,259,307,334,525,584,688 'valid':3,4,32,36,44,204,338,435,530,658 'verdict':465 'verifi':52 'via':49,96,265,323,355,401,417 'visual':2,31,35,43,203,434,484 'visual-valid':1,34 'vs':624 'wait':371,379 'warn':450 'width':351 'work':56,468 'workflow':136,205 'wrong':603 'x':346 '~1':118","prices":[{"id":"0bd8b302-99e0-4b91-8413-f58861f66822","listingId":"6539d67e-ca4e-44bf-8d1f-fe12ba7d84c2","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"helderberto","category":"agent-skills","install_from":"skills.sh"},"createdAt":"2026-05-18T13:14:55.551Z"}],"sources":[{"listingId":"6539d67e-ca4e-44bf-8d1f-fe12ba7d84c2","source":"github","sourceId":"helderberto/agent-skills/visual-validate","sourceUrl":"https://github.com/helderberto/agent-skills/tree/main/skills/visual-validate","isPrimary":false,"firstSeenAt":"2026-05-18T13:14:55.551Z","lastSeenAt":"2026-05-18T19:09:15.308Z"}],"details":{"listingId":"6539d67e-ca4e-44bf-8d1f-fe12ba7d84c2","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"helderberto","slug":"visual-validate","github":{"repo":"helderberto/agent-skills","stars":8,"topics":["agent-skills","ai","ai-tools","antigravity","claude-code","cursor","developer-tools","gemini-cli","markdown","plugin","sdlc","skills","tracer-bullet"],"license":"mit","html_url":"https://github.com/helderberto/agent-skills","pushed_at":"2026-05-14T11:37:47Z","description":"My personal SDLC toolbelt for AI coding agents — PRD to ship.","skill_md_sha":"0423ba4ad9913bcd112f5155440905725ad5cad0","skill_md_path":"skills/visual-validate/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/helderberto/agent-skills/tree/main/skills/visual-validate"},"layout":"multi","source":"github","category":"agent-skills","frontmatter":{"name":"visual-validate","description":"Validate UI changes in a real browser using Chrome DevTools or Playwright MCP. Takes screenshots, compares before/after, exercises interactions, captures console errors. Use when user asks to \"visual validate\", \"/hb:visual-validate\", \"check the UI\", \"screenshot before/after\", or finishes a UI change. Don't use for unit tests (use `tdd`), E2E user flows (use `e2e`), or backend changes."},"skills_sh_url":"https://skills.sh/helderberto/agent-skills/visual-validate"},"updatedAt":"2026-05-18T19:09:15.308Z"}}