$ ~/registry/skill/affaan-m-browser-qa

SKILL

browser-qa

Name: browser-qa
Author: affaan-m

Use this skill to automate visual testing and UI interaction verification using browser automation after deploying features.

星标

★ 231,704

来源

GitHub

更新于

2026-07-21

// 安全评估低风险

仅提示词，不执行代码
开源可审计
社区验证· 231.7k

正在进行安全审计…

凭证密钥
网络外发
代码执行
数据访问
来源供应链

// 安装

复制安装指令，让 AI 自动完成配置 · 推荐新手

请帮我安装 askskill 上的 "browser-qa" 技能：
1. 下载 https://raw.githubusercontent.com/affaan-m/ECC/main/skills/browser-qa/SKILL.md
2. 保存为 ~/.claude/skills/browser-qa/SKILL.md
3. 装好后重载技能，告诉我可以用了

// 下载

下载 SKILL.md机读安装清单 ↗

// 文档

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.

// 同源资产

技能

★232k

nestjs-patterns

提供 NestJS 架构模式与最佳实践，帮助构建可维护的生产级 TypeScript 后端。

affaan-m装→

技能

★232k

kotlin-patterns

提供地道 Kotlin 模式与最佳实践，帮助构建健壮高效且易维护的应用。

affaan-m装→

技能

★232k

hipaa-compliance

帮助团队按 HIPAA 要求处理医疗隐私、安全合规与泄露应对事项

affaan-m装→

技能

★232k

ecc-guide

读取 ECC 实时仓库信息，指导用户了解代理、技能、命令与项目接入流程

affaan-m装→

技能

★232k

energy-procurement

帮助企业进行电力与燃气采购、费率优化及多场站能源成本管理

affaan-m装→

技能

★232k

social-graph-ranker

对 X 与 LinkedIn 社交图谱进行加权排序，发现暖介绍路径、桥接联系人与网络缺口。

affaan-m装→

$ loading_

请帮我安装 askskill 上的 "browser-qa" 技能： 1. 下载 https://raw.githubusercontent.com/affaan-m/ECC/main/skills/browser-qa/SKILL.md 2. 保存为 ~/.claude/skills/browser-qa/SKILL.md 3. 装好后重载技能，告诉我可以用了

// 文档

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.