ReddRadar
Agent skill
browser-test
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 this agent skill to your Project
npx add-skill https://github.com/alfredolopez80/multi-agent-ralph-loop/tree/main/.claude/skills/browser-test
SKILL.md
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. |
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
alfredolopez80/multi-agent-ralph-loop
crafting-effective-readmes
Use when writing or improving README files. Not all READMEs are the same — provides templates and guidance matched to your audience and project type.
alfredolopez80/multi-agent-ralph-loop
stop-slop
A skill for removing AI-generated writing patterns ('slop') from prose. Eliminates telltale signs of AI writing like filler phrases, excessive hedging, overly formal language, and mechanical sentence structures. Use when: writing content that should sound human and natural, editing AI-generated drafts, cleaning up prose for publication, or any content that needs to sound authentic rather than AI-generated. Triggers: 'stop-slop', 'remove AI tells', 'clean up prose', 'make it sound human', 'edit AI writing'.
alfredolopez80/multi-agent-ralph-loop
bugs
Bug hunting with Codex CLI Use when: (1) /bugs is invoked, (2) task relates to bugs functionality.
alfredolopez80/multi-agent-ralph-loop
adversarial
Multi-Agent Adversarial Analysis System for code security
alfredolopez80/multi-agent-ralph-loop
senior-software-engineer
Global skill enforcing senior software engineering best practices
alfredolopez80/multi-agent-ralph-loop
clarify
Intensive requirement clarification using structured AskUserQuestion workflow. Gathers MUST_HAVE (blocking) and NICE_TO_HAVE (optional) information before implementation. Use when: (1) starting new feature implementation, (2) requirements are ambiguous, (3) multiple approaches possible, (4) before writing any code. Triggers: /clarify, 'clarify requirements', 'ask questions', 'gather requirements'.
Didn't find tool you were looking for?