Source profileQuality 63/100

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相互作用検証を自動化します。

Best for

    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

    PlatformStatusEvidenceWhat to check
    CodexNot declaredNo explicit evidencePortability before use
    Claude CodeNot declaredNo explicit evidencePortability before use
    CursorNot declaredNo explicit evidencePortability before use
    Gemini CLINot declaredNo explicit evidencePortability before use
    Open the compatibility checker

    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.

    Source-detected install commandSource
    npx skills add https://github.com/affaan-m/ECC --skill "docs/ja-JP/skills/browser-qa"
    Safe inspection promptEditorial

    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

    1. 01

      使用時期

      ステージング/プレビューに機能をデプロイ後

      ステージング/プレビューに機能をデプロイ後ページ全体のUIの動作を検証する必要がある場合出荷前 — レイアウト、フォーム、相互作用が実際に機能することを確認
    2. 02

      動作方法

      ブラウザオートメーションMCP(claude-in-chrome、Playwright、またはPuppeteer)を使用して、実際のユーザーのようにライブページと相互作用します。

      ブラウザオートメーションMCP(claude-in-chrome、Playwright、またはPuppeteer)を使用して、実際のユーザーのようにライブページと相互作用します。
    3. 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

    EvidenceSourceComputedTestedEditorial
    SignalValueEvidence typeMeaning
    Quality score63/100ComputedDocumentation, specificity, maintenance, and trust rules
    Repository stars234,327SourceRepository attention, not individual Skill quality
    Compatibility0 platformsSourceDeclared in the catalog source record
    Usage guidecatalog recordEditorialGenerated 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