helderberto/visual-validate
skills/visual-validate/SKILL.md
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.
$ install --global
skillsauthnpx skillsauth add helderberto/skills visual-validateInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 12, 2026, 2:56 AM171.5s1 file scanned
SKILL.md
- 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.
- argument-hint:
- [url]
Visual Validate
Drive 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.
Pre-loaded context
- Available MCPs: !
echo "Check via tool availability at runtime" - Branch: !
git branch --show-current - Last-changed UI files: !
git diff --name-only HEAD~1 -- '*.jsx' '*.tsx' '*.html' '*.css' 2>/dev/null | head -20
MCP Auto-Detection
At the start of the workflow, detect which MCP is available:
- Check for
chrome-devtoolsMCP tools (mcp__chrome-devtools__*) - If absent, check for
playwrightMCP tools (mcp__playwright__*or similar namespacing) - If neither → STOP with clear message: "No browser MCP available. Install
chrome-devtoolsorplaywrightMCP server to use this skill."
State the detected MCP at the start: "Using chrome-devtools MCP for visual validation."
Workflow
Phase 1 — Setup
- Confirm the dev server URL with the user (default to
http://localhost:3000if a Next.js/Vite project is detected; otherwise ask). - 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.
- Open the page via the detected MCP:
- chrome-devtools:
new_page→navigate_page - playwright: equivalent navigate tool
- chrome-devtools:
Phase 2 — Capture baseline (before)
- Take a "before" screenshot of the relevant page/component. Save reference to it.
- Capture the initial console state.
- If the user provides a specific element or component to focus on, take an element-scoped screenshot via DOM snapshot.
Phase 3 — Exercise the change
- Ask the user what interactions to validate (e.g., "click the toggle", "submit form with X data", "resize to mobile width").
- Execute interactions via MCP:
- chrome-devtools:
click,fill,hover,press_key,resize_page - playwright: equivalent tools
- chrome-devtools:
- Wait for any animations / network requests to settle (
wait_foror equivalent).
Phase 4 — Capture after
- Take "after" screenshot(s).
- Capture console messages and any new network errors via
list_console_messagesandlist_network_requests. - Run accessibility audit on the final state via
lighthouse_audit(chrome-devtools) if available.
Phase 5 — Report
- Present findings in this structure:
## Visual Validation — <feature>
**MCP**: chrome-devtools (or playwright)
**URL**: <url>
**Interactions exercised**: <list>
### Screenshots
- Before: <path or reference>
- After: <path or reference>
### Console
- Errors: <count> — <summary>
- Warnings: <count>
### Network
- Failed requests: <count>
- Slow requests (>1s): <count>
### Accessibility (if lighthouse_audit ran)
- Score: <n>
- Critical issues: <list>
### Verdict
- PASS: change works as intended, no new console errors, no a11y regressions
- FAIL: console errors / a11y regressions / unexpected visual changes — list each issue with screenshot reference
Rules
- Always auto-detect MCP at the start; never assume one is available
- Always take before + after screenshots — single screenshot is not a comparison
- Never start the dev server yourself; ask the user
- Never modify files during validation; this is read-only browser interaction
- Always close the browser page at the end (
close_page) to free resources - Capture console messages even on PASS — silent regressions surface in console first
Error Handling
- No MCP available → STOP with installation hint (chrome-devtools or playwright MCP server setup)
- Dev server unreachable → ask user to confirm URL and start the server
- Navigation timeout (>30s) → report and stop; likely a build error or wrong URL
- MCP tool errors mid-flow → report which step failed, attempt cleanup (close_page), stop
Choosing chrome-devtools vs playwright
- chrome-devtools preferred when: you need DevTools-specific features (lighthouse audit, network throttling, performance profiling, memory snapshots)
- playwright preferred when: you need cross-browser testing (Firefox, Safari/WebKit) or are validating against an existing Playwright test setup
If both are installed, this skill defaults to chrome-devtools for the richer audit surface. Override by stating "use playwright" in the user prompt.
Related Skills
helderberto/caveman
testing
VerifiedTrustedCommunity
Ultra-compressed communication mode. Cuts token usage ~75% by speaking like caveman while keeping full technical accuracy. Supports intensity levels: lite, full (default), ultra, wenyan-lite, wenyan-full, wenyan-ultra. Use when user says "caveman mode", "talk like caveman", "use caveman", "less tokens", "be brief", or invokes /caveman. Also auto-triggers when token efficiency is requested.
10SKILL.mdUpdated May 12, 2026
helderberto/handoff
documentation
VerifiedTrustedCommunity
Compact the current conversation into a handoff doc so a fresh agent can continue the work. Use when user asks to "handoff", "/handoff", "hand this off", or wants to end a session mid-task. Don't use for summarising completed work, writing PRDs/plans/ADRs, or committing changes.
8SKILL.mdUpdated May 20, 2026
helderberto/create-skill
development
VerifiedTrustedCommunity
Create new agent skills with proper structure, progressive disclosure, and bundled resources. Use when user wants to create, write, or build a new skill, or asks "make a skill for X".
8SKILL.mdUpdated May 20, 2026
helderberto/zoom-out
development
VerifiedTrustedCommunity
Tell the agent to zoom out and give broader context or a higher-level perspective. Use when you're unfamiliar with a section of code or need to understand how it fits into the bigger picture.
8SKILL.mdUpdated May 12, 2026