affaan-m/ECC/docs/ja-JP/skills/browser-qa/SKILL.md
browser-qa
Use it for testing and design tasks; the detail page covers purpose, installation, and practical steps.
- Source repository stars
- 234,327
- Declared platforms
- 0
- Static risk flags
- 0
- Last source update
- 2026-07-27
- Source checked
- 2026-07-28
Decision brief
What it does—and where it fits
このスキルを使用して、機能をデプロイ後にブラウザ自動化を使用した自動ビジュアルテストとUI相互作用検証を自動化します。
Not for
- Tasks that require unconfirmed production actions or broad system permissions.
- Environments where the pinned source and install steps cannot be inspected.
Compatibility matrix
Platform support, with evidence labels
| Platform | Status | Evidence | What to check |
|---|---|---|---|
| Codex | Not declared | No explicit evidence | Portability before use |
| Claude Code | Not declared | No explicit evidence | Portability before use |
| Cursor | Not declared | No explicit evidence | Portability before use |
| Gemini CLI | Not declared | No explicit evidence | Portability before use |
Installation
Inspect first. Install second.
The source command is displayed only when detected. A safe inspection prompt is always available so your agent can explain every action before execution.
npx skills add https://github.com/affaan-m/ECC --skill "docs/ja-JP/skills/browser-qa"Inspect the Agent Skill "browser-qa" from https://github.com/affaan-m/ECC/blob/4e973d3eaf92d97f8d2e2d8abb39d8bdc8711b38/docs/ja-JP/skills/browser-qa/SKILL.md at commit 4e973d3eaf92d97f8d2e2d8abb39d8bdc8711b38. List every install step, command, network request, credential, file read/write, external action, and rollback step. Explain whether it fits my task. Do not install or execute anything until I approve.
Workflow
What the source asks the agent to do
- 01
使用時期
ステージング/プレビューに機能をデプロイ後
ステージング/プレビューに機能をデプロイ後ページ全体のUIの動作を検証する必要がある場合出荷前 — レイアウト、フォーム、相互作用が実際に機能することを確認 - 02
動作方法
ブラウザオートメーションMCP(claude-in-chrome、Playwright、またはPuppeteer)を使用して、実際のユーザーのようにライブページと相互作用します。
ブラウザオートメーションMCP(claude-in-chrome、Playwright、またはPuppeteer)を使用して、実際のユーザーのようにライブページと相互作用します。 - 03
フェーズ1:スモークテスト
Review the “フェーズ1:スモークテスト” section in the pinned source before continuing.
Review and apply the “フェーズ1:スモークテスト” source section.
Permission review
Static risk signals and limitations
No configured static risk pattern was detected
This is not proof of safety. Runtime behavior, indirect dependencies, and hidden external systems are outside the static scan.
Evidence record
Why each signal appears
| Signal | Value | Evidence type | Meaning |
|---|---|---|---|
| Quality score | 63/100 | Computed | Documentation, specificity, maintenance, and trust rules |
| Repository stars | 234,327 | Source | Repository attention, not individual Skill quality |
| Compatibility | 0 platforms | Source | Declared in the catalog source record |
| Usage guide | catalog record | Editorial | Generated or reviewed according to the visible evidence level |
Pinned source
Provenance and original SKILL.md
- Repository
- affaan-m/ECC
- Skill path
- docs/ja-JP/skills/browser-qa/SKILL.md
- Commit
- 4e973d3eaf92d97f8d2e2d8abb39d8bdc8711b38
- License
- MIT
- Collected
- 2026-07-28
- Default branch
- main
View the original SKILL.md
ブラウザ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をキャッチ
Alternatives
Compare before choosing
affaan-m/ECC
browser-qa
Use this skill to automate visual testing and UI interaction verification using browser automation after deploying features.
affaan-m/ECC
browser-qa
Automate visual testing and UI interaction verification using browser automation after deployment.
coreyhaines31/marketingskills
ab-testing
When the user wants to plan, design, or implement an A/B test or experiment, or build a growth experimentation program. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," "hypothesis," "should I test this," "which version is better," "test two versions," "statistical significance," "how long should I run this test," "growth experiments," "experiment velocity," "experiment backlog," "ICE score," "experimentation program
event4u-app/agent-config
design-review
Use when the user says "review the design", "check the UI", or wants a comprehensive UI/UX review. Uses a 7-phase methodology covering interaction, responsiveness, accessibility, and more.