alfredolopez80/browser-test
.claude/skills/browser-test/SKILL.md
Browser testing using Chrome DevTools MCP and Playwright for visual verification. Start dev server, navigate, screenshot, Lighthouse audit, console errors, network check. Use when: (1) verifying frontend changes, (2) accessibility auditing, (3) performance testing, (4) visual regression. Triggers: /browser-test, 'test in browser', 'visual test', 'lighthouse audit'.
$ install --global
skillsauthnpx skillsauth add alfredolopez80/multi-agent-ralph-loop browser-testInstall 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: Apr 15, 2026, 6:06 PM33.4s1 file scanned
SKILL.md
- # VERSION:
- 3.0.0
- name:
- browser-test
- description:
- Browser testing using Chrome DevTools MCP and Playwright for visual verification. Start dev server, navigate, screenshot, Lighthouse audit, console errors, network check. Use when: (1) verifying frontend changes, (2) accessibility auditing, (3) performance testing, (4) visual regression. Triggers: /browser-test, 'test in browser', 'visual test', 'lighthouse audit'.
- argument-hint:
- <url>
- user-invocable:
- true
Browser Test v3.0
Visual verification using Chrome DevTools MCP and Playwright.
Quick Start
/browser-test http://localhost:3000
/browser-test http://localhost:3000 --a11y
/browser-test http://localhost:3000 --perf
Workflow
1. Start Dev Server (if needed)
# Auto-detect package manager and start
npm run dev & # or yarn dev, bun dev
# Wait for server to be ready
2. Navigate and Screenshot
Using Playwright MCP or Chrome DevTools:
- Navigate to URL
- Take full-page screenshot
- Save to
.claude/quality-results/screenshots/
3. Console Errors Check
- Capture all console messages (errors, warnings)
- Flag any errors as BLOCKING
- Flag warnings as ADVISORY
4. Lighthouse Audit
Run via Chrome DevTools MCP:
- Performance score (target: > 90)
- Accessibility score (target: > 90)
- Best Practices score (target: > 90)
- SEO score (target: > 90)
5. Network Check
- Verify no failed requests (4xx, 5xx)
- Check for oversized assets (> 500KB)
- Verify no mixed content (HTTP on HTTPS)
Output Format
Browser Test Report — http://localhost:3000
=============================================
Screenshot: .claude/quality-results/screenshots/2026-04-04-home.png
Console: 0 errors, 2 warnings
Lighthouse: Perf 94 | A11y 98 | BP 100 | SEO 92
Network: 23 requests, 0 failed, largest: 145KB
---------------------------------------------
RESULT: PASS (0 blocking, 2 advisory)
Integration Points
| Skill | How | |---|---| | /gates Stage 5 | BROWSER validation (advisory for frontend) | | Orchestrator Step 7 | Include browser testing for frontend tasks | | ralph-frontend | Invoke via skill, not via MCP directly |
Accessibility Audit Mode (--a11y) (v3.0 — Item 13)
/browser-test http://localhost:3000 --a11y
Runs axe-core via Lighthouse accessibility audit:
- WCAG 2.1 AA compliance check
- Color contrast violations
- Missing alt text, labels, ARIA roles
- Keyboard navigation traps
- Focus management issues
Output blocked in ralph-frontend quality gate when score < 90.
Reference: docs/reference/accessibility-checklist.md
Visual Regression Mode (v3.0 — Item 14)
Screenshots saved to .claude/quality-results/screenshots/ with timestamp.
For visual comparison between runs:
# Compare current vs previous screenshot
mcp__zai-mcp-server__ui_diff_check(before_image, after_image)
Screenshots are gitignored (.claude/quality-results in .gitignore).
Anti-Rationalization
| Excuse | Rebuttal | |---|---| | "It looks fine in the code" | Visual bugs are invisible in code review. Test in browser. | | "Lighthouse is too strict" | Lighthouse catches real user experience issues. | | "Console warnings don't matter" | Warnings become errors in strict mode and for users. | | "Accessibility is for later" | WCAG 2.1 AA is mandatory, not optional. |
Related Skills
alfredolopez80/vault
development
VerifiedTrustedCommunity
Living knowledge base management. Actions: search (query vault), save (store learning), index (update indices), compile (raw->wiki->rules graduation), init (create vault structure). Follows Karpathy pipeline: ingest->compile->query. Use when: (1) searching accumulated knowledge, (2) saving learnings, (3) compiling raw notes into wiki, (4) initializing a new vault. Triggers: /vault, 'vault search', 'knowledge base', 'save learning'.
121SKILL.mdUpdated Apr 15, 2026
alfredolopez80/spec
testing
VerifiedTrustedCommunity
Produce a verifiable technical specification before coding. 6 mandatory sections: Interfaces, Behaviors, Invariants (from Aristotle Phase 2), File Plan, Test Plan, Exit Criteria (executable bash commands + expected results). Use when: (1) before implementing features with complexity > 4, (2) as Step 1.5 in orchestrator workflow, (3) when requirements need formalization. Triggers: /spec, 'create spec', 'write specification', 'technical spec'.
121SKILL.mdUpdated Apr 15, 2026
alfredolopez80/ship
testing
VerifiedTrustedCommunity
Pre-launch shipping checklist orchestrating /gates, /security, /browser-test, /perf. Ensures nothing ships without passing all quality checks. Use when: (1) before deploying, (2) before merging to main, (3) before release. Triggers: /ship, 'ship it', 'ready to deploy', 'pre-launch check'.
121SKILL.mdUpdated Apr 15, 2026
alfredolopez80/perf
development
VerifiedTrustedCommunity
Performance optimization skill. Core Web Vitals via Lighthouse, bundle size analysis, metrics tracking over time. Use when: (1) optimizing frontend performance, (2) analyzing bundle size, (3) tracking metrics regression. Triggers: /perf, 'performance audit', 'core web vitals', 'bundle size'.
121SKILL.mdUpdated Apr 15, 2026