Browser Qa
- 5k installs
- 238k repo stars
- Updated August 5, 2026
- affaan-m/everything-claude-code
browser-qa is an agent skill for post-deploy browser automation covering smoke, interaction, visual regression, and WCAG accessibility testing.
About
The browser-qa skill automates visual and interaction testing on live pages after staging or preview deploys using browser automation MCP such as claude-in-chrome, Playwright, or Puppeteer. Phase one smoke tests navigate the target URL, filter console errors, verify no 4xx or 5xx network failures, capture desktop and mobile screenshots, and check Core Web Vitals targets LCP under 2.5s, CLS under 0.1, and INP under 200ms. Phase two interaction tests click navigation links, submit valid and invalid forms, exercise auth login logout flows, and run critical user journeys like checkout or search. Phase three visual regression screenshots key pages at 375px, 768px, and 1440px breakpoints, comparing baselines and flagging layout shifts over 5px, missing elements, or overflow. Phase four accessibility runs axe-core or equivalent, flags WCAG AA violations, verifies keyboard navigation, and checks landmarks. Output follows a structured QA Report markdown template with pass fail sections per phase. Pairs with benchmark and canary-watch skills for frontend pull request workflows.
- Four QA phases: smoke test, interaction test, visual regression, and accessibility audit.
- Smoke checks console errors, network failures, screenshots, and Core Web Vitals thresholds.
- Interaction phase validates nav links, form success and error states, and auth flows end to end.
- Visual regression at 375px, 768px, and 1440px with layout shift and overflow flags.
- Outputs structured QA Report markdown with per-phase pass fail and screenshot evidence.
Browser Qa by the numbers
- 4,980 all-time installs (skills.sh)
- +241 installs in the week ending Aug 5, 2026 (Skillselion tracking)
- Ranked #277 of 2,153 Testing & QA skills by installs in the Skillselion catalog
- Security screen: MEDIUM risk (skills.sh audit)
- Data as of Aug 5, 2026 (Skillselion catalog sync)
browser-qa capabilities & compatibility
- Capabilities
- four phase browser qa workflow · core web vitals smoke thresholds · multi breakpoint visual regression capture · wcag aa axe core accessibility checks · structured markdown qa report output
- Works with
- playwright · chrome
- Use cases
- testing · frontend · ui design
What browser-qa says it does
Check Core Web Vitals: LCP < 2.5s, CLS < 0.1, INP < 200ms
Flag layout shifts > 5px, missing elements, overflow
npx skills add https://github.com/affaan-m/everything-claude-code --skill browser-qaAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 5k |
|---|---|
| repo stars | ★ 238k |
| Security audit | 2 / 3 scanners passed |
| Last updated | August 5, 2026 |
| Repository | affaan-m/everything-claude-code ↗ |
How do I verify a deployed web feature actually works across viewports, interactions, and accessibility before ship?
Automate post-deploy browser QA with smoke tests, interaction checks, visual regression, and WCAG accessibility audits on staging URLs.
Who is it for?
Frontend developers and QA engineers validating staging or preview deployments with browser automation MCP.
Skip if: Skip when you need backend API unit tests only; browser-qa targets live page UI verification.
When should I use this skill?
User deploys to staging, needs pre-ship UI verification, accessibility audit, or frontend PR browser QA.
What you get
Structured QA report with smoke, interaction, visual, and accessibility results plus screenshot evidence.
- QA Report markdown
- Viewport screenshots
- Accessibility violation list
By the numbers
- Four QA phases defined
- Three breakpoint widths 375 768 1440
- Core Web Vitals LCP CLS INP thresholds
Files
ブラウザQA — 自動ビジュアルテストと相互作用
使用時期
- ステージング/プレビューに機能をデプロイ後
- ページ全体のUIの動作を検証する必要がある場合
- 出荷前 — レイアウト、フォーム、相互作用が実際に機能することを確認
- フロントエンドコードに触れるPRをレビューする場合
- アクセシビリティ監査とレスポンシブテスト
動作方法
ブラウザオートメーションMCP（claude-in-chrome、Playwright、またはPuppeteer）を使用して、実際のユーザーのようにライブページと相互作用します。
フェーズ1：スモークテスト
1. ターゲットURLに移動
2. コンソールエラーをチェック（ノイズをフィルター：分析、サードパーティ）
3. ネットワークリクエストで4xx/5xxがないことを確認
4. デスクトップ+モバイルビューポート上の上にスクリーンショット
5. Core Web Vitalsをチェック：LCP < 2.5s、CLS < 0.1、INP < 200msフェーズ2：相互作用テスト
1. すべてのnavリンクをクリック — デッドリンクがないことを確認
2. 有効なデータでフォームを送信 — 成功状態を確認
3. 無効なデータでフォームを送信 — エラー状態を確認
4. 認証フローをテスト：ログイン→保護されたページ→ログアウト
5. 重要なユーザージャーニーをテスト（チェックアウト、オンボーディング、検索）フェーズ3：ビジュアル回帰
1. 3つのブレークポイント（375px、768px、1440px）でキーページのスクリーンショット
2. ベースラインスクリーンショット（保存されている場合）と比較
3. レイアウトシフト> 5px、要素の欠落、オーバーフローにフラグを立てる
4. 該当する場合はダークモードをチェックフェーズ4：アクセシビリティ
1. 各ページでaxe-coreまたは同等のものを実行
2. WCAG AAの違反にフラグを立てる（コントラスト、ラベル、フォーカス順）
3. キーボードナビゲーションがエンドツーエンドで機能することを確認
4. スクリーンリーダーランドマークをチェック出力形式
## QA Report — [URL] — [timestamp]
### Smoke Test
- ✓ ページが読み込まれる
- ✗ コンソールエラー：オプト不可なトラッキング警告
- ✓ Core Web Vitals OK
- [スクリーンショット]
### 相互作用テスト
- ✓ ナビゲーション機能
- ✓ フォーム検証
- ✗ モバイルメニューが開かない
### ビジュアル回帰
- ✓ デスクトップレイアウト
- ✗ モバイルで画像がオーバーフロー
### アクセシビリティ
- 1 WCAG AA: コントラスト違反
- 0 WCAG A違反統合
/benchmarkとペアリングしてパフォーマンス確認/canary-watchとペアリングしてデプロイ後の監視を自動化- PullRequestワークフローに組み込んでフロントエンドPRをキャッチ
Related skills
TddFollow test-driven development with a strict red-green-refactor loop when creating reliable features or fixing bugs.544k196k
Test Driven DevelopmentEnforce writing failing tests before any production implementation code.181k264kQaRun conversational QA sessions that turn user-reported bugs into well-written, domain-aware GitHub issues without manual ticket writing.179k196kMigrate To ShoehornAutomatically update TypeScript test files that rely on unsafe `as` type assertions by replacing them with type-safe partial objects from @total-typescript/shoehorn.164k196k
Webapp TestingVerify frontend behavior, debug UI issues, capture screenshots, and inspect logs of a running local web application using Playwright.123k165k
Playwright CliRun browser automation, generate element snapshots, inspect DOM attributes, and execute Playwright tests from the terminal.102k12.3kForks & variants (1)
Browser Qa has 1 known copy in the catalog totaling 1.4k installs. They canonicalize to this original listing.
- affaan-m - 1.4k installs
How it compares
browser-qa is an agent skill for post-deploy browser automation covering smoke, interaction, visual regression, and WCAG accessibility testing, not a generic alternative.
FAQ
Who is browser-qa for?
Developers running automated browser QA on staging or preview URLs before production release.
When should I use browser-qa?
After deploy to staging when verifying layout, forms, interactions, visual regression, or WCAG AA compliance.
Is browser-qa safe to install?
Review the Security Audits panel; browser automation runs against user-supplied deployment URLs.