How do I install the Browser QA skill?

Run npx skillmds add rajanthar/browser-qa in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Browser QA safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Browser QA?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Browser QA free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Browser QA?

RajanthaR (@rajanthar) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Browser QA by rajanthar — Agent Skill

Name: Browser QA
Rating: 4.2 (5 reviews)
Author: RajanthaR

File contents

Browser QA — Automated Visual Testing & Interaction

When to Use

After deploying a feature to staging/preview
When you need to verify UI behavior across pages
Before shipping — confirm layouts, forms, interactions actually work
When reviewing PRs that touch frontend code
Accessibility audits and responsive testing

How It Works

Uses the browser automation MCP (claude-in-chrome, Playwright, or Puppeteer) to interact with live pages like a real user.

Phase 1: Smoke Test

1. Navigate to target URL
2. Check for console errors (filter noise: analytics, third-party)
3. Verify no 4xx/5xx in network requests
4. Screenshot above-the-fold on desktop + mobile viewport
5. Check Core Web Vitals: LCP < 2.5s, CLS < 0.1, INP < 200ms

Phase 2: Interaction Test

1. Click every nav link — verify no dead links
2. Submit forms with valid data — verify success state
3. Submit forms with invalid data — verify error state
4. Test auth flow: login → protected page → logout
5. Test critical user journeys (checkout, onboarding, search)

Phase 3: Visual Regression

1. Screenshot key pages at 3 breakpoints (375px, 768px, 1440px)
2. Compare against baseline screenshots (if stored)
3. Flag layout shifts > 5px, missing elements, overflow
4. Check dark mode if applicable

Phase 4: Accessibility

1. Run axe-core or equivalent on each page
2. Flag WCAG AA violations (contrast, labels, focus order)
3. Verify keyboard navigation works end-to-end
4. Check screen reader landmarks

Output Format

## QA Report — [URL] — [timestamp]

### Smoke Test
- Console errors: 0 critical, 2 warnings (analytics noise)
- Network: all 200/304, no failures
- Core Web Vitals: LCP 1.2s ✓, CLS 0.02 ✓, INP 89ms ✓

### Interactions
- [✓] Nav links: 12/12 working
- [✗] Contact form: missing error state for invalid email
- [✓] Auth flow: login/logout working

### Visual
- [✗] Hero section overflows on 375px viewport
- [✓] Dark mode: all pages consistent

### Accessibility
- 2 AA violations: missing alt text on hero image, low contrast on footer links

### Verdict: SHIP WITH FIXES (2 issues, 0 blockers)

Integration

Works with any browser MCP:

mChild__claude-in-chrome__* tools (preferred — uses your actual Chrome)
Playwright via mcp__browserbase__*
Direct Puppeteer scripts

Pair with /canary-watch for post-deploy monitoring.

---name: browser-qadescription: Use this skill to automate visual testing and UI interaction verification using browser automation after deploying features.--- # Browser QA — Automated Visual Testing & Interaction ## When to Use - After deploying a feature to staging/preview - When you need to verify UI behavior across pages - Before shipping — confirm layouts, forms, interactions actually work - When reviewing PRs that touch frontend code - Accessibility audits and responsive testing ## How It Works Uses the browser automation MCP (claude-in-chrome, Playwright, or Puppeteer) to interact with live pages like a real user. ### Phase 1: Smoke Test ``` 1. Navigate to target URL 2. Check for console errors (filter noise: analytics, third-party) 3. Verify no 4xx/5xx in network requests 4. Screenshot above-the-fold on desktop + mobile viewport 5. Check Core Web Vitals: LCP < 2.5s, CLS < 0.1, INP < 200ms ``` ### Phase 2: Interaction Test ``` 1. Click every nav link — verify no dead links 2. Submit forms with valid data — verify success state 3. Submit forms with invalid data — verify error state 4. Test auth flow: login → protected page → logout 5. Test critical user journeys (checkout, onboarding, search) ``` ### Phase 3: Visual Regression ``` 1. Screenshot key pages at 3 breakpoints (375px, 768px, 1440px) 2. Compare against baseline screenshots (if stored) 3. Flag layout shifts > 5px, missing elements, overflow 4. Check dark mode if applicable ``` ### Phase 4: Accessibility ``` 1. Run axe-core or equivalent on each page 2. Flag WCAG AA violations (contrast, labels, focus order) 3. Verify keyboard navigation works end-to-end 4. Check screen reader landmarks ``` ## Output Format ```markdown ## QA Report — [URL] — [timestamp] ### Smoke Test - Console errors: 0 critical, 2 warnings (analytics noise) - Network: all 200/304, no failures - Core Web Vitals: LCP 1.2s ✓, CLS 0.02 ✓, INP 89ms ✓ ### Interactions - [✓] Nav links: 12/12 working - [✗] Contact form: missing error state for invalid email - [✓] Auth flow: login/logout working ### Visual - [✗] Hero section overflows on 375px viewport - [✓] Dark mode: all pages consistent ### Accessibility - 2 AA violations: missing alt text on hero image, low contrast on footer links ### Verdict: SHIP WITH FIXES (2 issues, 0 blockers) ``` ## Integration Works with any browser MCP: - `mChild__claude-in-chrome__*` tools (preferred — uses your actual Chrome) - Playwright via `mcp__browserbase__*` - Direct Puppeteer scripts Pair with `/canary-watch` for post-deploy monitoring.

Frequently asked questions